<html>

<head>

<style>

body

{

 background:#444;

}

.rect

{

	border:1px solid #94F;

	width:680px;

	height:680px;

}

.gridred

{

width:38px;

height:38px;

background:red;

border:1px #555 solid;

float:left

}

.gridgreen

{

width:38px;

height:38px;

background:green;

border:1px #555 solid;

float:left

}

.gridblue

{

width:38px;

height:38px;

background:blue;

border:1px #555 solid;

float:left

}

.st

{

width:100;

height:40;

font-size: 30;

font-family:Georgia;

color:#F40;

margin:0.5cm;

top:800px;

background:#FFF;

text-align:center;

}

h1.important

{

 color:#FFFF00;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<script>

var Max=17;//格子数

var direction=3;//蛇正在爬行的方向1左 2上 3右 4下

var snack=new Array();

var arr=new Array();

var foodx,foody;

var time;

var gameover1=1;

//获得下一个食物的坐标

function getrand()

{

 foodx=Math.round(Math.random()*20)%Max;

 foody=Math.round(Math.random()*20)%Max;

}

//推断下一个食物的坐标合法性

function rand()

{

getrand();

while(arr[foodx][foody])

 getrand();

 var before=document.getElementById(foodx+"_"+foody);

 before.setAttribute("class","gridblue");

}

//開始游戏

function begin()

{

if(!gameover1)

return ;

gameover1=0;

console.log(foodx);

var bu=document.getElementById("beg");

bu.disabled=true;

 snack.push([8,8]);

 var before=document.getElementById(8+"_"+8);

 arr[8][8]=1;

 before.setAttribute("class","gridred");

 rand();

 time=setInterval("go()",850);

}

//游戏结束

function gameover()

{

  clearInterval(time);

  gameover1=1;

  alert("gameover!");

  var bu=document.getElementById("beg");

  bu.disabled=false;

  for(var i=0;i<snack.length;i++)

  {

    var x=snack[i][0];

    var y=snack[i][1];

	arr[x][y]=0;

	var bu=document.getElementById(x+"_"+y);

	bu.setAttribute("class","gridgreen");

  }

  var bu=document.getElementById(foodx+"_"+foody);

	bu.setAttribute("class","gridgreen");

  snack.length=0;

}

//推断是否出界

function legal(x,y)

{

  if(x>=0&&x<Max&&y>=0&&y<Max)

  return true;

  return false;

}

//蛇行走

function go()

{

if(gameover1)

return ;

var x=snack[snack.length-1][0];

var y=snack[snack.length-1][1];

switch(direction)

 {

  case 1:y-=1;break;

  case 2:x-=1;break;

  case 3:y+=1;break;

  case 4:x+=1;break;

 }

 if(!legal(x,y))

 {

 gameover();

 return false;

 }

 if(arr[x][y]==1)

 {

 gameover();

 return false;

 }

 arr[x][y]=1;

 snack.push([x,y]);

 var before=document.getElementById(x+"_"+y);

 before.setAttribute("class","gridred");

 if(!(x==foodx&&y==foody))

 {

 var point=snack.shift();

  arr[point[0]][point[1]]=0;

 var last=document.getElementById(point[0]+"_"+point[1]);

 last.setAttribute("class","gridgreen");

 }

 else

 {

 rand();

 }

 return true;

}

function map()//生成地图

{

  arr.length=Max;

  for(var i=0;i<Max;i++)

  {

  arr[i]=new Array();

  arr[i].length=Max;

  }

  for(var i=0;i<Max;i++)

  for(var j=0;j<Max;j++)

  {

   arr[i][j]=0;

  }

  var x=document.getElementById("body");

  for(var i=0;i<Max*Max;i++)

  {

   var local=document.createElement("div");

   local.setAttribute("class","gridgreen");

   local.id=parseInt(i/Max)+'_'+parseInt(i%Max);

	x.appendChild(local);

  }

}

//监測键盘按键

$(document).ready(function(){

$("html").keydown(function(event){

 keycommand(event.which);

});

});

//按键命令触发

function keycommand(which)

{

 if(which!=32&&(which<37||which>40))

  return ;

  switch (which)

  {

     case 32:stop();break;

	 case 37:changeDirection(1);break;

	 case 38:changeDirection(2);break;

	 case 39:changeDirection(3);break;

	 case 40:changeDirection(4);break;

  }

}

//改变蛇的方向

function changeDirection(x)

{

 if(Math.abs(x-direction)==2)

 return ;

 direction = x;

 clearInterval(time);

 if(go())

 time=setInterval("go()",800-snack.length*15+50);

}

</script>

</head>

<body onload="map()" >

<br/>

<h1 align="center" class="important">贪吃蛇</h1>

<div align="center">

<div class="rect" id="body" >

</div>

</div>

<div align="center">

<button id="beg" onclick="begin()" class="st">start</button>

</div>

</body>

</html>

javascript实现贪吃蛇的更多相关文章

  1. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  2. JavaScript—面向对象贪吃蛇_1

    前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...

  3. 使用javascript实现贪吃蛇游戏

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JavaScript—面向对象 贪吃蛇最终

    效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgrou ...

  5. JavaScript—面向对象 贪吃蛇_3 蛇对象

    蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, ...

  6. javascript写贪吃蛇游戏（20行代码！）

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  7. Javascript仿贪吃蛇出现Bug的反思

    bug现象:    图一

  8. JavaScript—面向对象 贪吃蛇_2 游戏对象

    游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...

  9. JavaScript—面向对象 贪吃蛇_2 食物对象

    食物对象 //自调用 (function (){ function Food(element) { this.width = 20 this.height = 20 this.backgroundCo ...

随机推荐

  1. django datetime format 日期格式化

    django datetime format 日期格式化 www.jx-lab.com python 中 date,datetime,time对象都支持strftime(format)方法,但有一些区 ...

  2. C++的常量折叠（一）

    前言 前几天女票问了我一个阿里的面试题,是有关C++语言的const常量的,其实她一提出来我就知道考察的点了:肯定是const常量的内存不是分配在read-only的存储区的,const常量的内存分配 ...

  3. Cloudera Manager Service Monitor 定期挂掉问题排查

    显示:查询 Service Monitor 时发生内部错误(Error sending messages to firehose: mgmt-SERVICEMONITOR-) 1.初步排查出是smon ...

  4. 关于playframework2.5

    加入了很多新东西: 1.用akka streams 替换了大部分 iteratee-based async io,当然还有一些模块在用iteratees 2.java 的一些API 做了调整升级,以及 ...

  5. 解读ECMAScript 6箭头函数

    箭头函数是ECMAScript 6最受关注的更新内容之一.它引入了一种用「箭头」(=>)来定义函数的新语法,它…它碉堡了~.箭头函数与传统的JavaScript函数主要区别在于以下几点: 对 t ...

  6. 网络爬虫返回json处理数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - Decembe ...

  7. IPTABLES 映射问题

    今天要做一个新的映射:将内网的一个8090口映射到外网的8087口. 在 /ETC/RC.LOCAL中最后插入: iptables -t nat -A PREROUTING -d outIP -p t ...

  8. poj 3356 AGTC(线性dp)

    题目链接:http://poj.org/problem?id=3356 思路分析:题目为经典的编辑距离问题,其实质为动态规划问题: 编辑距离问题定义:给定一个字符串source,可以对其进行复制,替换 ...

  9. Foundation Sorting: Single List Insertion Sort

    /* List Insertion Sorting. * Implementation history:. * 2013-09-15, Mars Fu, first version. */ #incl ...

  10. Python经常使用第三方工具、库、骨架

    Python ImagingLibrary(PIL):它提供强大的图形处理的能力,并提供广泛的图形文件格式支持.该库能进行图形格式的转换.打印和显示.还能进行一些图形效果的处理,如图形的放大.缩小和旋 ...