<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. 为什么C#动态调用Java的cxf多了bool型参数

    最近的一个项目需要C#调用Java的cxf发布的接口,接口参数文档只给我的是两个long型,但是通过我动态加载发现,参数是四个. 比如接口文档给的接口是 TestFunc(long, long); 而 ...

  2. Product（大数相乘）

    Description The problem is to multiply two integers X, Y. (0<=X,Y<10250) Input The input will ...

  3. 【转】System.Data.OracleClient requires Oracle client software version 8.1.7 or greater

    安装完ASP.NET,Oracle9i客户端后,使用System.Data.OracleClient访问Oracle数据库如果出现这种错误:System.Data.OracleClient requi ...

  4. Android Gradle 配置选项合集

    //让gradle 引入构建安卓app的插件 apply plugin: 'com.android.application' //自定义变量, 使用的时候不需要 ext 前缀 ext { minSdk ...

  5. IOS 学习笔记(3) 视图UITabbarController

    1.UITabbarViewController标签试图控制器.由于标签页本就起着分类的作用,所以往往呈现的视图内容之间,可以是毫不相关的功能. UITabbarViewController仍然继承自 ...

  6. 新唐M0特点分析

    1,价格低,05x系列0.6-1.5美金,1xx系列1.5-3.5美金:2,性能好,最新32位CORTEX-M0的ARM核,唯一可工作到+5.5V的CORTEX-M0:3,速度快,CPU核能跑到50M ...

  7. C#使用WinAPI 修改电源设置，临时禁止笔记本合上盖子时睡眠

    原文 http://www.cnblogs.com/h46incon/archive/2013/09/03/3299138.html 在 阻止系统自动睡眠的小软件,附C#制作过程 ,弄了一个防止系统睡 ...

  8. cython教程

    .写测试代码: zhouhh@zhouhh-home:~$ vi test.pyx [python] view plaincopy def sayhello(char* str): if str == ...

  9. [转载]cin、cin.get()、cin.getline()、getline()、gets()函数的用法

    1.cin>>           用法1:最基本,也是最常用的用法,输入一个数字: #include <iostream>using namespace std;main ( ...

  10. POJ 1236 Network of Schools（强连通 Tarjan+缩点）

    POJ 1236 Network of Schools(强连通 Tarjan+缩点) ACM 题目地址:POJ 1236 题意:  给定一张有向图,问最少选择几个点能遍历全图,以及最少加入�几条边使得 ...