时间戳

首页 > 解决方案 > HTML Canvas 枪功能

javascript - HTML Canvas 枪功能

问题描述

我需要帮助完成按“空格”后发射子弹的功能。

我尝试使用这些

然后是这样的for循环：

但我无法让它工作。基本上是一个函数，每次制作子弹时，它都会存储在一个数组中，然后空间循环通过数组在空格键上制作新的子弹。

小提琴：https ://jsfiddle.net/tmanrocks999/7mLpo8uj/652/

代码：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:4px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var endGoalPiece;
var myEnemy1;
var bullet;
var myEnemy1Hp = 10;
var damage = 1;
var playerExp = 0;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 0, 240);
    endGoalPiece = new component(30, 30, "black", 450, 240);
    myEnemy1 = new component(30, 30, "green", 200, 240);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })
    },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.gamearea = myGameArea;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    //this.gravity = 0.05;
    //this.gravitySpeed = 0;
    this.x = x;
    this.y = y;
    this.color = color;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY; //+ this.gravitySpeed;        
    }  

}
}


function jump() {
  myGamePiece.gravitySpeed=-1;
}

}

function shootGun(){
  bullet = new component(11, 5, "blue", myGamePiece.x+27 , myGamePiece.y+13 );
  bullet.newPos();
  bullet.speedX=1;
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }//left
    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }//right
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.gravitySpeed = -1; }//jump
    if (myGameArea.key && myGameArea.key == 32) {shootGun()}//shoot gun
   //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
    myEnemy1.update();
    endGoalPiece.update();
    myGamePiece.newPos();
    myGamePiece.update();
    bullet.newPos();
    bullet.update();
}
</script>

<p>use the arrow keys on you keyboard to move the red square.</p>
<span id="myEnemy1Hp">10</span> <br>
<span id="playerExp">0<span><br> / <span id = "playerMaxExp">100</span>

</body>
</html>

我希望在空格键上通过循环遍历数组来继续创建子弹，但是在按下空格键后，每次按下空格键时只会生成 1 个项目符号并且位置会重置（我知道为什么这是我不需要解释）。

我怎样才能得到射手的错觉。

标签： javascripthtml

解决方案

看看这段代码：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>STACKOVERFLOW</title>
    <style>
        canvas {
            border: 4px solid #d3d3d3;
            background-color: #f1f1f1;
        }
    </style>
</head>

<body onload="startGame()">
    <p>use the arrow keys on you keyboard to move the red square.</p>
    <span id="myEnemy1Hp">10</span> <br>
    <span id="playerExp">0<span><br> / <span id = "playerMaxExp">100</span>

    <script>
        var myGamePiece;
        var endGoalPiece;
        var myEnemy1;
        var bullets = [];
        var myEnemy1Hp = 10;
        var damage = 1;
        var playerExp = 0;

        function startGame() {
            myGameArea.start();
            myGamePiece = new component(30, 30, "red", 0, 240);
            endGoalPiece = new component(30, 30, "black", 450, 240);
            myEnemy1 = new component(30, 30, "green", 200, 240);
        }

        var myGameArea = {
            canvas: document.createElement("canvas"),
            start: function() {
                this.canvas.width = 480;
                this.canvas.height = 270;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
                window.addEventListener('keydown', function(e) {
                    myGameArea.key = e.keyCode;
                })
                window.addEventListener('keyup', function(e) {
                    myGameArea.key = false;
                })
            },
            clear: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }

        function component(width, height, color, x, y) {
            this.gamearea = myGameArea;
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;
            //this.gravity = 0.05;
            //this.gravitySpeed = 0;
            this.x = x;
            this.y = y;
            this.color = color;
            this.update = function() {
                ctx = myGameArea.context;
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            this.newPos = function() {
                this.gravitySpeed += this.gravity;
                this.x += this.speedX;
                this.y += this.speedY; //+ this.gravitySpeed;

            }



        }

        function jump() {
            myGamePiece.gravitySpeed = -1;
        }

        function shootGun() {

            let bullet = new component(11, 5, "blue", myGamePiece.x + 27, myGamePiece.y + 13);
            bullet.newPos();
            bullet.speedX = 1;
            bullets.push( bullet );
        }


        function updateGameArea() {
            myGameArea.clear();
            myGamePiece.speedX = 0;
            myGamePiece.speedY = 0;
            if (myGameArea.key && myGameArea.key == 37) {
                myGamePiece.speedX = -1;
            } //left
            if (myGameArea.key && myGameArea.key == 39) {
                myGamePiece.speedX = 1;
            } //right
            if (myGameArea.key && myGameArea.key == 38) {
                myGamePiece.gravitySpeed = -1;
            } //jump
            if (myGameArea.key && myGameArea.key == 32) {
                shootGun()
            } //shoot gun
            //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
            myEnemy1.update();
            endGoalPiece.update();
            myGamePiece.newPos();
            myGamePiece.update();
            bullets.forEach( (bullet)=> {
                bullet.newPos() 
                bullet.update();
            });
            // bullet.newPos();
            // bullet.update();
        }
    </script>
</body>

</html>

密码笔

推荐阅读