JS贪吃蛇总结

最新推荐文章于 2022-05-29 10:27:06 发布

周小宇

最新推荐文章于 2022-05-29 10:27:06 发布

阅读量593

点赞数

本文链接：https://blog.csdn.net/u012581732/article/details/49622299

版权

先上代码

<!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创建，在同个函数创建后，再获取创建的对象然后动态赋值。蛇吃食的算法是，从后面开始坐标赋值。

周小宇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS贪吃蛇总结

先上代码 //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.st
复制链接

扫一扫