如何在蛇游戏中创建碰撞？
[英]How to create a collision in a Snake Game?
问题描述
I am currently creating a Snake Game in html and java script and i am having difficulties creating a collision where the snake (known as 'myGamePiece' in code)(green block)is not colliding with the obstacle (known as 'myObstacle' in code)(red block) and adding 5 extra blocks to the snake. 
我正在用html和java脚本创建一个Snake游戏，我很难创建一个碰撞，其中蛇（代码中称为'myGamePiece'）（绿色块）没有与障碍物碰撞（在代码中称为'myObstacle'） ）（红色块）并在蛇身上添加5个额外的块。 How could i resolve this issue? 我怎么能解决这个问题？
I have tried implementing and editing other pieces of code into my game and have been using the W3 schools game tutorial as part of a guide for my game but it doesn't provide or give a clear solution as what i could for my solution. 我已经尝试在我的游戏中实现和编辑其他代码片段并且已经使用W3学校游戏教程作为我的游戏指南的一部分，但它没有提供或给出一个明确的解决方案，因为我可以为我的解决方案。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #000000;
background-color: #000000;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(20, 20, "green", 10, 120);
myObstacle = new component(20, 20, "red", 300, 120);
myGameArea.start();
}
//Creates the Game Canvas:
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 900;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
//create the movement with the KeyBoard Arrows:
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.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
</script>
</body>
</html>
I expect the output to be that when the Game piece collides with the obstacle, 5 more green blocks are added to the end of the game piece, but nothing happens when it collides together. 我希望输出是当游戏片与障碍物碰撞时，在游戏片的末尾添加5个绿色块，但是当它碰撞在一起时没有任何反应。
1 个解决方案
解决方案1
0 2019-05-02 10:30:23
I created simple function checkCollision() I suggest you to improve it and calculate if there is collision of object given in parameters and then return true, and handle collision in another function. 我创建了简单的函数checkCollision()我建议你改进它并计算参数中给出的对象是否有碰撞然后返回true，并在另一个函数中处理碰撞。 In that way you will be able to use the same function to check collision with other objects and don't need to rewrite it. 通过这种方式，您将能够使用相同的函数来检查与其他对象的冲突，而不需要重写它。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #000000; background-color: #000000; } </style> </head> <body onload="startGame()"> <script> var myGamePiece; var myObstacle; function startGame() { myGamePiece = new component(20, 20, "green", 10, 120); myObstacle = new component(20, 20, "red", 300, 120); myGameArea.start(); } //Creates the Game Canvas: var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 900; this.canvas.height = 500; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); //create the movement with the KeyBoard Arrows: 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.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.x += this.speedX; this.y += this.speedY; } } function updateGameArea() { myGameArea.clear(); myObstacle.update(); myGamePiece.speedX = 0; myGamePiece.speedY = 0; if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; } if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; } if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; } if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; } myGamePiece.newPos(); myGamePiece.update(); checkCollision(); //check collision } function checkCollision() { if(Math.abs(myGamePiece.x - myObstacle.x) < myGamePiece.width) //if difference of X of 2 objects is less than with of object, you can replace it with your desired value if(Math.abs(myGamePiece.y - myObstacle.y) < myGamePiece.height) //the same for the height console.log("collision"); // handle collision here } startGame(); </script> </body> </html>
if you got questions don't hesitate to ask 如果你有问题，请不要犹豫
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.