js实现canvas星球大战星球防御射击类游戏代码-html代码-BFW代码库

js实现canvas星球大战星球防御射击类游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现canvas星球大战星球防御射击类游戏代码，点击发射大炮攻击陨石，防止撞击行星。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
        overflow: hidden;
        height: 100%;
        background: #191919;
        width: 100%;
    }
    
    #canvas {
        background: url('//repo.bfw.wiki/bfwrepo/images/game/sheji/space.jpg') no-repeat;
        width: 100%;
        height: 100%;
        background-size: cover;
    }
    
    #canvas.playing {
        cursor: url('//repo.bfw.wiki/bfwrepo/images/game/sheji/aim_red.png') 17.5 17.5,auto !important;
    }
    
    .full-screen {
        position: fixed;
        width: 35px;
        height: 35px;
        background: url(//repo.bfw.wiki/bfwrepo/images/game/sheji/full-screen.png) no-repeat;
        z-index: 10;
        display: block;
        right: 10px;
        bottom: 10px;
    }
    </style>
</head>

<body>

    <body>
        <canvas id="canvas"></canvas>

    </body>
    <script>
        //Vanilla JS
    
    //PLAY IN FULL PAGE VIEW!
    
    
    window.addEventListener("DOMContentLoaded", game);
    
    //General sprite load
    var sprite = new Image();
    var spriteExplosion = new Image();
    sprite.src = '//repo.bfw.wiki/bfwrepo/images/game/sheji/sprite.png';
    
    window.onload = function() {
        spriteExplosion.src = '//repo.bfw.wiki/bfwrepo/images/game/sheji/explosion.png';
    };
    
    //Game
    function game() {
    
        //Canvas
        var canvas = document.getElementById('canvas'),
            ctx    = canvas.getContext('2d'),
            cH     = ctx.canvas.height = window.innerHeight,
            cW     = ctx.canvas.width  = window.innerWidth ;
    
        //Game
        var bullets    = [],
            asteroids  = [],
            explosions = [],
            destroyed  = 0,
            record     = 0,
            count      = 0,
            playing    = false,
            gameOver   = false,
            _planet    = {deg: 0};
    
        //Player
        var player = {
            posX   : -35,
            posY   : -(100+82),
            width  : 70,
            height : 79,
            deg    : 0
        };
    
        canvas.addEventListener('click', action);
        canvas.addEventListener('mousemove', action);
        window.addEventListener("resize", update);
    
        function update() {
            cH = ctx.canvas.height = window.innerHeight;
            cW = ctx.canvas.width  = window.innerWidth ;
        }
    
        function move(e) {
            player.deg .........完整代码请登录后点击上方下载按钮下载查看