嘗試在我的JS蛇游戲中為單位增加snae大小
[英]trying to increase snae size by for units in my JS snake game
問題描述
大家好，我正在用JavaScript制作蛇游戲，到目前為止，我可以移動蛇並在畫布上生成隨機食物單元。 我也可以吃食物，使蛇的長度增加一。 但是，我想將其增加四個。 我用了snake.unshift(newHead); 添加一個新的腦袋，所以我的想法是我只重復4次。 這只會使蛇變得巨大。 有人可以解釋為什么我得到這種類型的結果並給我提示解決方案嗎？ 謝謝：）
const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); //set canvas dimension equal to css dimension canvas.width = 768; canvas.height = 512; //now put those dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create snake array let snake = [{x: cvsW/2, y: cvsH/2}]; //delcare global variable to hold users direction let direction; //create food object let food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } //read user's direction document.addEventListener('keydown', changeDirection); function changeDirection(e) { //set direction if (e.keyCode == 37 && direction != 'right') direction = 'left'; else if (e.keyCode == 38 && direction != 'down') direction = 'up'; else if (e.keyCode == 39 && direction != 'left') direction = 'right'; else if (e.keyCode == 40 && direction != 'up') direction = 'down'; } function draw() { //refresh canvas ctx.clearRect(0, 0, cvsW, cvsH); //draw snake for(let i = 0; i < snake.length; i++) { ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[i].x, snake[i].y, unit, unit); } //grab head position let headX = snake[0].x; let headY = snake[0].y; //posistion food on board ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, unit, unit); //send the snake in chosen direction if(direction == 'left') headX -= unit; else if(direction == 'up') headY -= unit; else if(direction == 'right') headX += unit; else if(direction == 'down') headY += unit; //create new head let newHead = {x: headX, y: headY} if(headX == food.x && headY == food.y) { //create new food position food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } } else { //remove tail snake.pop(); } //add head to snake snake.unshift(newHead); //add 3 nore heads snake.unshift(newHead); snake.unshift(newHead); snake.unshift(newHead); } //run game engine setInterval(draw, 70);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake Game</title> <style> body { background-color: #333; } canvas { background-color: #4d4d4d; margin: auto; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 750px; height: 500px; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-01-14 21:30:10
無論蛇是否進食，每次迭代都將添加四個新頭。
使用下面的確切代碼，我已經將進餐部分分離出了它自己的功能（當然，可以對其進行很多改進-但這會給您一個想法）。 蛇在進食時會長出，而不是一直都在長。
而且......剛剛抬起頭，你還需要確保食品不放在蛇。 這是一個很棒的項目，祝您好運。
const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); //set canvas dimension equal to css dimension canvas.width = 768; canvas.height = 512; //now put those dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create snake array let snake = [{x: cvsW/2, y: cvsH/2}]; //delcare global variable to hold users direction let direction; //create food object let food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } //read user's direction document.addEventListener('keydown', changeDirection); function changeDirection(e) { //set direction if (e.keyCode == 37 && direction != 'right') direction = 'left'; else if (e.keyCode == 38 && direction != 'down') direction = 'up'; else if (e.keyCode == 39 && direction != 'left') direction = 'right'; else if (e.keyCode == 40 && direction != 'up') direction = 'down'; } function draw() { //refresh canvas ctx.clearRect(0, 0, cvsW, cvsH); //draw snake for(let i = 0; i < snake.length; i++) { ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[i].x, snake[i].y, unit, unit); } //grab head position let headX = snake[0].x; let headY = snake[0].y; //posistion food on board ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, unit, unit); //send the snake in chosen direction if(direction == 'left') headX -= unit; else if(direction == 'up') headY -= unit; else if(direction == 'right') headX += unit; else if(direction == 'down') headY += unit; //create new head let newHead = {x: headX, y: headY} if(headX == food.x && headY == food.y) { //create new food position food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } eat(newHead); } else { //remove tail snake.pop(); } //add head to snake snake.unshift(newHead); } function eat(newHead) { //add 3 nore heads snake.unshift(newHead); snake.unshift(newHead); snake.unshift(newHead); } //run game engine setInterval(draw, 70);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake Game</title> <style> body { background-color: #333; } canvas { background-color: #4d4d4d; margin: auto; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 750px; height: 500px; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html>
嘗試獲取數組的最后一個對象並將其移動到前面以在香草 JS/畫布蛇游戲中移動蛇
[英]Trying to take the last object of an array and move it to the front for movement of snake in vanilla JS/canvas snake game
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.