-1
對於一些練習，我決定做一個蛇遊戲。但是有一個問題：如果你吃了水果，它不會爲蛇添加身體部位！（L 41以及更遠）我有一個畫布，所以不用擔心，我會稍後優化我的代碼。我知道還有其他方法可以做到這一點，但我是這樣做的，我需要您的幫助來解決問題。所以當你吃水果的時候，它應該添加一個身體部位，但是它會縮小一個並添加一個，所以它保持不變。 （首次免除，然後再加一次！）我不知道它爲什麼第一次有效，而不是其他時間。如果你想測試，複製代碼，這HTML行添加到它：（HTML標記！）蛇體渲染（身體不遵循頭部）
var ctx = document.getElementById("ctx").getContext("2d"); //get the canvas
var WIDTH = 600;
var HEIGHT = 600;
var framecount = 0;
var fruitList = {};
var bodyparts = {};
var bodyparts2 = {};
var score = 0;
var bodyLenght = 1;
var bodyLenght2 = 0;
ctx.font = '30px Arial';
var head = { //head of snake
x: 300,
y: 300,
spdX: 10,
spdY: 5,
color: 'blue',
width: 20,
lastX: 0,
lastY: 0,
};
var body1 = {
x: 300,
y: 320,
color: 'blue',
width: 20,
lastX: null,
lastY: null,
}
var tail = {
x: 300,
y: 340,
color: 'blue',
width: 20,
lastX: null,
lastY: null,
}
bodyparts[1] = body1;
bodyparts2[1] = tail;
Body = function() { // snake's body
var body = {
x: null,
y: null,
id: bodyLenght,
color: 'blue',
width: 20,
lastX: null,
lastY: null,
};
bodyparts[bodyLenght] = body;
bodyparts2[bodyLenght2] = body;
}
Fruit = function(id, x, y, color) { // fruits
var fruit = {
x: x,
y: y,
id: id,
color: 'orange',
width: 20,
};
fruitList[id] = fruit;
}
setbodyPos = function(id1, id2) {
id1.lastX = id1.x;
id2.x = id1.lastX;
id1.lastY = id1.y;
id2.y = id1.lastY;
}
randomFruit = function() { // random coordinates for fruit
var x = Math.random() * (WIDTH - 20);
var y = Math.random() * (HEIGHT - 20);
var id = Math.random;
Fruit(id, x, y);
}
testCollisionRectRect = function(rect1, rect2) {
return rect1.x <= rect2.x + rect2.width && rect2.x <= rect1.x + rect1.width && rect1.y <= rect2.y + rect2.width && rect2.y <= rect1.y + rect1.width;
}
updatePosition = function() {
document.onkeydown = function(event) { //check if key is pressed
if (event.keyCode === 68) //d
head.pressingRight = true;
else if (event.keyCode === 83) //s
head.pressingDown = true;
else if (event.keyCode === 81) //q
head.pressingLeft = true;
else if (event.keyCode === 90) // z
head.pressingUp = true;
}
if (head.pressingRight) { //move head
setbodyPos(bodyparts[bodyLenght], tail);
for (var key in bodyparts) {
for (var key2 in bodyparts2) {
setbodyPos(bodyparts[key], bodyparts2[key2])
}
}
setbodyPos(head, body1);
head.x += head.width;
}
if (head.pressingLeft) {
setbodyPos(bodyparts[bodyLenght], tail);
for (var key in bodyparts) {
for (var key2 in bodyparts2) {
setbodyPos(bodyparts[key], bodyparts2[key2])
}
}
setbodyPos(head, body1);
head.x -= head.width;
}
if (head.pressingDown) {
setbodyPos(bodyparts[bodyLenght], tail);
for (var key in bodyparts) {
for (var key2 in bodyparts2) {
setbodyPos(bodyparts[key], bodyparts2[key2])
}
}
setbodyPos(head, body1);
head.y += head.width;
}
if (head.pressingUp) {
setbodyPos(bodyparts[bodyLenght], tail);
for (var key in bodyparts) {
for (var key2 in bodyparts2) {
setbodyPos(bodyparts[key], bodyparts2[key2])
}
}
setbodyPos(head, body1);
head.y -= head.width;
}
if (head.x > (WIDTH - head.width)) { // checks if it is a valid position
head.x = WIDTH - head.width;
};
if (head.x < 0) {
head.x = 0;
};
if (head.y > (HEIGHT - head.width)) {
head.y = HEIGHT - head.width;
};
if (head.y < 0) {
head.y = 0;
};
head.pressingDown = false; // no key is pressed
head.pressingUp = false;
head.pressingLeft = false;
head.pressingRight = false;
}
drawEntity = function(id) { // draw rectangle in canvas
ctx.save;
ctx.fillStyle = id.color;
ctx.fillRect(id.x, id.y, id.width, id.width);
ctx.restore;
}
update = function() { //update canvas
ctx.clearRect(0, 0, WIDTH, HEIGHT);
framecount++;
if (framecount % 125 === 0) { // 5 sec
randomFruit();
}
for (var key in fruitList) {
drawEntity(fruitList[key]);
if (testCollisionRectRect(head, fruitList[key]) === true) {
delete fruitList[key];
bodyLenght++;
bodyLenght2++;
Body();
score++;
tail.x = tail.lastX;
tail.y = tail.lastY;
};
}
updatePosition();
drawEntity(head);
drawEntity(tail);
for (var key in bodyparts) {
drawEntity(bodyparts[key]);
}
ctx.fillStyle = 'black';
ctx.fillText('Score:' + score, 0, 30)
}
setInterval(update, 40);<canvas id="ctx" width="600" height="600" style="border:1px solid #000000;"></canvas>
首先你應該正確地格式化你的代碼。之後，您應該將數據和邏輯從視圖（繪圖）中分離出來。 – kunerd
我的文件格式正確，只是忘了在這裏做 – SlimyG