js 贪吃蛇

来源:互联网 发布:无土栽培 知乎 编辑:程序博客网 时间:2024/03/29 19:30

js贪吃蛇  ,用来试验一下  

以下为代码:

<!doctype html>

<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
<style>
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
ul,li{
list-style:none;
}
#box{
width:100%;
height:100%;
background:#fff;
}
#first{
width:1000px;
height:650px;
margin:0px auto;
background-image:url(./img/logo.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
padding:100px 0 0 0 ;
}
#first .menu{
padding: 190px 0 0 0;
    width: 200px;
    margin: 0px auto;
    box-sizing: border-box;
cursor:pointer;
}
#first .menu li{
height:40px;
border:2px solid #000;
background:orange;
margin:20px 0;
text-align:center;
line-height:40px;
border-radius:15px 0px;
}
#first #start{
width: 200px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 25px;
    background-color: #000;
    color: #fff;
    margin: 0 auto;
    border-radius: 15px 0px;
cursor:pointer;
}
#second{
display:none;
width:1000px;
height:650px;
margin:0px auto;
padding:100px 0 0 0 ;
}
#content{
text-align:center;


}
#fen{
color:#F66;
font-weight:900;
}
</style>
</head>
<script>
var map,food,snake,time;
var sum = 0;
function Map (){
this.width = 1000; //宽度
this.height=400;  //高度
this.color = "#eeeeee";  //颜色
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;
//this._map.setAttribute("id","swarp");
//document.getElementsByTagName("body")[0].appendChild(this._map);
document.getElementById("second").appendChild(this._map);
};
this.hide = function(){
document.getElementById("second").removeChild(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
map._map.appendChild(this._food);
//map.appendChild(div)   map为js对象 不是DOM对象
//document.getElementById("swarp").appendChild(div);
}
//产生随机数 横向0~49 纵向0~19
this.x = Math.floor(Math.random()*50);
this.y = Math.floor(Math.random()*20);
//设置位置
this._food.style.left = (this.x*20)+'px';
this._food.style.top = (this.y*20)+'px';

},
this.hide = function(){
this._food = null;
}

}


function Snack (){
this.width = 20;
this.height = 20;
this.direct = "right";
this.position = "absolute";
//蛇节信息  每一个数组元素表示一个蛇节 每一个数组元素的前两个表示位置
//最后一个null 来保存每一个DOM元素
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++){
//如果是第一次执行,就要创建DOM,还让他移动;
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]);
}
//如果不是第一次执行(第一次执行,就要创建DOM),那么只让他移动;
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(){
//让最后一个  一个一个向前移动
for(var i = this.body.length-1;i>0;i--){
//var tmp = this.body[i];
this.body[i][0] = this.body[i-1][0];
this.body[i][1] = this.body[i-1][1]
}
//运行上面for循环之后,除了蛇头,所有蛇身的坐标都向前移动一次
//蛇头向右+1;
//判断方向,便于设置蛇头的新方向
switch(this.direct){
case "left":
this.body[0][0]-=1;
break;
case "up":
this.body[0][1]-=1;
break;
case "right":
this.body[0][0]+=1; 
break;
case "down":
this.body[0][1]+=1;
break;
}
//this.body[0][0]+=1;


//判断吃到食物
if(this.body[0][0] == food.x && this.body[0][1] == food.y){
//吃到食物  增加蛇节
var length = this.body.length-1;
var x = this.body[length][0];
var y = this.body[length][1];
this.body.push([x,y,'blue',null]);
sum++;
document.getElementById("fen").innerHTML=sum;
food.show();
}


//判断撞墙死


if(this.body[0][0] == 50 || this.body[0][0] == -1 || this.body[0][1] == -1 || this.body[0][1] ==20){
//snake.hide();
alert("撞墙死");
clearTimeout(time);
return false;
}


//判断吃到自己
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("吃到自己了,死");
clearTimeout(time);
return false;
}
}
this.show();
};
/*this.hide = function(){
var len = this.body.length;
for(var i = 0;i<len;i++){
this.body[i][3] = null;
map._map.removeChild(this.body[i][3]);
}

};*/

}
function start(){
first.style.display = 'none';
second.style.display = 'block';
//将地图对象添加到body中
map.show();
//将食物放在地图中
food.show();
//将蛇放到地图中
snake.show();
}

window.onload = function(){
//实例化地图对象

map = new Map();
//map.show();


//实例化食物对象
//将食物放在地图中
food = new Food();
//food.show();


//实例化蛇对象

snake= new Snack();
//snake.show();


//snake 全局 才会找到  不然会被回收 就找不到move方法
/*time = setInterval('snake.move()',500);*/


document.onkeyup = function(event){
var evt = window.event ||event;
var code = evt.keyCode;
console.log(code);
snake.setDirect(code);
}

var first = document.getElementById("first");
var second  = document.getElementById("second");
var menu = document.getElementById("menu");
var menuList = document.getElementsByTagName("li");
var startBtn = document.getElementById("start");
startBtn.addEventListener("click",function(event){
event.stopPropagation();
console.log(first.getAttribute("data-start"));
if(first.getAttribute("data-start") == ""){
alert("请选择难度哦!")
}else{
var leave = first.getAttribute("data-start");
console.log(typeof leave);
switch(leave){
case '0':
start();
time =setInterval('snake.move()',1500);
break;
case '1':
start();
time =setInterval('snake.move()',1000);
break;
case '2':
start();
time =setInterval('snake.move()',500);
break;
case '3':
start();
time = setInterval('snake.move()',100);
break;
}
}

});


menu.addEventListener("click",function(event){
event.stopPropagation();
var data = event.target.getAttribute("data");
first.setAttribute("data-start",data);
});



}
</script>
<body>
<div id="box">
<div id="first" data-start="">
<ul id="menu" class="menu" >
<li data="3">超级困难</li>
<li data="2">非常困难</li>
<li data="1">一般困难</li>
<li data="0">就选我吧</li>
</ul>
<div id="start">开始吧</div>
</div>
<div id="second">
<div id="content">
共计<span id="fen">0</span>分
</div>
</div>



</div>


</body>
</html>
0 0