[英]Automatically fire bullets instead of depending on key press?
我正在尝试使用canavas,html5和javascript开发游戏。 我的问题是我想在下面给出的代码中每300毫秒自动发射一次子弹,但是取而代之的是它们会根据按键被发射。
我的游戏代码如下:
<!DOCTYPE html>
<html>
<script src="jquery.js"></script>
<style>
#canvas{
border:inset 1px black;
}
</style>
<body>
<canvas id="canvas" width=400 height=300></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ballX = 0;
var ballY = 270;
var bulletY=270
var bulletX=50;
draw();
bullet();
function bulletFire()
{
if(bulletY<0)
{
bulletY=270;
bullet();
}
else
bulletY-=10;
}
function draw() {
ctx.clearRect(0,0,400,300);
ctx.fillStyle="black"
ctx.beginPath();
ctx.fillRect(ballX, ballY,100,30);
ctx.closePath();
ctx.fill();
}
function bullet()
{
//ctx.clearRect(0,0,400,300);
ctx.beginPath();
ctx.fillRect(bulletX, bulletY,15,30);
ctx.closePath();
}
// Here we just handle command keys
function keyDownHandler(event) {
// get which key the user pressed
var key = event.which;
// Let keypress handle displayable characters
if (key > 46) {
return;
}
switch (key) {
case 37:if(ballX!=0)
// left key
{
// move the ball 1 left by subtracting 1 from ballX
ballX -= 4;
bulletX -=4;
}
break;
case 39:
// right key
if(ballX!=300)
// move the ball 1 right by adding 1 to ballX
{
ballX += 4;
bulletX +=4;
}
break;
default:
break;
}
// redraw everything
draw();
bullet();
window.setInterval(bulletFire,300);
}
//draw();
// Listen for when the user presses a key down
window.addEventListener("keydown", keyDownHandler, true);
</script>
</body>
</html>
Javascript允许您定义一个keydown
处理程序以及一个keyup
处理程序。 通常,您可以使用它们来切换变量,以声明当前“向上”或“向下”的键。 他们只设置这些变量-没有别的。
另外,游戏机制通常以更新功能来实现,该功能定期执行。 在Javascript中,您可以使用setInterval
函数轻松安排此类函数的执行时间。
在该功能期间,您检查当前哪些键处于“按下”状态并执行相应的操作。 此功能还应该更新不受玩家控制的所有对象的位置,检查碰撞,并在对象碰撞时执行交互。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.