<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. LeetCode Backpack

    Given n items with size Ai, an integer m denotes the size of a backpack. How full you can fill this ...

  2. eclipse SVN 安装

    1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Developers)版    如果没有安装的请到这里下载安装:http://ecli ...

  3. 手机测试Android程序

    手机测试Android程序   上传者:sanpi329     我也要“分享赚钱” 2014/7/9 关注(23) 评论(0)   声明:此内容仅代表网友个人经验或观点,不代表本网站立场和观点.   ...

  4. [LeetCode]题解（python）：073-Set Matrix Zeroes

    题目来源: https://leetcode.com/problems/set-matrix-zeroes/ 题意分析: 输入一个m×n矩阵,如果出现有0,那么将对应的行和列都变成0. 题目思路: 简 ...

  5. Spring Boot使用自定义的properties

    spring boot使用application.properties默认了很多配置.但需要自己添加一些配置的时候,我们应该怎么做呢. 若继续在application.properties中添加 如: ...

  6. php 前台数据显示

    <pre name="code" class="html"> public function show(){ echo "访问了index ...

  7. JavaEE Tutorials (11) - 使用Criteria API创建查询

    11.1Criteria和Metamodel API概述16811.2使用Metamodel API为实体类建模170 11.2.1使用元模型类17011.3使用Criteria API和Metamo ...

  8. libcurl的使用问题“Expect100-continue”

    最近在做团购酒店APP分享到qzone功能,使用libcurl访问qzone的分享cgi接口,酒店分享信息以POST方式传输,在测试的时候发现分享接口平均有2s的延迟,这延迟也太大了吧,于是乎问了空间 ...

  9. HDU 2501 Tiling_easy version

    递推式:f[n]=2*f[n-2]+f[n-1] #include <cstdio> #include <iostream> using namespace std; ]; i ...

  10. AndroidStudio项目移植到Eclipse

    原文件结构: 在AndroidStudio中 main目录对应eclipse中的src目录 可以看看每个文件夹下的目录 没有src或者main这些文件夹的都可以删掉 我这里只有app下的东西是需要留着 ...