如何基于javascript实现贪吃蛇游戏

这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

html代码：

<div class="content">  <div class="btn startBtn">       <!-- 开始按钮 -->      <button type="button"></button>  </div>  <div class="btn stopBtn">        <!-- 暂停按钮 -->    <button type="button"></button>  </div>  <div id="snakeWrap"></div>     <!-- 主题内容 --></div>

css代码：

* {  margin: 0;  padding: 0;}body {  background-color: #565F65;  width: 100%;  height: 10vh;  overflow: hidden;}.content {  width: 500px;  height: 500px;  position: absolute;  top: 50%;  left: 50%;   margin-top: -250px;  margin-left: -250px;  background-color: #565F65;  border: 10px solid #E7E7E7;  box-shadow: inset 0px 0px 5px 2px #000;}.btn {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background-color: rgba(0, 0, 0, .3);  /*游戏未开始时和暂停时的遮罩*/  z-index: 2;}.btn button {  background: none;  border: none;  background-size: 100% 100%;  cursor: pointer;  outline: none;  position: absolute;  left: 50%;  top: 50%;}.startBtn button{  width: 170px;  height: 80px;  background-image: url(img/startbtn.png);  margin-top: -40px;  margin-left: -85px;}.stopBtn {  display: none;}.stopBtn button{  width: 70px;  height: 70px;  background-image: url(img/stopbtn.png);  margin-top: -35px;  margin-left: -35px;}#snakeWrap {  width: 500px;  height: 500px;  position: relative;}.snakeHead { /*蛇头样式*/  background-color: aqua;  border-radius: 50%;}.snakeBody { /*蛇身样式*/        background-color: navajowhite;  border-radius: 50%;}.food {  /*食物样式*/  background-image: url(img/food.png);  background-size: cover;}

javascript 代码：

var sw = 20,  //一个方块的宽 　 sh = 20,  //一个方块的高    tr = 25,  //行数    td = 25;  //列数var snake = null,  //蛇的实例    food = null,  //食物的实例    game = null;  //游戏的实例function Square(x, y, classname) {  this.x = x * sw;     //方块实际的位置  this.y = y * sh;     //方块实际的位置  this.class = classname;    this.viewContent = document.createElement('div');  //方块对应的DOM元素  this.viewContent.className = this.class;  this.parent = document.getElementById('snakeWrap'); //方块的父级}Square.prototype.create = function() {  //创建方块 DOM,并添加到页面里  this.viewContent.style.position = 'absolute';  this.viewContent.style.width = sw + 'px';  this.viewContent.style.height = sh + 'px';  this.viewContent.style.left = this.x + 'px';  this.viewContent.style.top = this.y + 'px';    this.parent.appendChild(this.viewContent);};Square.prototype.remove = function() {  this.parent.removeChild(this.viewContent);}//蛇function Snake() {  this.head = null;  //存一下蛇头的信息  this.tail = null;  //存一下蛇尾的信息  this.pos = [];   //存储蛇身上的每一个方块的位置,二维数组    this.directionNum = {  //存储蛇走的方向,用一个对象来表示    left : {      x : -1,      y : 0,      rotate : 180    },    right : {      x : 1,      y : 0,      rotate : 0    },    up : {      x : 0,      y : -1,      rotate : -90    },    down : {      x : 0,      y : 1,      rotate : 90    }  }}Snake.prototype.init = function() {  //创建蛇头  var snakeHead = new Square(2, 0, 'snakeHead');  snakeHead.create();  this.head = snakeHead;    // 存储蛇头信息  this.pos.push([2, 0]);    //把蛇头的位置存起来    //创建蛇身体  var snakeBody1 = new Square(1, 0, 'snakeBody');  snakeBody1.create();  this.pos.push([1, 0]);    //把蛇身1的位置存起来    var snakeBody2 = new Square(0, 0, 'snakeBody');  snakeBody2.create();  this.tail = snakeBody2;    //把蛇尾的信息存起来  this.pos.push([0, 0]);    //把蛇身1的位置存起来    //让蛇头蛇身形成链表关系  snakeHead.last = null;  snakeHead.next = snakeBody1;    snakeBody1.last = snakeHead;  snakeBody1.next = snakeBody2;    snakeBody2.last = snakeBody1;  snakeBody2.next = null;    //给蛇添加一条属性,用来表示蛇走的方向  this.direction = this.directionNum.right; //默认让蛇往右走  }//这个方法用来获取蛇头的下一个位置对应的元素, 要根据元素做不同的事情Snake.prototype.getNextPos = function() {  var nextPos = [             //蛇头要走的下一个点的坐标    this.head.x/sw + this.direction.x,    this.head.y/sh + this.direction.y  ];    //下一个点是自己,代表撞到了自己,游戏结束  var selfCollind = false;   //是否撞到自己  this.pos.forEach(function(value) {    if(value[0] == nextPos[0] && value[1] == nextPos[1]) {      //如果数组中的两个数据都相等,就说明下一个点在蛇身上里面能找到,代表撞到自己了      selfCollind = true;    }  });  if(selfCollind) {    console.log('撞到自己了!');        this.strategies.die.call(this);        return;  }    //下一个点是墙,游戏结束  if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {    console.log('撞墙了!');        this.strategies.die.call(this);        return;  }  //下一个点是食物,吃  if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {    //如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点    console.log('撞到食物了了!');    this.strategies.eat.call(this);    return;  }  //下一个点什么都不是,走  this.strategies.move.call(this);};//处理碰撞后要做的事 Snake.prototype.strategies = {  move : function(format) {  //这个参数用于决定要不要删除最后一个方块(蛇尾), 当传了这个参数后就表示要做的事情是吃    //创建新身体(在蛇头位置)    var newBody = new Square(this.head.x/sw, this.head.y/sh, 'snakeBody');    //更新链表关系    newBody.next = this.head.next;    newBody.next.last = newBody;    newBody.last = null;            this.head.remove();  //旧舌头从原来的位置删除    newBody.create();        //创建一个新蛇头(蛇头下一个要走到的点)    var newHead = new Square(this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y, 'snakeHead')    //更新链表关系    newHead.next = newBody;    newHead.last = null;    newBody.last = newHead;    newHead.viewContent.style.transform = 'rotate('+this.direction.rotate+'deg)';    newHead.create();            //蛇身上每一个方块的坐标也要更新    this.pos.splice(0,0, [this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y]);    this.head = newHead;   //还要把this.head的信息更新一下        if(!format) {  //如何format 的值为 false, 表示需要删除(除了吃之外的操作)      this.tail.remove();      this.tail = this.tail.last;            this.pos.pop();    }      },  eat : function() {    this.strategies.move.call(this, true);    createFood();    game.score ++;  },  die : function() {    game.over();  }}snake = new Snake();//创建食物function createFood() {  //食物小方块的随机坐标  var x = null;  var y = null;    var include = true;  //循环跳出的条件, true表示食物的坐标在蛇身上(需要继续循环),false表示食物坐标不在蛇身上(不循环了)  while(include) {    x = Math.round(Math.random() * (td - 1)); //0-29    y = Math.round(Math.random() * (tr - 1));        snake.pos.forEach(function(value) {      if(x != value[0] && y != value[1]) {        //这个条件成立说明现在随机出来的这个坐标,在蛇身上并没有找到        include = false;      }    });      }  //生成食物  food = new Square(x, y, 'food');  food.pos = [x,y]; //存储一下生成食物的坐标,用于跟蛇头要走的下一个点作对比  var foodDom = document.querySelector('.food');  if(foodDom) {    foodDom.style.left = x*sw + 'px';    foodDom.style.top = y*sh + 'px';  }else {    food.create();  }}//创建游戏逻辑function Game() {  this.timer = null;  this.score = 0;  this.speed = 200;}Game.prototype.init = function() {  snake.init();  snake.getNextPos();  createFood();    document.onkeydown = function(ev) {  //用户按下方向键触发事件    if(ev.which == 37 && snake.direction != snake.directionNum.right) {       //用户按下左键是,蛇不能是往右走      snake.direction = snake.directionNum.left;    }else if(ev.which == 38 && snake.direction != snake.directionNum.dowm) {      snake.direction = snake.directionNum.up;    }else if(ev.which == 39 && snake.direction != snake.directionNum.left) {      snake.direction = snake.directionNum.right;    }else if(ev.which == 40 && snake.direction != snake.directionNum.up) {      snake.direction = snake.directionNum.down;    }  }    this.start();}Game.prototype.start = function() { //开始游戏  this.timer = setInterval(function() {    snake.getNextPos();      }, this.speed);}Game.prototype.pause = function() {  clearInterval(this.timer);}Game.prototype.over = function() { //开始游戏  clearInterval(this.timer);  alert('你的得分为' + this.score);    //游戏回到最初的状态  var snakeWrap = document.getElementById('snakeWrap');  snakeWrap.innerHTML = '';  snake = new Snake();  game = new Game();  var startBtnWrap = document.querySelector('.startBtn');  startBtnWrap.style.display = 'block'; }//开启游戏game = new Game();var startBtn = document.querySelector('.startBtn button');startBtn.onclick = function() {  startBtn.parentNode.style.display = 'none';  game.init();};//暂停var snakeWrap = document.getElementById('snakeWrap');var puseBtn = document.querySelector('.stopBtn button')snakeWrap.onclick = function() {  game.pause();  puseBtn.parentNode.style.display = 'block';}puseBtn.onclick =function() {  game.start();  puseBtn.parentNode.style.display = 'none';}