gpt4 book ai didi

javascript - HTML5 Canvas 中的碰撞

转载 作者:行者123 更新时间:2023-11-27 23:36:59 29 4
gpt4 key购买 nike

我对 Javascript 还很陌生,通常使用 Canvas ,我无法让碰撞检测与我的 Canvas 墙一起工作。

我通常在 Canvas 上画一个小方 block ,我可以用键盘上的箭头键控制它,但它会继续越过 Canvas 。

这是没有我尝试碰撞检测的工作代码。

<!DOCTYPE html>
<html>
<head>
<canvas id = "gameCanvas" width="400" height="400" style = "border:1px solid #000000;"></canvas>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
var c = document.getElementById("gameCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgb(255, 0, 0)";

var snake = {
x: 5
, y: 5
};


function drawSnake() {
ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(snake.x ,snake.y,20,20);
}

window.addEventListener("keydown", function(event) {
if (event.keyCode == 39)
snake.x += 5;
else if (event.keyCode == 37)
snake.x -= 5;
else if (event.keyCode == 38)
snake.y -= 5;
else if (event.keyCode == 40)
snake.y += 5;
drawSnake();
});

drawSnake();
</script>
</body>
</html>

这是我对碰撞检测的尝试。

//Wall Collision
if(snake.x >= canvas.w || snake.x <= -1 || snake.y >= canvas.h || snake.y <= -1) {
return;
}

输入此代码后我会看到一片空白,我不明白为什么。

我希望方 block 在与 Canvas 墙碰撞后重置其位置,这就是我遇到所有麻烦的地方。

最佳答案

你不应该把它放在 addEventListener 下.然后,return正在结束 JS 脚本。

您想将碰撞检测代码放在(开头)drawSnake() 中.

参见 this working example .


我觉得我应该解决您的代码中的其他一些问题(示例中已全部更改)。

  • <canvas>应该在 <body>元素,而不是 <head>
  • canvas没有在JS中定义(你可以从ctx.canvas.width中删除它
  • 更改canvas.wcanvas.hctx.widthctx.height在碰撞检测代码中
  • 代替return来自 drawSnake()函数,将蛇重置为其默认坐标
  • 画一条更好的蛇

关于javascript - HTML5 Canvas 中的碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33468152/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com