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 = 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";
                  .........完整代码请登录后点击上方下载按钮下载查看