Home >Backend Development >PHP Tutorial >JavaScript's greedy snake
JavaScript's greedy snake
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-07-29 09:02:18896browse
The web version of "Snake" game is mainly for learning JavaScript development language!
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" c/html;charset=UTF-8">
<title>贪吃蛇</title>
<script type="text/javascript">
var map;
var snake;
var food;
var timer;
var timer_count;
function Map(){
this.width=800; //宽度
this.height=400; //高度
this.color='#cccccc'; //背景颜色
this.position='absolute'; //定位方式
this._map=null; //用于保存地图dom元素
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.backgroundColor=this.color;
this._map.style.position=this.position;
document.getElementsByTagName('body')[0].appendChild(this._map);
};
}
function Food(){
this.width=20; //宽度
this.height=20; //高度
this.color='green'; //颜色
this.position='absolute'; //定位
this.x=0; //横向第几个格
this.y=0; //纵向第几个格
this._food=null; //保存之前创建的食物的div
this.show=function(){
if(this._food==null){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.backgroundColor=this.color;
this._food.style.position=this.position;
//将食物div追加地图div中
map._map.appendChild(this._food);
}
//产生随机数 横向：0——39 纵向0——19
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*20);
//设置食物位置
this._food.style.left=(this.x*20)+'px';
this._food.style.top=(this.y*20)+'px';
};
}
function Snake(){
this.width=20; //蛇节宽度
this.height=20; //蛇节高度
this.position='absolute'; //定位方式
this.direct='right'; //移动方向
//所有蛇节信息
this.body=[
[3,3,'red',null],
[2,3,'blue',null],
[1,3,'blue',null],
];
this.setDirect=function(code){
switch(code){
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
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+'px';
this.body[i][3].style.height=this.height+'px';
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]*20)+'px';
this.body[i][3].style.top=(this.body[i][1]*20)+'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];
}
//运行上面for之后，除了蛇头所有蛇身的坐标都向前移动一次,蛇头向右一步
//判断方向，便于设置蛇头的新坐标
switch(this.direct){
case 'left':
this.body[0][0]-=1;
break;
case 'right':
this.body[0][0]+=1;
break;
case 'up':
this.body[0][1]-=1;
break;
case 'down':
this.body[0][1]+=1;
break;
}
//判断迟到食物
if(this.body[0][0]==food.x && this.body[0][1]==food.y){
length=this.body.length-1;
var x=this.body[length][0];
var y=this.body[length][1];
this.body.push([x,y,'blue',null]);
food.show();
document.getElementById('length').innerHTML=this.body.length-3;
document.getElementById('score').innerHTML=(this.body.length-3)*100;
}
//判断撞墙死
if(this.body[0][0]==40 || this.body[0][0]==-1 || this.body[0][1]==-1 || this.body[0][1]==20){
clearTimeout(timer);
clearTimeout(timer_count);
alert("游戏结束!");
return ;
}
//判断迟到自己死
for(var i=length;i>0;i--){
if(this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]){
clearTimeout(timer);
clearTimeout(timer_count);
alert("游戏结束!");
return ;
}
}
this.show();
};
}
var timercount=0;
function time_count(){
timercount++;
document.getElementById('time').innerHTML=timercount;
}
window.
//实例化地图对象，将地图对象添加到body元素
map=new Map();
map.show();
//实例化食物对象，将食物对象放到地图中
food=new Food();
food.show();
//实例化蛇对象，将蛇对象放到地图中
snake=new Snake();
snake.show();
timer=setInterval('snake.move()',200);
timer_count=setInterval('time_count()',1000);
document.
var code;
if(window.event){
code=window.event.keyCode;
}else{
code=event.keyCode;
}
snake.setDirect(code);
}
}
</script>
</head>
<body>
<div style="color:#ff0000;">
长度：<span id="length">0</span>个
分数：<span id="score">0</span>分
计时：<span id="time">0</span> s
</div>
</body>
</html>
The above is an introduction to JavaScript's Snake, including aspects of it. I hope it will be helpful to friends who are interested in PHP tutorials.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A fatal error and warning was reported when installing dede UTF_8, and finally the website backend and homepage could no longer be displayed.Next article：A fatal error and warning was reported when installing dede UTF_8, and finally the website backend and homepage could no longer be displayed.