我正在尝试使用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>

===============>>#1 票数:0

Javascript允许您定义一个keydown处理程序以及一个keyup处理程序。 通常,您可以使用它们来切换变量,以声明当前“向上”或“向下”的键。 他们只设置这些变量-没有别的。

另外,游戏机制通常以更新功能来实现,该功能定期执行。 在Javascript中,您可以使用setInterval函数轻松安排此类函数的执行时间。

在该功能期间,您检查当前哪些键处于“按下”状态并执行相应的操作。 此功能还应该更新不受玩家控制的所有对象的位置,检查碰撞,并在对象碰撞时执行交互。

  ask by Swapnil Deo translate from so

未解决问题?本站智能推荐:

2回复

从玩家向子弹射击子弹?

如何从玩家X和Y向子弹X和Y发射子弹? 我可以找到鼠标X和Y的角度,但是我不知道如何创建一个会向鼠标飞的子弹。 鼠标坐标的代码是(dx,dy)。 另外,如果您能解释所做的事情以及如何做的逻辑,我将非常感激。 谢谢! 小提琴
1回复

javascript和HTML画布动画图像发射器

您好,我一直在观看有关HTML画布和动画的一些教程,我想创建自己的教程。 我遇到了麻烦。 :/我正在尝试创建一些从屏幕左侧开始并移至屏幕右侧的云,并在它们到达特定点时最终消失。 我还没有那个代码。 我不知道如何处理透明度。 但是,那不是我的麻烦所在。 目前,我的云朵没有动。 我
1回复

如何在画布上的按键上动画精灵?

如何在按键上为角色设置动画? 我更改了显示下一张图像的精灵位置,但是如何在两个图像之间循环播放,以便可以在按下键时显示播放器正在运行。 我需要第一帧和第二帧。 关键事件: 和绘制功能
1回复

无法在画布上的按键上更改图像

我要制作它,以便当我按向左按钮时,它会显示要向左移动的图像集。 (我正在制作RPG游戏。)我不知道如何使用Spritesheet,因此我最终分别加载每个图像以使事情变得容易。 这是我到目前为止的内容:
3回复

自动更新HTML画布的width和height属性

我想将HTML5 canvas与flexbox一起使用。 用户调整窗口大小时,需要自动设置canvas.width和canvas.height。 我尝试使用jQuery: 但它会不断增加画布的实际宽度,因此几乎可以填满整个屏幕。 我把它放在jsfiddle上 -尝试使用分隔符调整输
1回复

如何使用jspdf自动中断页面

我有一个选项供用户根据用户的选择添加更多行。 如果我添加的行多于9或10,则页面中断,最后一行变成一半。 我有3个按钮添加 , 删除和保存 。 添加-添加更多行。 删除-减少行数。 保存-另存为pdf。 这是我添加和删除行的脚本。 脚本:添加和删除行。
1回复

使用HTML 5画布自动滚动

我在与HTML 5画布动画相关的问题。 我刚刚编写了整个代码,它的作用是使框保持向下移动并超过网页的高度,这归因于滚动选项的出现,因此我必须向下滚动以查看框在哪里。 所以我的问题是:有什么方法可以使框向下移动时自动帮助用户仅通过该动画向下滚动? 意思是当盒子向下移动时,它也会向下滚动,
2回复

自动刷新HTML画布图像不起作用

对于我的网站,我需要从不断更新的服务器重绘图像。 我找到了解决方案并尝试过,但仍然无法自动刷新。 我还尝试向图像(local0.jpg)添加一个虚拟字符串,以使浏览器不使用缓存的图像,但不会成功。 我究竟做错了什么?
1回复

HTML Canvas标签的内容是否自动创建为PNG文件?

当我右键单击绘制到<canvas>标记中的图像时,将另存为的唯一文件选项类型是.png 。 即使上传的文件是.jpeg,快捷菜单中显示的Save Image As为的唯一选项也是.png文件。 图像数据是否作为png文件绘制到<canvas>标记中? HTML
2回复

创建一个类似div的元素,该元素的溢出设置为使用HTML Canvas自动

标题可能会引起误解,但这是我总结问题所能得出的最好结果。 无论如何,我需要弄清楚如何制作一个列表或一个容器,在这种情况下,是一个包含项目列表的纯矩形,可以将其上下拖动以显示容器中的其他项目。 从某种意义上讲,它类似于带有滑块的约束div,但没有滑块。 现在,我有了一个使用Konva