我试图检测蛇何时撞到食物 [英] Im trying to get detection on when snake hits food
本文介绍了我试图检测蛇何时撞到食物的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
var foods = {
x：Math.floor（Math.random（）* 500），
y：Math.floor（Math.random（）* 500）
};
var snake = {
x：25，
y：25，
宽度：25，
身高：25
};
函数drawRect（）{
ctx.clearRect（0,0，canvas.width，canvas.height）;
ctx.beginPath（）;
ctx.rect（snake.x，snake.y，snake.width，snake.height）
ctx.fillStyle =＃000000;
ctx.fill（）;
ctx.closePath（）;
}
函数控制（）{
if（rightPressed）{
snake.x + = 1;
} else if（leftPressed）{
snake.x - = 1;
}否则if（upPressed）{
snake.y - = 1;
}否则if（downPressed）{
snake.y + = 1;
}
}
函数collision（）{
if（snake.x> = canvas.width）{
snake.x = canvas。 width - canvas.width;
} else if（snake.x< canvas.width - canvas.width）{
snake.x = canvas.width;
} else if（snake.y> = canvas.height）{
snake.y = canvas.height - canvas.height;
} else if（snake.y< canvas.height - canvas.height）{
snake.y = canvas.height;
}
}
document.addEventListener（keydown，keyDownHandler，false）;
//document.addEventListener(\"keyup，keyUpHandler，false）;
function keyDownHandler（e）{
if（e.keyCode == 39）{
rightPressed = true;
leftPressed = false;
upPressed = false;
downPressed = false;
}
else if（e.keyCode == 37）{
leftPressed = true;
rightPressed = false;
upPressed = false;
downPressed = false;
}
if（e.keyCode == 38）{
upPressed = true;
leftPressed = false;
rightPressed = false;
downPressed = false;
}
else if（e.keyCode == 40）{
downPressed = true;
rightPressed = false;
leftPressed = false;
upPressed = false;
}
}
/ *
函数keyUpHandler（e）{
if（e.keyCode == 39）{
rightPressed =假;
}
else if（e.keyCode == 37）{
leftPressed = false;
}
if（e.keyCode == 38）{
upPressed = false;
}
else if（e.keyCode == 40）{
downPressed = false;
}
}
* /
function food（）{
ctx.beginPath（）;
ctx.rect（foods.x，foods.y，25,25）;
ctx.fillStyle =＃8B0000;
ctx.fill（）;
ctx.closePath（）;
}
我的问题|
------------------------------------------ ----------------------------
函数eatFood（）{
if（snake.x ==食物。 x&& snake.y == foods.y）{
console.log（collide）;
}
}
------------------------------------ ----------------------------------
函数start（）{
drawRect（）;
controls（）;
collision（）;
food（）;
eatFood（）;
}
setInterval（start，10）;
我尝试了什么：
我尝试了多种方式，如果我能提供帮助那就太棒了。
解决方案
谷歌是你的朋友...
如果你想学习如何用JS开发游戏，请阅读：
使用纯JavaScript的2D突破游戏 - 游戏开发| MDN [ ^ ]
第7步是关于碰撞检测......
引用：我试图检测蛇何时撞到食物
喜欢'snakeByte'？ Snake Byte [Plums：0] ATARI 800（8-Bit） - 540 - YouTube [ ^ ]
引用：我已经尝试了多种方式，如果我能提供帮助那就太棒了。
首先，你需要告诉我们游戏应该是什么以及它应该如何工作和动画。 br />
引用：当我调试时我没有错误，老实说我不知道该怎么办。
调试器永远不会出错，调试器只显示你的代码在做什么，它不理解，也不知道你的代码应该做什么。
为了调试代码，您需要删除动画并手动启动每个屏幕刷新。
简而言之，如果我们不了解详细信息，我们无法帮助您
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
var foods = {
x: Math.floor(Math.random() * 500),
y: Math.floor(Math.random() * 500)
};
var snake = {
x: 25,
y: 25,
width: 25,
height: 25
};
function drawRect() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(snake.x, snake.y, snake.width, snake.height)
ctx.fillStyle = "#000000";
ctx.fill();
ctx.closePath();
}
function controls() {
if(rightPressed) {
snake.x += 1;
}else if(leftPressed) {
snake.x -= 1;
}else if(upPressed) {
snake.y -= 1;
}else if(downPressed) {
snake.y += 1;
}
}
function collision() {
if(snake.x >= canvas.width) {
snake.x = canvas.width - canvas.width;
}else if(snake.x < canvas.width - canvas.width) {
snake.x = canvas.width;
}else if(snake.y >= canvas.height) {
snake.y = canvas.height - canvas.height;
}else if(snake.y < canvas.height - canvas.height) {
snake.y = canvas.height;
}
}
document.addEventListener("keydown", keyDownHandler, false);
//document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
leftPressed = false;
upPressed = false;
downPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = true;
rightPressed = false;
upPressed = false;
downPressed = false;
}
if(e.keyCode == 38) {
upPressed = true;
leftPressed = false;
rightPressed = false;
downPressed = false;
}
else if(e.keyCode == 40) {
downPressed = true;
rightPressed = false;
leftPressed = false;
upPressed = false;
}
}
/*
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
if(e.keyCode == 38) {
upPressed = false;
}
else if(e.keyCode == 40) {
downPressed = false;
}
}
*/
function food() {
ctx.beginPath();
ctx.rect(foods.x, foods.y, 25, 25);
ctx.fillStyle = "#8B0000";
ctx.fill();
ctx.closePath();
}
MY PROBLEM|
----------------------------------------------------------------------
function eatFood() {
if(snake.x == foods.x && snake.y == foods.y) {
console.log("collide");
}
}
----------------------------------------------------------------------
function start() {
drawRect();
controls();
collision();
food();
eatFood();
}
setInterval(start, 10);
What I have tried:
Ive tried multiple ways and if I could help that would be awesome.
解决方案
Google is your friend...
If you want to learn how to develop games in JS, read this:
2D breakout game using pure JavaScript - Game development | MDN[^]
The 7th step is about collision detection...
Quote:Im trying to get detection on when snake hits food
Like 'snakeByte' ? Snake Byte [Plums: 0] ATARI 800 (8-Bit) - 540 - YouTube[^]
Quote:Ive tried multiple ways and if I could help that would be awesome.
First you need to tell us what is supposed to be the game and how it should work and animate.
Quote:when I debug I get no errors and I'm honestly just not sure what to do.
You never get error by the debugger, the debugger only show you what your code is doing, it don't understand and don't know what your code is supposed to do.
In order to debug the code, you need to remove the animation and launch each screen refresh manually.
In short, we can't help you if we don't know the details.
这篇关于我试图检测蛇何时撞到食物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
