【发布时间】：2019-10-23 10:29:41
【问题描述】：
我需要帮助完成按“空格”后发射子弹的功能。
我试过用这些
- var b = new bullet();
- var bullets = []
- bullets.push(b)
然后是这样的for循环：
- for (var i = 0; i
但我无法让它工作。基本上是一个函数，每次制作子弹时，它都会存储在一个数组中，然后空间循环通过数组在空格键上制作新的子弹。
小提琴：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 个项目符号，并且每次按下空格键都会重置位置（我知道为什么会这样，但我不知道需要解释）。
我怎样才能得到射手的错觉。
【问题讨论】：
-
我喜欢这个问题，但我不确定我是否理解这个要求。究竟应该在按键上发生什么？你想发射多发子弹还是......？从你的描述看不太清楚。
-
代码中的一些 cmets：函数构造函数名称，应始终以大写字母开头：函数组件。对于游戏动画，您可能应该使用requestAnimationFrame API 而不是 setInterval。
标签： javascript html