贪食蛇

贪食蛇

既然有了俄罗斯方块，那趁兴也来一个贪食蛇吧，虽然有人说是入门级代码必写的小东西，但是也花费了不少时间，没有用到过多的复杂处理。

 

源代码：

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
  < title > Snake </ title >
< style type = " text/css " >
body {margin:0;padding:0;font-family:Verdana;}
.container {border:2px solid #ccc;overflow:hidden;zoom:1;padding:10px;}
#game - area {float:left;width:375px;height:300px;border:4px solid #999;padding:0;margin:0;font-size:0;line-height:0;overflow:hidden;}
#game - area ul {overflow:hidden;zoom:1;padding:0;margin:0;}
#game - area ul li {float:left;width:15px;height:15px;overflow:hidden;font-size:0;line-height:0;}
.black {background-color:#ccc;}
.blue {background-color:#1E87F0;}
.yellow {background-color:#F77117;}
.green {background-color:#91C846;}
.violet {background-color:#E727CF;}
#game - oper {float:left;display:inline;margin-left:20px;font-size:14px;}
#info {font-size:16px;}
#sn - stage {color:#1E87F0;font-weight:bold;}
#sn - score {color:#F77117;font-weight:bold;}
#oper {margin:10px 0;}
#oper button {font-size:14px;margin-right:5px;padding:2px 5px;font-family:Verdana;}
#debug {color:#ff0000;font-weight:bold;}
</ style >
</ head >
< body >
< div class = " container " >
  < div id = " game-area " ></ div >
  < div id = " game-oper " >
   < h3 > Snake Game </ h3 >
   < div id = " info " >
   Stage :  < span id = " sn-stage " > 1 </ span > ,
   Score :  < span id = " sn-score " > 0 </ span >
   </ div >
   < div id = " oper " >
    < button id = " begin " > Begin </ button >
    < button id = " restart " > Again </ button >
   </ div >
   < div id = " debug " ></ div >
  </ div >
</ div >
< script type = " text/javascript " >
var  Snake  =  ( function () {
 var $ = function(s){return document.getElementById(s)};
 var timer = null;
 var iSnake = null; // 蛇
 var speed = 600; // 移动速度
 var dir = "left"; // 移动方向
 var isPause = false; // 暂停
 var isOver = false;
 var createSnake = function(){
  iSnake = [];
  for(var i = 0; i < 4; i++){
   iSnake.push([9,(i + 10)]);
   if(0 == i){
    $("item-" + 9 + "-" + (i + 10)).className = "yellow";
    $("item-" + 9 + "-" + (i + 10)).title = "head";
   }else{
    $("item-" + 9 + "-" + (i + 10)).className = "blue";
    $("item-" + 9 + "-" + (i + 10)).title = "body";
   }
  }
 };
 var createWall = function(level){
  switch(level){
   case 1 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 6) + "-" + i).className = "black";
      $("item-" + (j + 6) + "-" + i).title = "block";
     }
    }
    break;
   case 2 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
   case 3 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 11) + "-" + i).className = "black";
      $("item-" + (j + 11) + "-" + i).title = "block";
     }
    }
    for(var i = 10; i < 25; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 4) + "-" + i).className = "black";
      $("item-" + (j + 4) + "-" + i).title = "block";
     }
    }
    break;
   case 4 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 6) + "-" + i).className = "black";
      $("item-" + (j + 6) + "-" + i).title = "block";
     }
    }
    break;
   case 5 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
   case 6 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 11) + "-" + i).className = "black";
      $("item-" + (j + 11) + "-" + i).title = "block";
     }
    }
    for(var i = 10; i < 25; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 4) + "-" + i).className = "black";
      $("item-" + (j + 4) + "-" + i).title = "block";
     }
    }
    break;
   case 7 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
  };
 };
 var resetSnake = function(level){
  dir = "left";
  initBoard();
  createWall(level);
  createSnake();
  createFood();
 };
 var createFood = function(){
  pauseSnake();
  var y = Math.ceil(Math.random() * 22) + 1;
  var x = Math.ceil(Math.random() * 16) + 1;
  if("head" == $("item-" + x + "-" + y).title || "body" == $("item-" + x + "-" + y).title || "block" == $("item-" + x + "-" + y).title){
   createFood();
   return false;
  }
  $("item-" + x + "-" + y).className = "green";
  $("item-" + x + "-" + y).title = "food";
  startSnake();
 };
 var moveSnake = function(){
  if(isOver){pauseSnake();return false;}
  $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "";
  $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "";
  for(var i = iSnake.length - 1; i > 0; i--){
   iSnake[i][0] = iSnake[i - 1][0];
   iSnake[i][1] = iSnake[i - 1][1];
   $("item-" + iSnake[i][0] + "-" + iSnake[i][1]).className = "blue";
   $("item-" + iSnake[i][0] + "-" + iSnake[i][1]).title = "body";
  }
  switch(dir){
   case "left" :
    moveLeft();
    break;
   case "right" :
    moveRight();
    break;
   case "top" :
    moveTop();
    break;
   case "bottom" :
    moveBottom();
    break;
  }
  chkSnake();
  if(chkFood()){
   iSnake.push([iSnake[iSnake.length - 1][0],iSnake[iSnake.length - 1][1]]);
   $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "blue";
   $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "body";
   setStage();
  }
  $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).className = "yellow";
  $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title = "head";

 };
 var chkSnake = function(){
  if("block" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title || "body" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){
   pauseSnake();
   isOver = true;
   $("debug").innerHTML = "Game Over";
   $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).style.backgroundColor = "red";
  }
 };
 var chkFood = function(){
  if("food" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){
   $("sn-score").innerHTML = parseInt($("sn-score").innerHTML,10) + 10;
   createFood();
   return true;
  }
  return false;
 };
 var setStage = function(){
  var _score = parseInt($("sn-score").innerHTML,10);
  var _stage = 1;
  if(_score >= 100 && _score < 200){
   speed = 500;
   _stage = 2;
  }else if(_score >= 200 && _score < 300){
   speed = 400;
   _stage = 3;
  }else if(_score >= 300 && _score < 400){
   speed = 300;
   _stage = 4;
  }else if(_score >= 400 && _score < 500){
   speed = 200;
   _stage = 5;
  }else if(_score >= 500 && _score < 600){
   speed = 100;
   _stage = 6;
  }else if(_score >= 600){
   speed = 80;
   _stage = 7;
  }
  0 == _score % 100 ? resetSnake(_score / 100) : "";
  $("sn-stage").innerHTML = _stage;
 };
 var moveLeft = function(){
  iSnake[0][1] = iSnake[0][1] - 1;
 };
 var moveRight = function(){
  iSnake[0][1] = iSnake[0][1] + 1;
 };
 var moveTop = function(){
  iSnake[0][0] = iSnake[0][0] - 1;
 };
 var moveBottom = function(){
  iSnake[0][0] = iSnake[0][0] + 1;
 };
 var pauseSnake = function(){
  if(null != timer){
   clearInterval(timer);
   timer = null;
   isPause = true;
  }
 };
 var startSnake = function(){
  if(null == timer){
   timer = setInterval(function(){moveSnake()},speed);
   isPause = false;
  }
 }
 var initBoard = function(){
  var _arr = [];
  _arr.push("<ul>");
  for(var i = 0,j = 0,k = 0; i < 500; i++){
   _arr.push("<li id='item-"+ k + "-" + j +"'"+ (0 == k || 19 == k || 0 == j || 24 ==j ? " class='black' title='block'" : "") +"></li>");
   j++;
   if(j > 24){j = 0;k++};
  }
  _arr.push("</ul>");
  $("game-area").innerHTML = _arr.join("");

  document.onkeydown = function(e){
   switch(keyCode(e)){
    case 37 :
     if("right" == dir || isPause){return false};
     //pauseSnake();
     dir = "left";
     moveSnake();
     //startSnake();
     break;
    case 39 :
     if("left" == dir || isPause){return false};
     //pauseSnake();
     dir = "right";
     moveSnake();
     //startSnake();
     break;
    case 38 :
     if("bottom" == dir || isPause){return false};
     //pauseSnake();
     dir = "top";
     moveSnake();
     //startSnake();
     break;
    case 40 :
     if("top" == dir || isPause){return false};
     //pauseSnake();
     dir = "bottom";
     moveSnake();
     //startSnake();
     break;
   }
  }
  $("begin").onclick = function(){
   if("Begin" == this.innerHTML){
    if(null == iSnake){
     createSnake();
     createFood();
     startSnake();
    }else{
     startSnake();
     isPause = false;
    }
    this.innerHTML = "Pause";
   }else if("Pause" == this.innerHTML){
    pauseSnake();
    isPause = true;
    this.innerHTML = "Begin";
   }
  }
  $("restart").onclick = function(){
   clearInterval(timer);
   timer = null;
   dir = "left";
   iSnake = null;
   isOver = false;
   initBoard();
   speed = 600;
   $("sn-score").innerHTML = "0";
   $("sn-stage").innerHTML = "1";
   $("begin").innerHTML = "Begin";
   $("debug").innerHTML = "";
  }
 };
 var keyCode = function(evt){
  evt = (evt) ? evt : ((window.event) ? window.event : "");
  return evt.keyCode ? evt.keyCode : evt.which;
 };
 return {
  init : initBoard
 };
} )();
Snake.init();
</ script >
</ body >
</ html >