随笔 - 11  文章 - 3  trackbacks - 0
<2009年12月>
日一二三四五六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

常用链接

留言簿

随笔档案

文章档案

搜索

  •  

最新评论

阅读排行榜

评论排行榜

贪食蛇

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

 

源代码：

<!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>
posted on 2009-12-30 20:30 jacklau 阅读(180) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 jacklau Powered by: 博客园 模板提供：沪江博客