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

代码语言：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 = Math.atan2(e.offsetX - (cW/2), -(e.offsetY - (cH/2)));
        }
    
        function action(e) {
            e.preventDefault();
            if(playing) {
                var bullet = {
                    x: -8,
                    y: -179,
                    sizeX : 2,
                    sizeY : 10,
                    realX : e.offsetX,
                    realY : e.offsetY,
                    dirX  : e.offsetX,
                    dirY  : e.offsetY,
                    deg   : Math.atan2(e.offsetX - (cW/2), -(e.offsetY - (cH/2))),
                    destroyed: false
                };
    
                bullets.push(bullet);
            } else {
                var dist;
                if(gameOver) {
                    dist = Math.sqrt(((e.offsetX - cW/2) * (e.offsetX - cW/2)) + ((e.offsetY - (cH/2 + 45 + 22)) * (e.offsetY - (cH/2+ 45 + 22))));
                    if (dist < 27) {
                        if(e.type == 'click') {
                            gameOver   = false;
                            count      = 0;
                            bullets    = [];
                            asteroids  = [];
                            explosions = [];
                            destroyed  = 0;
                            player.deg = 0;
                            canvas.removeEventListener('contextmenu', action);
                            canvas.removeEventListener('mousemove', move);
                            canvas.style.cursor = "default";
                        } else {
                            canvas.style.cursor = "pointer";
                        }
                    } else {
                        canvas.style.cursor = "default";
                    }
                } else {
                    dist = Math.sqrt(((e.offsetX - cW/2) * (e.offsetX - cW/2)) + ((e.offsetY - cH/2) * (e.offsetY - cH/2)));
    
                    if (dist < 27) {
                        if(e.type == 'click') {
                            playing = true;
                            canvas.removeEventListener("mousemove", action);
                            canvas.addEventListener('contextmenu', action);
                            canvas.addEventListener('mousemove', move);
                            canvas.setAttribute("class", "playing");
                            canvas.style.cursor = "default";
                        } else {
                            canvas.style.cursor = "pointer";
                        }
                    } else {
                        canvas.style.cursor = "default";
                    }
                }
            }
        }
    
        function fire() {
            var distance;
    
            for(var i = 0; i < bullets.length; i++) {
                if(!bullets[i].destroyed) {
                    ctx.save();
                    ctx.translate(cW/2,cH/2);
                    ctx.rotate(bullets[i].deg);
    
                    ctx.drawImage(
                        sprite,
                        211,
                        100,
                        50,
                        75,
                        bullets[i].x,
                        bullets[i].y -= 20,
                        19,
                        30
                    );
    
                    ctx.restore();
    
                    //Real coords
                    bullets[i].realX = (0) - (bullets[i].y + 10) * Math.sin(bullets[i].deg);
                    bullets[i].realY = (0) + (bullets[i].y + 10) * Math.cos(bullets[i].deg);
    
                    bullets[i].realX += cW/2;
                    bullets[i].realY += cH/2;
    
                    //Collision
                    for(var j = 0; j < asteroids.length; j++) {
                        if(!asteroids[j].destroyed) {
                            distance = Math.sqrt(Math.pow(
                                    asteroids[j].realX - bullets[i].realX, 2) +
                                Math.pow(asteroids[j].realY - bullets[i].realY, 2)
                            );
    
                            if (distance < (((asteroids[j].width/asteroids[j].size) / 2) - 4) + ((19 / 2) - 4)) {
                                destroyed += 1;
                                asteroids[j].destroyed = true;
                                bullets[i].destroyed   = true;
                                explosions.push(asteroids[j]);
                            }
                        }
                    }
                }
            }
        }
    
        function planet() {
            ctx.save();
            ctx.fillStyle   = 'white';
            ctx.shadowBlur    = 100;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowColor   = "#999";
    
            ctx.arc(
                (cW/2),
                (cH/2),
                100,
                0,
                Math.PI * 2
            );
            ctx.fill();
    
            //Planet rotation
            ctx.translate(cW/2,cH/2);
            ctx.rotate((_planet.deg += 0.1) * (Math.PI / 180));
            ctx.drawImage(sprite, 0, 0, 200, 200, -100, -100, 200,200);
            ctx.restore();
        }
    
        function _player() {
    
            ctx.save();
            ctx.translate.........完整代码请登录后点击上方下载按钮下载查看