欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现贪吃蛇游戏含注释

程序员文章站 2022-06-22 13:45:42
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋。直接看效果。打开调试面板,在resource面板,新建snippet粘贴以下代码,右键snippet...

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

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

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

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

js实现贪吃蛇游戏含注释

js实现贪吃蛇游戏含注释

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 贪吃蛇