jquery贪食蛇游戏

来源：互联网发布：南京泛成生物知乎编辑：程序博客网时间：2024/05/17 04:34

<!--elfenliedef贪食蛇游戏

现在能玩了，但还有不少地方需改进。
2010.3.21 12:40
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>贪食蛇游戏</title>
  <style type="text/css">
    #map{
      border:1px black solid;
    }
     #map td{
      width:20px;
   height:20px;

    }
  .snake{
   background-color:blue;
  }
  .stock{
   background-color:black;
  }
  .food{
   background-color:yellow;
  }
    </style>
  <script src="jquery-1.4.1.min.js"></script>
<script>
  var mappoints = [];
  var snake = {
    body:[],
    //1,2,-1,-2表示上左下右
    direction:1,
    olddirection:1,
    speed:200,
    life:null
   };
  var map ={
   width:15,
   height:15
  };
  $(function(){
   init();
   $('#move').click(function(){
    move(snake);
   });
   $('#start').click(function(){
    snake.life=setInterval(function(){move(snake)},snake.speed);
   });
   $('#pause').click(function(){
    clearInterval(snake.life);
   });
   //jquery写法
   $(this).keydown(function(e){
    if (!e)e = window.event;
    switch (e.keyCode) {
     //左
     case 37:{
      changeDirection(2);
      break;
     }
     //上
     case 38:{
      changeDirection(1);
      break;
     }
     //右
     case 39:{
      changeDirection(-2);
      break;
     }//下
     case 40:{
      changeDirection(-1);
      break;
     }
    }
   });
   //javascript写法
   //document.onkeydown= function(e){
   // if (!e)e = window.event;
   // switch (e.keyCode| e.which | e.charCode) {
   //  case 37:{

   //   break;
   //  }
   //  case 38:{

   //   break;
   //  }case 39:{

   //   break;
   //  }case 40:{

   //   break;
   //  }
   // }

   //}
  });
  function init(){

   for(var i = 0;i<map.height;i++){
    $("#map").append($("<tr></tr>"));
    for(var j = 0;j<map.width;j++){
     $("#map tr:eq("+i+")").append($("<td></td>"));
    }
   }
   //初始化地图

   for(var i = 0;i<map.width;i++){
    mappoints[i] = new Array();
    for(var j = 0;j<map.height;j++){
     //0表示空地，1表示蛇身，2表示石头，3表示食物
     mappoints[i][j] = 0;
    }
   }

   //初始化蛇身
   $("#map tr:eq(5) td:eq(5)").addClass("snake");
   snake.body.push({x:5,y:5});
   //创建食物
   createfood();
  }
  //蛇移动方法
  function move(snake){
   var newpoint={newx:0,newy:0};
   if(snake.direction+snake.olddirection==0){
    snake.direction = snake.olddirection;
   }else{
    snake.olddirection = snake.direction;
   }
   switch(snake.direction){
    case 1:{
     newpoint.newx = snake.body[0].x;
     newpoint.newy = snake.body[0].y-1;
     drawsnake(snake,repairnewpoint(newpoint));
     break;
    }
    case 2:{
     newpoint.newx = snake.body[0].x-1;
     newpoint.newy = snake.body[0].y;
     drawsnake(snake,repairnewpoint(newpoint));
     break;
    }
    case -1:{
     newpoint.newx = snake.body[0].x;
     newpoint.newy = snake.body[0].y+1;
     drawsnake(snake,repairnewpoint(newpoint));
     break;
    }
    case -2:{
     newpoint.newx = snake.body[0].x+1;
     newpoint.newy = snake.body[0].y;
     drawsnake(snake,repairnewpoint(newpoint));
     break;
    }
   }
  }
  //修正蛇头
  function repairnewpoint(newpoint){
   if(newpoint.newx>map.width-1){
    newpoint.newx =0;
   }else if(newpoint.newx<0){
    newpoint.newx =map.width-1;
   }
   else if(newpoint.newy>map.height-1){
    newpoint.newy =0;
   }else if(newpoint.newy<0){
    newpoint.newy =map.height-1;
   }
   return newpoint;
  }
  function iseatfood(newpoint){
   if(mappoints[newpoint.newx][newpoint.newy]==3)
    return true;
   return false;
  }
  function isdie(newpoint){
   if(mappoints[newpoint.newx][newpoint.newy]==1||mappoints[newpoint.newx][newpoint.newy]==2){
    return true;
   }
   return false;
  }
  function changeDirection(direction){
   snake.direction =direction;
  }
  function createfood(){
   //alert(Math.floor(Math.random()*10));
   var x= Math.floor(Math.random()*map.width);
   var y= Math.floor(Math.random()*map.height);

   if(mappoints[x][y]!=0){
    //alert("no food!");
    createfood();
   }else{
    mappoints[x][y]=3;
    drawfood(x,y);
   }
  }
  function createstock(){
  }
  function drawsnake(snake,newpoint){
   var x = newpoint.newx;
   var y = newpoint.newy;
   if (iseatfood(newpoint)) {
    snake.body.push({x:snake.body[snake.body.length-1].x,y:snake.body[snake.body.length-1].y});
    mappoints[x][y]==1;
    $("#map tr:eq("+y+") td:eq("+x+")").removeClass("food");
    createfood();
   }
   else {
    $("#map tr:eq(" + (snake.body[snake.body.length - 1].y) + ") td:eq(" + snake.body[snake.body.length - 1].x + ")").removeClass("snake");
    mappoints[snake.body[snake.body.length - 1].x][snake.body[snake.body.length - 1].y]=0;
    if(isdie(newpoint)){
     $("#gameinfo").html("你挂了！");
     clearInterval(snake.life);
    }
   }
   $("#map tr:eq("+y+") td:eq("+x+")").addClass("snake");
   snakemove(snake,x,y);
   //mapinfo();
  }
  function drawfood(x,y){
   $("#map tr:eq("+y+") td:eq("+x+")").addClass("food");
  }
  //移动蛇的身体，改变身体数组的值
  function snakemove(snake,x,y){
   for( var i = snake.body.length-1;i>0;i--){
    var bodypointx =snake.body[i-1].x;
    var bodypointy =snake.body[i-1].y;
    snake.body[i].x =bodypointx;
    snake.body[i].y =bodypointy;
    //alert("snake.body"+i+"是"+snake.body[i].x+" "+snake.body[i].y);
   }
   snake.body[0].x=x;
   snake.body[0].y=y;
   mappoints[snake.body[0].x][snake.body[0].y] = 1;
   //alert("snake.body"+1+"是"+snake.body[1].x+" "+snake.body[1].y);
   //for(var i = 0;i<snake.body.length;i++){
   // mappoints[snake.body[i].x][snake.body[i].y] = 1;
   //}
  }
  //此方法会让游戏变卡，调试用
  function mapinfo(){
   for(var i = 0;i<map.width;i++){
    for(var j = 0;j<map.height;j++){
     $("#map tr:eq("+i+") td:eq("+j+")").html(mappoints[j][i]);
    }
   }
  }
</script>
</head>
<body>
  游戏信息：<span id="gameinfo">贪食蛇游戏准备开始</span>
<input type="button" value="开始游戏" id="start">
<input type="button" value="停止游戏" id="pause">
<div id="mapcontain">
  <button id="move">移动</button>
<table id="map">
</table>
</div>
</body>
</html>