<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. objective-C学习笔记（三）数据成员：属性与实例变量

    类型成员 Type Member 结构体 struct 的成员很简单,只有变量. 类的成员就很多了: 数据成员 data member 描述对象(本讲重点) · 实例变量  instance vari ...

  2. BZOJ 3444: 最后的晚餐( )

    把暗恋关系看成无向边, 那某个点度数超过2就无解.存在环也是无解.有解的话对连通分量进行排列就行了. ------------------------------------------------- ...

  3. JSP内置对象----response

    response 对象   当客户访问一个服务器的页面时,会提交一个HTTP 请求,服务器收到请求时,返回HTTP 响应.request 对象获取客户请求提交的信息,  与request对象相对应的对 ...

  4. php分页实例附代码

    一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  5. CRM中的一个函数，保存一下，别系统被ぅ崩坏就麻烦了.

    CREATE OR REPLACE function UXQLCRM.GET_WEI_XIU(htfid in varchar2) ); CURSOR cr_bg_jl is select " ...

  6. Python学习之路——初识Python

    一.第一个程序Hello World: 1.打印输出Hello World: Python2打印方法: >>> print "hello world"hello ...

  7. 07-C语言流程控制if、switch

    目录: 一.流程控制 条件分支 if else 二.流程控制 开关分支 switch 回到顶部 一.流程控制 条件分支 1.语法格式:if(表达式1){ //表达式1为真(非0时),执行的语句部分. ...

  8. ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能

    首先放出该插件的下载地址:http://pan.baidu.com/s/1Aa3yD,里面有帮助文档,详细了解可以自行下载学习,本章只讲解一些基本的验证功能,页面代码如下: <%@ Page L ...

  9. DC游戏《斑鸠》原创赏析[转载]

    游戏背景:      凤来之国本来只是边远地区的一个小国.但现在他们却自称为得到“神之力”的“神通者”,在“选民思想”“和平统一”之类的名义下开始了对各地的武力侵略.      事情的起因是因为凤来之 ...

  10. JAVA GUI学习 - JTable表格组件学习_C ***

    /** * JTable高级应用 * @author Wfei * */ public class JTableKnow_C extends JFrame { JTable jTable; MyJMe ...