您的位置：首页 > Web前端 > JavaScript

JS贪吃蛇总结

2015-11-03 21:20 651 查看
先上代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.绘制地图
function Map(){
var len = 20;
var w = 800;
var h = 500;

this.showmap = function(){
var div = document.createElement('div');
div.style.width=w+"px";
div.style.height=h+"px";
div.style.float="left";
div.style.backgroundImage="url(12.jpg)";
document.body.appendChild(div);
}

}
//1.绘制食物
function Food(){
var len = 20;
this.xFood=0;
this.yFood=0;
this.pian = null;
this.showfood = function(){
if (this.pian===null) {
this.pian = document.createElement('div');
this.pian.style.width=len+"px";
this.pian.style.height=len+"px";
this.pian.style.backgroundColor="green";
this.pian.style.position = "absolute";
document.body.appendChild(this.pian);
}
this.xFood = len*Math.floor(Math.random()*40);
this.yFood = len*Math.floor(Math.random()*25);
this.pian.style.left = this.xFood+"px";
this.pian.style.top = this.yFood+"px";

}
}

//绘制小蛇
function Snake(){
var len =20;
this.defenobj=0;
this.redirect = "right";
this.foodnum = 0;
this.snakebody = [[0,1,'green','null'],[1,1,'green','null'],[2,1,'green','null'],[3,1,'red','null']];
this.showsnake = function(){
for (var i = 0; i < this.snakebody.length; i++) {
if (this.snakebody[i][3] === 'null') {
this.snakebody[i][3] = document.createElement('div');
this.snakebody[i][3].style.position = "absolute";
this.snakebody[i][3].style.width=len+"px";
this.snakebody[i][3].style.height=len+"px";
this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];
document.body.appendChild(this.snakebody[i][3]);
}
this.snakebody[i][3].style.left = this.snakebody[i][0]*len+"px";
this.snakebody[i][3].style.top = this.snakebody[i][1]*len+"px";
}

this.shudu();
}
this.movesnake = function(){

for (var i = 0; i < this.snakebody.length-1; i++) {
this.snakebody[i][0] = this.snakebody[i+1][0];
this.snakebody[i][1] = this.snakebody[i+1][1];
}
if (this.redirect=='right') {
this.snakebody[this.snakebody.length-1][0]++;
}else if(this.redirect=='left') {
this.snakebody[this.snakebody.length-1][0]--;
}else if(this.redirect=='top') {
this.snakebody[this.snakebody.length-1][1]--;
}else if(this.redirect=='down') {
this.snakebody[this.snakebody.length-1][1]++;
}
//获得蛇头坐标
var xtousnake = this.snakebody[this.snakebody.length-1][0]*len;
var ytousnake = this.snakebody[this.snakebody.length-1][1]*len;
if (xtousnake == food.xFood && ytousnake == food.yFood) {
var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green','null'];
this.foodnum++;
this.defen();
console.log(this.foodnum);
this.snakebody.unshift(newjie);
food.showfood();
}

if (xtousnake>39*len || xtousnake*len<0 || ytousnake>24*len || ytousnake*len<0) {
alert("游戏结束！！");
clearInterval(this.mytime);
return false;
}
for (var k = 0; k < this.snakebody.length-1; k++) {
if (xtousnake == this.snakebody[k][0]*len && ytousnake===this.snakebody[k][1]*len) {
alert('自残啦，，游戏结束！！');
clearInterval(this.mytime);
return false;
}
this.snakebody[k]
}
this.showsnake();
}
//控制蛇的速度
this.shudu = function(){
clearInterval(this.mytime);
this.mytime = setInterval("snake.movesnake()",1000-this.foodnum*200);
}
this.defen = function(){
if (this.defenobj ==0) {
var defendiv = document.createElement('div');
var h = document.createElement('h2');
var htext = document.createTextNode('你的得分：');
var font = document.createElement('font');
font.id = "sss";
var ftext = document.createTextNode('0');
defendiv.style.width="400px";
defendiv.style.height="500px";
defendiv.style.float = "left";
defendiv.style.backgroundColor="#90EE90";
h.appendChild(htext);
defendiv.appendChild(h);
font.appendChild(ftext);
defendiv.appendChild(font);
document.body.appendChild(defendiv);
this.defenobj=1;
return;
}
var abc = document.getElementById('sss');
abc.innerHTML=this.foodnum*10;
}
}
window.onload = function(){
var map = new Map();
map.showmap();
food = new Food();
food.showfood();
snake = new Snake();
snake.showsnake();
snake.defen();
document.onkeyup = function(evt){
var num  = evt.keyCode;
switch(num){
case 38:
snake.redirect='top';
break;
case 40:
snake.redirect='down';
break;
case 37:
snake.redirect='left';
break;
case 39:
snake.redirect='right';
break;
}
}

}

</script>
计算得分，用dom2创建，在同个函数创建后，再获取创建的对象然后动态赋值。蛇吃食的算法是，从后面开始坐标赋值。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航