做一个简单的贪吃蛇游戏

Posted 2020-09-04 梁小清

这是一个贪吃蛇游戏，你可以忽略他的外表，好了，先上html代码

<style type="text/css">
	* {margin: 0;padding: 0;}
	#container {width: 1000px;height: 550px;border: 1px solid #000;margin: 0 auto;}	
	#container #ground {width: 1000px;height: 500px;background-color:#eeeeee;position: relative;}	
	button {width: 80px;height: 30px;}
			
	.block {width: 20px;height: 20px;background-color: paleturquoise;float: left;}
	.snakeBody {
               width: 20px;height: 20px;box-sizing: border-box;padding: 1px;
               background-color: yellow;position: absolute;top: 60px;
	       -webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
	}		
	.snake-block {
		background: yellow;position: absolute;
		-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
	}		
	.food-block {
		background: red;position: absolute;
		-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;
	}
</style>

<div id="container">
	<div id="ground"></div>
	<div id="gameControl">
		<span>获得分数：<span id="nums">0</span></span>
		<button id="start">开始</button>
		<button id="pause">暂停</button>
	</div>
</div>         

 接下来是js代码

//草坪盒子
var oGround = getId("ground"); 
//创建蛇---
var snakeBody = new Array();
//创建食物并放置在草坪区
var food = createFood();
//蛇移动direction方向   默认情况下向右移动
var direction = "right"; 
//游戏开始按钮
var oBtnStart = getId("start");
//定时器
var timer = null;
//暂停键
var oPause =getId("pause");
var num = getId("nums");
			
function getId(n){
	return document.getElementById(n)
}			
			
//创建草坪由50*25个小格组成
for(var i = 0; i < 50; i++) {
	for(var j = 0; j < 25; j++) {
		var oDiv = document.createElement("div");
		oDiv.className = "block";
		oGround.appendChild(oDiv);
	}
}
			 
//初始状态为3节  蛇身数组   确保snakeBody[0]为蛇头
for(var i = 3; i > 0; i--) { 
	var oDiv = document.createElement("div");
	oDiv.className = "block snakeBody";
	oDiv.style.left = i * 20 + "px";
	//蛇头
	if(i == 3) { 
		oDiv.style.backgroundColor = "blueviolet";
	}
	oGround.appendChild(oDiv);
	//向蛇身数组添加蛇身
	snakeBody.push(oDiv); 
}
						
oBtnStart.onclick = function() {
	clearInterval(timer);
	//每隔300毫秒就移动一个格子    1000毫秒=1秒
	timer = setInterval(function() { 
		move(direction);			
		num.innerHTML = snakeBody.length -3;
	}, 300);
}
oPause.onclick = function() {
	clearInterval(timer);
}

//控制蛇转向
document.onkeydown = function(e) {
	e = e || window.event;
	var keyCode = e.which || e.keyCode;
	//键码
	switch(keyCode) {
		//左
		case 37: 
		        if(direction != ‘right‘) {
			        direction = ‘left‘;
				move(direction);
			}
		break;
		//上
		case 38: 
			if(direction != ‘down‘) {
				direction = ‘up‘;
				move(direction);
			}
		break;
		//右
		case 39: 
			if(direction != ‘left‘) {
				direction = ‘right‘;
				move(direction);
		       }
		break;
		//下
		case 40: 
			if(direction != ‘up‘) {
				direction = ‘down‘;
				move(direction);
		        }
	        break;
	}

};		
			
//蛇移动的方法
function move(dir) {
	//取出蛇头
	var snakeHead = snakeBody[0]; 
	//snakeBody.length 3   个数从右向左数
	for(var i = snakeBody.length - 1; i > 0; i--) {
		snakeBody[i].style.left = snakeBody[i - 1].offsetLeft + "px";
		snakeBody[i].style.top = snakeBody[i - 1].offsetTop + "px";
	}
	switch(dir) {
		case "left":
			snakeHead.style.left = snakeHead.offsetLeft - 20 + "px";
			break;
		case "up":
			snakeHead.style.top = snakeHead.offsetTop - 20 + "px";
			break;
		case "right":
			snakeHead.style.left = snakeHead.offsetLeft + 20 + "px";
			break;
		case "down":
			snakeHead.style.top = snakeHead.offsetTop + 20 + "px";
			break;
	}
	//判断蛇是否吃到墙
	if(snakeHead.offsetLeft == -20 || snakeHead.offsetTop == -20 || snakeHead.offsetLeft == 1000 || snakeHead.offsetTop == 500) {
		alert("撞墙了吧~");
		clearInterval(timer);
		//页面保持刷新
		location.reload(); 
	}
	//如果蛇吃身体
	for(var i = 1; i < snakeBody.length; i++) {
		if(snakeHead.offsetLeft == snakeBody[i].offsetLeft && snakeHead.offsetTop == snakeBody[i].offsetTop) {
		alert("连自己都吃，还能不能好好做条蛇");
		clearInterval(timer);
		}
	}

	//如果蛇吃食物
	if(snakeHead.offsetLeft == food.offsetLeft && snakeHead.offsetTop == food.offsetTop) {
		food.className = "block snake-block";
		switch("direction") {
			case "right":
				food.style.left = snakeBody[snakeBody.length - 1].offsetLeft - 20 + "px";
			break;
			case "down":
				food.style.top = snakeBody[snakeBody.length - 1].offsetTop - 20 + "px";
			break;
			case "left":
				food.style.left = snakeBody[snakeBody.length - 1].offsetLeft + 20 + "px";
			break;
			case "up":
				food.style.top = snakeBody[snakeBody.length - 1].offsetTop + 20 + "px";
			break;
					
		}
		//蛇吃到食物
		snakeBody.push(food); 					
		//重新生成食物
		food = createFood(); 

	}
}			
			
//生成食物
function createFood() {
	var oFood = document.createElement("div");
	oFood.className = "block food-block";
	var iLeft = 0;
	var  iTop = 0;
	do {
		//一个标识，表示是否找到食物合适的位置
		var bFound = true; 
		//在0~1000中取一个随机的整数
		iLeft = Math.floor(Math.random() * 1000); 
		//随机产生食物的位置      让食物的x坐标为20的倍数，因为草坪是20像素为一格
		iLeft = iLeft - iLeft % 20; 
		iTop = Math.floor(Math.random() * 500);
		iTop = iTop - iTop % 20;
		for(var i = 0; i < snakeBody.length; i++) {
                        //判断食物的那个格子是否与蛇身占有的格子重合
			if(snakeBody[i].offsetLeft == iLeft && snakeBody[i].offsetTop == iTop) {
　　　　　　　　　　　　　　　　　　　//表示食物与蛇身重合 					
				bFound = false;
				break;
			}
		}
		oFood.style.left = iLeft + "px";
		oFood.style.top = iTop + "px";
		oGround.appendChild(oFood);
	} while (!bFound);
	return oFood;
}    

 大致是这样吧，后续还待改善，要直接看到实例的效果，你可以狠狠的点击这里