js-->貪吃蛇小遊戲,能成功玩
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇小遊戲</title>
<script type="text/javascript">
//將地圖聲明為全局
var plat=null;
//請食物聲明為全局
var food=null;
//請蛇聲明為全局
var snake =null;
//定時器
var setTime=null;
//地圖類
function Plat(){
//寬度
this.width=1000;
//高度
this.height=600;
//背景
//this.color = ‘url(images/sfq_3.jpg)‘;
this.color="#eeeeee";
//定位方式
this.position=‘absolute‘;
this.margin = "200";
//保存地圖對象
this._plat=null;
//創建地圖的方法
this.show = function(){
//在內存中創建一個div對象
this._plat = document.createElement("div");
//添加樣式
this._plat.style.width=this.width+"px";
this._plat.style.height=this.height+"px";
//this._plat.style.backgroundImage=this.color;
this._plat.style.backgroundColor=this.color;
this._plat.style.position = this.position;
this._plat.style.marginTop= this.margin+"px";
this._plat.style.marginLeft= 400+"px";
//將內存中的div放入到body對象中
};
//將食物添加到地圖中
this.AppendChild = function(obj){
this._plat.appendChild(obj);
}
}
//食物類
function Food(){
this.width = 20;
this.height = 20;
this.color="red";
//this.color = ‘url(images/furit_‘+1+‘.png)‘;
this.position=‘absolute‘;
this.radius="50%";
//食物在地圖中的橫縱坐標值
this.x=0;
this.y=0;
this._food=null;
this.show = function(){
if(this._food==null){
this._food = document.createElement("div");
this._food.style.width=20+‘px‘;
this._food.style.height=20+‘px‘;
this._food.style.borderRadius =this.radius;
this._food.style.position = this.position;
//document.getElementsByTagName(‘div‘)[0].appendChild(div);
//通過地圖對象中的方法把食物追加到地圖中。
plat.AppendChild(this._food);
}
//var i = Math.round(Math.random()*5+1);
//this.color = ‘url(images/furit_‘+i+‘.png)‘;
//隨機出x,y的坐標
//this._food.style.backgroundImage=this.color;
this._food.style.backgroundColor=this.color;
this.x =Math.floor(Math.random()*50); //0-49
this.y =Math.floor(Math.random()*30); //0-30
this._food.style.left=(this.x*20)+"px";
this._food.style.top =(this.y*20)+"px";
};
}
//蛇類
function Snake(){
this.radius="50%";
this.width=20;
this.height=20;
//記錄蛇節的數目
this.festival=[[3,3,‘pink‘,null],[2,3,‘blue‘,null],[1,3,‘blue‘,null]];
this.position=‘absolute‘;
//移動方式
this.direction=‘right‘;
//設置蛇的方向
this.setDirection = function(code){
console.log(code);
/*
if(this.direction==‘right‘&&code==37){
alert("你死了");
}
*/
switch(code){
case 37:
if(this.direction==‘right‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘left‘;
break;
case 38:
if(this.direction==‘down‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘top‘;
break;
case 39:
if(this.direction==‘left‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘right‘;
break;
case 40:
if(this.direction==‘top‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘down‘;
break;
}
}
this.show = function(){
for(var i=0;i<this.festival.length;i++){
//判斷蛇節是否存在，存在就不在創建了。
if(this.festival[i][3]==null){
this.festival[i][3]= document.createElement("div");
this.festival[i][3].style.width=20+"px";
this.festival[i][3].style.height=20+"px";
this.festival[i][3].style.position = this.position;
this.festival[i][3].style.backgroundColor=this.festival[i][2];
plat.AppendChild(this.festival[i][3]);
this.festival[i][3].style.borderRadius =this.radius;
}
this.festival[i][3].style.left = this.festival[i][0]*this.width+"px";
this.festival[i][3].style.top = this.festival[i][1]*this.height+"px";
}
};
//讓蛇動起來.
this.move = function(){
//蛇節的長度
var length = this.festival.length-1;
for(var i=length;i>0;i--){
//讓所有蛇節移動
this.festival[i][0] = this.festival[i-1][0];
this.festival[i][1] = this.festival[i-1][1];
}
//蛇頭移動
if(this.direction==‘right‘){
this.festival[0][0]+=1;
}else if(this.direction==‘top‘){
this.festival[0][1]-=1;
}else if(this.direction==‘down‘){
this.festival[0][1]+=1;
}else if(this.direction==‘left‘){
this.festival[0][0]-=1;
}
//判斷吃到食物
if(this.festival[0][0]==food.x&&this.festival[0][1]==food.y){
var x = this.festival[length][0];
var y = this.festival[length][1];
this.festival.push([x,y,‘blue‘,null]);
food.show();
}
//判斷是否超出區域！
if(this.festival[0][0]==50&&this.direction==‘right‘){
alert("怎麽不小心啊!,撞墻了");
clearInterval(setTime);
return;
}else if(this.festival[0][0]==-1&&this.direction==‘left‘){
alert("怎麽不小心啊!,撞墻了");
clearInterval(setTime);
return;
}else if(this.festival[0][1]==-1&&this.direction==‘top‘){
alert("怎麽不小心啊!,撞墻了");
clearInterval(setTime);
return;
}else if(this.festival[0][1]==30&&this.direction==‘down‘){
alert("怎麽不小心啊!,撞墻了");
clearInterval(setTime);
return;
}
for(var i=length;i>0;i--){
if(this.festival[0][0]==this.festival[i][0]&&this.festival[0][1]==this.festival[i][1]){
alert("你死了！");
clearInterval(setTime);
return;
}
}
this.show();
}
}
window.onload=function(){
//實例化地圖對象
plat = new Plat();
//將地圖對象添加到body元素中裏
plat.show();
//實例化食物對象
food = new Food();
//將食物對象放到地圖中
food.show();
//實例化蛇對象
snake = new Snake();
//將蛇對象放到地圖中
snake.show();
setTime=setInterval(‘snake.move()‘,100);
//監聽鍵盤事件
document.onkeyup =function(event){
var code;
if(window.event){
code = window.event.keyCode;
}else{
code = event.keyCode;
}
snake.setDirection(code);
}
};
</script>
</head>
<body>
</body>
</html>
本文出自 “12897581” 博客，請務必保留此出處http://12907581.blog.51cto.com/12897581/1927492
js-->貪吃蛇小遊戲,能成功玩