HTML贪吃蛇游戏，附重玩，加速，暂停，排行榜功能

【实例简介】

实训时做的个答辩网页游戏本项目是基于html、javascript、css而开发的一款上手简单的贪吃蛇游戏。

【实例截图】

【核心代码】

var score = document.getElementById('score');
var map = document.getElementById('map');// 获取地图路径
var hangNumber = 20;
var lieNumber = 22;
var mapWidth = lieNumber * 20   'px';// 地图的宽
var mapHeight = hangNumber * 20   'px';// 地图的高
map.style.width = mapWidth;
map.style.height = mapHeight;
var snakeDIVPosition = [];//记录地图上的所有div的位置
for ( var i = 0; i < hangNumber; i  ) {
  var hangDIV = document.createElement('div');//行div
  hangDIV.className = 'hang';
  map.appendChild(hangDIV);//创造节点
  var hangArray = [];
  for ( var j = 0; j < lieNumber; j  ) {
    var lieDIV = document.createElement('div');//方块DIV
    lieDIV.className = 'lie';
    hangDIV.appendChild(lieDIV);//在创造节点
    hangArray.push(lieDIV);//将lieDiv添加到数组
  }
  snakeDIVPosition.push(hangArray);//将hangArray添加到数组
}
var snake = [];//蛇身
for ( var i = 0; i < 3; i  ) {
  snakeDIVPosition[0][i].className = 'lie liveSnake';
  snake[i] = snakeDIVPosition[0][i];
}
//初始化
score.innerHTML=0;
var x = 2;
var y = 0;
var scoreCount = 0;
var foodX = 0;
var foodY = 0;
var direction = 'right';
var changeDir = true;
var delayTimer = null;
document.onkeydown = function(event) {//方向键
  if (!changeDir) {//判断是否需要改变方向
    return;
  }
  event = event || window.event;
  if (direction=='right' && event.keyCode == 37) {
    return;
  }
  if (direction == 'left' && event.keyCode == 39) {
    return;
  }
  if (direction == 'up' && event.keyCode == 40) {
    return;
  }
  if (direction == 'down' && event.keyCode == 38) {
    return;
  }
  switch (event.keyCode) {
    case 37:
      direction = 'left';
      break;
    case 38:
      direction = 'up';
      break;
    case 39:
      direction = 'right';
      break;
    case 40:
      direction = 'down';
      break;
  }
  changeDir = false;
  delayTimer = setTimeout(function() {
    changeDir = true;
  },50)
};
function snakeMove() {//蛇头位置
  switch (direction) {
    case 'left':
      x--;
      break;
    case 'right':
      x  ;
      break;
    case 'up':
      y--;
      break;
    case 'down':
      y  ;
      break;
  };
  if (x < 0 || y < 0 || x >= lieNumber || y >= hangNumber) {//判断游戏是否结束
    alert('游戏结束！您当前的得分是：' scoreCount '分！继续加油吧！');
    clearInterval(moveTimer);
    paihang();
    return;
  }
  for ( var i = 0; i < snake.length; i  ) {
    if (snake[i] == snakeDIVPosition[y][x]) {//蛇头位置与之前身体位置比较，相同则吃到了自己
      alert('您吃了您自己！游戏结束！下次请注意哦！另外，您当前的分数是：' scoreCount '分！继续加油吧！');
      clearInterval(moveTimer);
      paihang();
      return;
    };
  }
  if (foodX == x && foodY == y) {//判断当前位置是否有食物
    snakeDIVPosition[foodY][foodX].className = 'lie liveSnake';
    snake.push(snakeDIVPosition[foodY][foodX]);//蛇加长
    scoreCount=scoreCount 5;//记分
    score.innerHTML = scoreCount;//更新分数
    createNewfood();//随即产生食物
  } else {//蛇尾变成格子的颜色
    snake[0].className = 'lie';
    snake.shift();
    snakeDIVPosition[y][x].className = 'lie liveSnake';
    snake.push(snakeDIVPosition[y][x]);
  };
};
var moveTimer = setInterval('snakeMove()', 300);//蛇移动速度
function random(min, max) {
  return Math.floor(Math.random() * (max - min   1)   min);
};
function createNewfood() {//随即产生食物
  foodX = random(0, lieNumber - 1);
  foodY = random(0, hangNumber - 1);
  if (snakeDIVPosition[foodY][foodX].className == 'lie liveSnake') {
    createNewfood();//食物被吃后，随即又产生食物
  } else {
    snakeDIVPosition[foodY][foodX].className = 'lie food';
  }
};
createNewfood();//开局的食物
var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
pause.onclick = function() {
  clearInterval(moveTimer);
};
start.onclick = function() {
  clearInterval(moveTimer);
  moveTimer = setInterval('snakeMove()', speed1);
};
refresh.onclick = function() {
  window.location.reload();
};
var speed1 = 300;
speed.onclick = function() {
  speed1 -= 50;
  clearInterval(moveTimer);
  moveTimer = setInterval('snakeMove()', speed1);
};
function paihang() {
  var his = localStorage.getItem('history')
  if (his) {
    // 已经有记录了
    //把his转换为JSON对象
    his = JSON.parse(his)
    if (his.length >= 10) {
      // 当前成绩是否进入了前10名
      if (scoreCount > his[9].score) {
        gameStorage(scoreCount)
      } else {
        alert('请再接再厉！')
      }
    } else {
      gameStorage(scoreCount)
    }
  } else {
    // 第一次
    gameStorage(scoreCount)
  }
}

// 游戏存储
function gameStorage(score) {
  if(scoreCount<100) {
  alert('友情提示：只有分数超过100才能进入至尊排行榜哦！')}
  else {
    var name = prompt('恭喜您获得进入至尊榜的资格！请输入您的名字哟：')
    name = name ? name : '匿名'
    his = localStorage.getItem('history')
    if (his) {
      his = JSON.parse(his)// 将JSON字符串转换JSON对象（数组）
      var index = his.length
      // 计算出当前成绩应该放到哪个 位置
      for (var a in his) {
        if (score > his[a].score) {// 当前成绩 大于 哪个历史记录 就放到哪个之前
          index = a
          break
        }
      }
      // 当前成绩的数组
      var obj = [
        {"name": name, "score": score}
      ]
      // 根据 上一步到的位置 从这个地方 his 分为2个数组
      var before = his.slice(0, index)
      var after = his.slice(index, his.length)
      // 将3个数组 进行重新排序  需要把当前的成绩 插入 before after中间  更新缓存
      localStorage.setItem('history', JSON.stringify(before.concat(obj, after)))
    } else {
      var obj = [
        {"name": name, "score": score}
      ]
      // 转换为JSON格式字符串 进行存储
      localStorage.setItem('history', JSON.stringify(obj))
    }
  }
  // 更新排行榜
  showOrder()
}
// 排行榜输出
function  showOrder() {
  var ul  = document.getElementById('orderList')
  ul.innerHTML = ''
  his = localStorage.getItem( 'history')
  if (his) {
    his = JSON.parse(his)
    var html = ''
    for (var i = 0; i <= his.length - 1; i  ) {
      if (i > 9) {
        break
      } 
      html  = '<li>第'  (i 1)  '名&nbsp;&nbsp;&nbsp;&nbsp;姓名：'  his[i]['name']  '&nbsp;&nbsp;&nbsp;&nbsp;成绩：' his[i]['score'] '</li>'

    }
    ul.innerHTML = html
  }
}
showOrder()