<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. handlebar.js使用

    官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用 一.定义模板 <script id="entry-template" t ...

  2. C# 自定义控件的一些文章和博客

    http://blog.csdn.net/songkexin/archive/2009/12/08/4961215.aspx http://www.cnblogs.com/yuanfan/archiv ...

  3. 帝国cms7.0忘记后台管理账户用户名密码

    最近刚登陆以前的网站,但是发现自己的后台管理用户名密码已经忘记,于是到帝国cms论坛里面找了一下解决方案,成功解决问题.特此分享一下解决成功经验. 原帖地址:http://bbs.phome.net/ ...

  4. OTL使用总结

    在VC中访问Oracle,可以使用ADO或ODBC,如果你比较强大,也可以直接使用OCI API,但我个人认为OTL是最佳选择,它是一套数据库访问C++模板库,全部代码都在otlv4.h头文件中,通过 ...

  5. ubuntu安装hadoop 若干问题的解决

    问题1:安装openssh-server失败 原因: 下列软件包有未满足的依赖关系: openssh-server : 依赖: openssh-client (= 1:5.9p1-5ubuntu1) ...

  6. Flex4 设置combobox选项不可编辑

    近日做数据的增删改查,使用的flex4的ComboBox控件---> flex4中ComboBox其实就是TextInput的叠加 flex3中ComboBox其实就是Label的叠加 开始是使 ...

  7. PHP移动互联网开发（1）——环境搭建及配置

    原文地址:http://www.php100.com/html/php/rumen/2014/0326/6702.html 一.PHP5.4环境搭配基本流程 Apache:Web服务提供者.官网:ww ...

  8. Android中库项目、jar包等的使用方法

    在软件开发过程中,程序代码的复用,是非常重要的概念.我们总是需要使用一些现有的模块.包.框架,或开发自己的模块.包.框架,来实现对程序代码的复用.比如在JavaWeb编程过程中,经常使用的Struts ...

  9. c#Winform程序的toolStripButton自己定义背景应用演示样例源代码

    C# Winform程序的toolStrip中toolStripButton的背景是蓝色的,怎样改变背景及边框的颜色和样式呢? 实现此功能须要重写toolStripButton的Paint方法 这里仅 ...

  10. iOS离线打包

    预备环境 iOS开发环境,Mac OS.XCode 7.2以上版本: 下载HBuilder离线打包iOS版SDK(5+ SDK下载). SDK目录说明 HBuilder-Hello:离线打包演示应用: ...