javascript之貪吃蛇
Jul 29, 2016 am 09:02 AM
body
quot
style
this
網頁版「貪吃蛇」遊戲，主要是為了學習JavaScript開發語言！
<!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>登入後複製
以上就介紹了javascript之貪吃蛇，包括了方面的內容，希望對PHP教程有興趣的朋友有幫助。
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱門文章
兩個點博物館：邦格荒地地點指南
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
熱門文章
兩個點博物館：邦格荒地地點指南
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Vue報錯：無法正確使用v-bind綁定class和style，怎麼解決？
Aug 26, 2023 pm 10:58 PM
Vue報錯：無法正確使用v-bind綁定class和style，怎麼解決？
