js如何实现贪吃蛇游戏

本篇内容介绍了“js如何实现贪吃蛇游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

两个小时完成的，有点简陋。

直接看效果。打开调试面板，在resource面板，新建snippet

粘贴以下代码，右键snippet，run。

clearInterval(timer);document.body.innerHTML = "";//每秒移动多少格let speed = 10;let speedUpMul = 3;//是否能穿墙let isThroughTheWall = true;//行数let row = 40;let headColor = 'red';let bodyColor = 'green';let foodColor = 'yellow';let borderColor = 'grey';// 游戏全局变量let hasFood = false;//游戏状态let gamestaus = 'start';let hasAccelerate = false;let mainContainer = document.createElement("div");mainContainer.style.width = 20 * row + 1 + "px";mainContainer.style.height = 20 * row + 1 + "px";mainContainer.style.margin = "0 auto";mainContainer.style.position = "relative";mainContainer.style.border = "1px solid " + borderColor;document.body.appendChild(mainContainer);for(let i = 0;i<row;i++){ let marginTop = 20 * i + "px"; for(let j = 0;j<row;j++){ let marginLeft = j * 20 + "px"; let tempDiv = document.createElement('div'); tempDiv.style.width = "19px"; tempDiv.style.height = "19px"; tempDiv.style.marginTop = marginTop; tempDiv.style.marginLeft = marginLeft; tempDiv.style.border = "0.5px solid " + borderColor; tempDiv.style.position = "absolute"; tempDiv.id = j + "div" + i; mainContainer.appendChild(tempDiv); }}class Cell{ constructor(x, y, color){ if(isThroughTheWall){  if(x < 0) x = row-1;  if(x > row - 1) x = 0;  if(y < 0) y = row - 1;  if(y > row - 1) y = 0; }else{  if(x < 0 || y < 0|| x > row - 1 || y > row - 1){  clearInterval(timer);  alert('游戏结束');  return;  } } this.x = x; this.y = y; this.color = color; let tempDiv = document.getElementById(x + 'div' + y); if(tempDiv) tempDiv.style.backgroundColor = color; }}snake = { head : {}, body : [], dire : 1}let headx = Math.floor(Math.random() * 14) + 3;let heady = Math.floor(Math.random() * 14) + 3;snake.head = new Cell(headx, heady, headColor);//上右下左let direction = [1, 2, 3, 4]snake.dire = direction[Math.floor(Math.random() * 4)];if(snake.dire == 1){ snake.body.push(new Cell(snake.head.x, snake.head.y+1, bodyColor)); snake.body.push(new Cell(snake.head.x, snake.head.y+2, bodyColor)); snake.body.push(new Cell(snake.head.x, snake.head.y+3, bodyColor));}if(snake.dire == 2){ snake.body.push(new Cell(snake.head.x-1, snake.head.y, bodyColor)); snake.body.push(new Cell(snake.head.x-2, snake.head.y, bodyColor)); snake.body.push(new Cell(snake.head.x-3, snake.head.y, bodyColor));}if(snake.dire == 3){ snake.body.push(new Cell(snake.head.x, snake.head.y-1, bodyColor)); snake.body.push(new Cell(snake.head.x, snake.head.y-2, bodyColor)); snake.body.push(new Cell(snake.head.x, snake.head.y-3, bodyColor));}if(snake.dire == 4){ snake.body.push(new Cell(snake.head.x+1, snake.head.y, bodyColor)); snake.body.push(new Cell(snake.head.x+2, snake.head.y, bodyColor)); snake.body.push(new Cell(snake.head.x+3, snake.head.y, bodyColor));}function game(){ if(gamestaus == 'pause'){ return; } if(gamestaus == 'gameover'){ clearInterval(timer); alert('游戏结束'); return; } initFood(); let snakeHeadX = snake.head.x; let snakeHeadY = snake.head.y; let color = ''; if(snake.dire == 1){ let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY-1)); if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = new Cell(snakeHeadX, snakeHeadY - 1, headColor); } if(snake.dire == 2){ let tempDiv = document.getElementById((snakeHeadX + 1) + 'div' + snakeHeadY); if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = new Cell(snakeHeadX + 1, snakeHeadY, headColor); } if(snake.dire == 3){ let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY+1)); if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = new Cell(snakeHeadX, snakeHeadY + 1, headColor); } if(snake.dire == 4){ let tempDiv = document.getElementById((snakeHeadX - 1) + 'div' + snakeHeadY); if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = new Cell(snakeHeadX - 1, snakeHeadY, headColor); } snake.body.unshift(new Cell(snakeHeadX, snakeHeadY, bodyColor)); if(color && color == foodColor){ hasFood = false; initFood(); }else if(color && color == bodyColor){ gamestaus = 'gameover';  }else{ let lastBody = snake.body.pop(); new Cell(lastBody.x, lastBody.y, ''); }}var timer = setInterval(game, 10 / speed * 100)function initFood(){ while(!hasFood){ let x = Math.floor(Math.random() * row); let y = Math.floor(Math.random() * row); let snakeBody = snake.body; let enable = true; if(snake.head.x == x && snake.head.y == y){  enable = false; } for(sBody of snakeBody){  if(sBody.x == x && sBody.y == y){  enable = false;  break;  } } if(enable){  new Cell(x, y, foodColor);  hasFood = true; } }}document.onkeydown = function(e){ if(e.keyCode == 38){ //上 if(snake.dire != 3 && snake.dire != 1){  snake.dire = 1; }else if(snake.dire == 1){  if(!hasAccelerate){  clearInterval(timer);  hasAccelerate = true;  speed = speed * speedUpMul;  timer = setInterval(game, 10 / speed * 100)  } } } if(e.keyCode == 39){ //右 if(snake.dire != 4 && snake.dire != 2){  snake.dire = 2; }else if(snake.dire == 2){  if(!hasAccelerate){  clearInterval(timer);  hasAccelerate = true;  speed = speed * speedUpMul;  timer = setInterval(game, 10 / speed * 100)  } } } if(e.keyCode == 40){ //下 if(snake.dire != 1 && snake.dire != 3){  snake.dire = 3; }else if(snake.dire == 3){  if(!hasAccelerate){  clearInterval(timer);  hasAccelerate = true;  speed = speed * speedUpMul;  timer = setInterval(game, 10 / speed * 100)  } } } if(e.keyCode == 37){ //左 if(snake.dire != 2 && snake.dire != 4){  snake.dire = 4; }else if(snake.dire == 4){  if(!hasAccelerate){  clearInterval(timer);  hasAccelerate = true;  speed = speed * speedUpMul;  timer = setInterval(game, 10 / speed * 100)  } } } //空格键暂停 if(e.keyCode == 32){ if(gamestaus == 'start'){  gamestaus = 'pause'; }else if(gamestaus == 'pause'){  gamestaus = 'start'; } }}document.onkeyup = function(e){ if(e.keyCode == 38){ //上 if(snake.dire == 1 && hasAccelerate){  clearInterval(timer);  hasAccelerate = false;  speed = speed / speedUpMul;  timer = setInterval(game, 10 / speed * 100) } } if(e.keyCode == 39){ //右  if(snake.dire == 2 && hasAccelerate){  clearInterval(timer);  hasAccelerate = false;  speed = speed / speedUpMul;  timer = setInterval(game, 10 / speed * 100) } } if(e.keyCode == 40){ //下  if(snake.dire == 3 && hasAccelerate){  clearInterval(timer);  hasAccelerate = false;  speed = speed / speedUpMul;  timer = setInterval(game, 10 / speed * 100) } } if(e.keyCode == 37){ //左 if(snake.dire == 4 && hasAccelerate){  clearInterval(timer);  hasAccelerate = false;  speed = speed / speedUpMul;  timer = setInterval(game, 10 / speed * 100) } }}

“js如何实现贪吃蛇游戏”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！