javascript实现简单的贪吃蛇游戏
javascript实现简单的贪吃蛇游戏，功能很简单，代码也很实用，就不多废话了，小伙伴们参考注释吧。
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>贪吃蛇</title>
<script type="text/javascript">
var map; //地图
var snake; //蛇
var food; //食物
var timer; //定时器
var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度
var nowSpeed=initSpeed; //游戏进行时蛇移动速度
var grade=0; //积分
var flag=1; //（可间接看做）关卡
//地图类
function Map(){
this.width=800;
this.height=400;
this.position='absolute';
this.color='#EEEEEE';
this._map=null;
//生成地图
this.show=function(){
this._map=document.createElement('div');
this._map.style.width=this.width+'px';
this._map.style.height=this.height+'px';
this._map.style.position=this.position;
this._map.style.backgroundColor=this.color;
document.getElementsByTagName('body')[0].appendChild(this._map);
}
}
//食物类
function Food(){
this.width=20;
this.height=20;
this.position='absolute';
this.color='#00FF00';
this.x=0;
this.y=0;
this._food;
//生成食物
this.show=function(){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.position=this.position;
this._food.style.backgroundColor=this.color;
this.x=Math.floor(Math.random()*map.width/this.width);
this.y=Math.floor(Math.random()*map.height/this.width);
this._food.style.left=this.x*this.width;
this._food.style.top=this.y*this.height;
map._map.appendChild(this._food);
}
}
//蛇类
function Snake(){
this.width=20;
this.height=20;
this.position='absolute';
this.direct=null;//移动方向
//初始蛇身
this.body=new Array(
[3,2,'red',null],//蛇头
[2,2,'blue',null],
[1,2,'blue',null]
);
//生成蛇身
this.show=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i][3]==null){
this.body[i][3]=document.createElement('div');
this.body[i][3].style.width=this.width;
this.body[i][3].style.height=this.height;
this.body[i][3].style.position=this.position;
this.body[i][3].style.backgroundColor=this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
this.body[i][3].style.left=this.body[i][0]*this.width+'px';
this.body[i][3].style.top=this.body[i][1]*this.height+'px';
}
}
//控制蛇移动
this.move=function(){
var length=this.body.length-1;
for(var i=length;i>0;i--){
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
switch(this.direct){
case 'right':
this.body[0][0]=this.body[0][0]+1;
break;
case 'left':
this.body[0][0]=this.body[0][0]-1;
break;
case 'up':
this.body[0][1]=this.body[0][1]-1;
break;
case 'down':
this.body[0][1]=this.body[0][1]+1;
break;
}
this.condition();
this.show();
}
//定时器，开始游戏时，调用
this.speed=function(){
timer=setInterval('snake.move()',initSpeed);
}
//条件处理
this.condition=function(){
//吃食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
grade++;
this.body[[this.body.length]]=[0,0,'blue',null];
map._map.removeChild(food._food)
food.show();
}
//判断是否撞墙
if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){
alert('game over');
clearInterval(timer);
return ;
}
//判断是否撞到自身
for(var i=1;i<this.body.length;i++){
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
alert('game over');
clearInterval(timer);
return ;
}
}
//速度提升处理，积分每曾2分，速度提升一倍
if(grade/2==flag){
clearInterval(timer);
flag++;
nowSpeed=initSpeed/flag;
timer=setInterval('snake.move()',nowSpeed);
}
document.title='贪吃蛇 积分'+grade+' 速度等级'+initSpeed/nowSpeed;
}
}
document.onkeydown=function(event){
//按下任意键，开始游戏
if(snake.direct===null){
snake.direct='right';
snake.speed();
}
//控制方向，W S D A分别代表 上下右左
switch(window.event?window.event.keyCode:event.keyCode){//浏览器兼容处理
case 87 :
snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移动，触发死亡bug
break;
case 83 :
snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down';
break;
case 68 :
snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right';
break;
case 65 :
snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left';
break;
}
}
//自动加载游戏
window.onload=function(){
map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();
}
</script>
</head>
<body>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
javascript 实现的多浏览器支持的贪吃蛇webgame
写的太累了 ,写了3个小时!大家可以玩玩看 界面不美,尽管批 www.jb51.net 我们 贪吃蛇 //获取新生元素位置 var bucunzai=true;//记录新元素是不是移动 var xinkx; var xinky; //页面载入后k元素定位 function lo(){ var objectp=document.getElementById("k") objectp.style.left="250px" objectp.style.top="
-
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
-
javascript编写贪吃蛇游戏
代码很简单,这里就不多BB了,小伙伴们直接看示例吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
-
原生js实现的贪吃蛇网页版游戏完整实例
本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc
-
javascript 贪吃蛇(详细注释版)
贪吃蛇 Snake v1.0 body{ } table{ border-collapse: collapse; border:solid #333 1px; } td{ height: 10px; width: 10px; font-size: 0px; } .filled{ background-color:blue; } function $(id){return document.getElementById(id);} /** * javascript贪吃蛇 v1.0 * author
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
javascript贪吃蛇完整版(源码)
javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
-
js编写“贪吃蛇”的小游戏
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1.JS函数的熟练掌握, 2.JS数组的应用, 3.JS小部分AJAX的学习 4.JS中的splice.shift等一些函数的应用, 基本上就这些吧,下面提重点部分: 前端的页面,这里可自行布局,我这边提供一个我自己的布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
javascript 贪吃蛇实现代码
在习作的过程中尝试着贪吃蛇游戏用JS实现了.竟然成功了. 思路:使用10px*10px的div层担当"像素",然后使用40*40矩阵160个"像素"构成了游戏的界面. 下面是代码: 复制代码 代码如下: // JavaScript Document alert("键盘的方向键控制方向,空格键暂停.\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵