javascript实现贪吃蛇
<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实现贪吃蛇的更多相关文章
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
- JavaScript—面向对象贪吃蛇_1
前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...
- 使用javascript实现贪吃蛇游戏
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JavaScript—面向对象 贪吃蛇最终
效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgrou ...
- JavaScript—面向对象 贪吃蛇_3 蛇对象
蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, ...
- javascript写贪吃蛇游戏（20行代码！）
<!doctype html> <html> <body> <canvas id="can" width="400" ...
- Javascript仿贪吃蛇出现Bug的反思
bug现象: 图一
- JavaScript—面向对象 贪吃蛇_2 游戏对象
游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...
- JavaScript—面向对象 贪吃蛇_2 食物对象
食物对象 //自调用 (function (){ function Food(element) { this.width = 20 this.height = 20 this.backgroundCo ...
随机推荐
- iOS实践03
主要目标:版本新特性界面,新浪授权界面(登录界面)的处理 任务基本完成了,基本的框架也就到这了,接下来的应该是首页获取微博了. 1.版本新特性,可以单独作为一个model,写完之加入到项目中.我们新建 ...
- union 和 union all 有什么不同?
假设我们有一个表 Student, 包括以下字段与数据:drop table student;create table student( idint primary key,name nvarchar ...
- Problem F: Exponentiation
Problem F: ExponentiationTime Limit: 1 Sec Memory Limit: 128 MBSubmit: 4 Solved: 2[Submit][Status][W ...
- BZOJ 1051: [HAOI2006]受欢迎的牛( tarjan )
tarjan缩点后, 有且仅有一个出度为0的强连通分量即answer, 否则无解 ----------------------------------------------------------- ...
- 在数组中找几个数的和等于某个数[LeetCode]
首先明确一点,这个方面的问题设计到的知识点是数组的查找的问题.对于类似的这样的查找操作的具体办法就是三种解决方法: 1.暴力算法,多个for循环,很高的时间复杂度 2.先排序,然后左右夹逼,但是这样会 ...
- 5．PHP 教程_PHP echo/print
PHP echo 和 print 语句 echo和print区别: echo-可以输出一个或多个字符串 print-只允许输出一个字符串,返回值总为1 提示:echo输出的速度比print快,echo ...
- 利用python进行数据分析之pandas库的应用（一）
一.pandas的数据结构介绍 Series Series是由一种类似于一维数组的对象,它由一组数据以及一组与之相关的数据索引构成.仅由一组数据可产生最简单的Series. obj=Series([4 ...
- jqmobile
标准页面结构 <!DOCTYPE html> <html> <head> <title>Page Title</title> <lin ...
- shell脚本内与mysql交互
一: mysqlCMD="mysql -h${MYSQL_HOST} -P${MYSQL_PORT} -u${MYSQL_USER} -p${MYSQL_PASS}" crea ...
- C++类成员常量
由于#define 定义的宏常量是全局的,不能达到目的,于是想当然地觉得应该用const 修饰数据成员来实现.const 数据成员的确是存在的,但其含义却不是我们所期望的.const 数据成员只在某个 ...