学JS写小游戏——贪吃蛇

最新推荐文章于 2020-03-15 13:37:09 发布

liujizhong

最新推荐文章于 2020-03-15 13:37:09 发布

阅读量644

点赞数

分类专栏： JavaScript 文章标签：游戏 table function border javascript html

本文链接：https://blog.csdn.net/liujizhong/article/details/8067345

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

贪吃蛇是一款非常经典的小游戏，最近在学javascript，突然想学到东西是不是应该实践下呢，闲来无聊就写了这个游戏，相当只是实现主要的功能，简单说就是能玩，当然由于技术有限，其中还有不少的BUG，这个后期如有时间再去完善或添加点新功能吧。

虽然没得什么技术含量，但还是拿出来和大家尤其是新手们分享，愿和程序猿们一起进步！也给自己点信心，加油！

附源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>snake.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    TABLE {
		border: 1px solid;
		border-collapse:collapse;
		width: 95%;
		height: 95%;
		margin: 10px;
		border: 1px;
	}
	
	TABLE TD{
		border: 1px solid;
		border-bottom-style: solid;
		background-color: #E0E0FF;
	}
	
	.mainDiv{
		width: 600px; height: 500px;
		background-color: gray;
		text-align: center;
		vertical-align: middle;
		margin: 0px;
		padding: 0px;
	}
    </style>
  </head>
  
<body οnlοad="initMap()">
<center>
  	<table style="height: 50px; width: 600px;">
  		<tr>
  			<td width="150px"><input id="isGo" type="button" value="Begin..." οnclick="letGo()" style="width: 100%; height: 100%"></td>
  			<td><label>Score:</label><label id="score" style="color: red;font: 22px">0</label></td>
  			<td align="right"><label>Select Speed:</label></td>
  			<td>
  				<select id="speed">
			  		<option value="1000">1000</option>
			  		<option value="800">800</option>
			  		<option value="600">600</option>
			  		<option value="400">400</option>
			  		<option value="200">200</option>
			  		<option value="100">100</option>
			  	</select>
  			</td>
  		</tr>
  	</table>
  	
  <div id="tabMap" class="mainDiv" >
  	<!-- 这里面是表格界面 -->
  </div>
</center>  
<script type="text/javascript">
var MAP_HEIGHT = 25;	//地图行数
var MAP_WIDTH = 25;		//地图列数
var table = null;
var score = 0;	//得分统计

function $(obj){
	return document.getElementById(obj);
}

//开始/暂停
function letGo(){
	var isGoBtn = $("isGo");
	if("Begin..." == isGoBtn.value){
		Snake.speed = $("speed").value;
		Snake.move(table);
		isGoBtn.value = "Stop...";
	}else{
		clearInterval(Snake.timer);
		isGoBtn.value = "Begin...";
	}
}

//是否重新开始
function isReplay(cheOk){
	var msg = "";
	if(cheOk == -1){
		msg = "撞墙了";
	}else if(cheOk ==0) {
		msg = "咬到自己了";
	}
	clearInterval(Snake.timer);
	flag = confirm(msg + ",重新开始吗?");  
    if(flag){
        score = 0;
        $("score").innerHTML = score;	//得分清零
    	Snake.nextDirect = "right";		//重置
    	initMap();						//重置
    	letGo();
    }
}


//页面初始化生成页面
function initMap(){
	table = document.createElement("table");
	for ( var i = 0; i < MAP_HEIGHT; i++) {
		var tr = table.insertRow(i);
		for ( var j = 0; j < MAP_WIDTH; j++) {
			var td = tr.insertCell(j);
		}
	}
	
	var divMap = $("tabMap");
	divMap.innerHTML = "";
	divMap.appendChild(table);
	
	//初始化蛇身
	Snake.body = [{x:3,y:1},{x:4,y:1},{x:5,y:1}];
	Snake.paintSnake(table);
	
	//生成一个食物点
	Food.foodExist = false;
	Food.randFood(table);
}


Snake = {
	timer: null,
	currDirect: "right",	//蛇的当前方向，防止在一个定时器时间间隔内按下多个方向键时对方向判断失误
	nextDirect: "right",
	speed: 1000,
	body:null,
	
	//根据body画出蛇身	
	paintSnake: function(table){
		for ( var i = 0; i < this.body.length; i++) {
			var x = this.body[i].x;
			var y = this.body[i].y;
			this.paintDot(y,x,table);
		}
	},	
	
	removeDot: function(y,x,table){
		table.rows[x].cells[y].style.backgroundColor = "#E0E0FF";
	},
	
	paintDot: function(y,x,table){
		table.rows[y].cells[x].style.backgroundColor = "black";
	},
	
	move: function(table)
	{
		this.timer = setInterval(function(){
			Snake.step(table);
			Snake.paintSnake(table);
			
		},this.speed);
	},
	
	step: function(table){
		var dot = this.getNextDot();
		var cheOk = this.checkOk(dot,table);
		if(cheOk < 1){
			isReplay(cheOk);
		}else{
			if(dot.x == Food.fx && dot.y == Food.fy){
				score += 1;
				$("score").innerHTML = score;
				Food.foodExist = false;
				Food.randFood(table);
			}else{
				this.removeDot(this.body[0].x,this.body[0].y,table);
				this.body.shift();
			}
			this.body.push(dot);
		}
	},
	
	//根据蛇头方向计算下一步蛇头的坐标
	getNextDot: function (){
		var x = this.body[this.body.length - 1].x;
		var y = this.body[this.body.length - 1].y;
		switch (this.nextDirect) {
		case "left":
			x--;
			this.currDirect = this.nextDirect;
			return {x:x,y:y};
		case "up":
			y--;
			this.currDirect = this.nextDirect;
			return {x:x,y:y};
		case "right":
			x++;
			this.currDirect = this.nextDirect;
			return {x:x,y:y};
		case "down":
			y++;
			this.currDirect = this.nextDirect;
			return {x:x,y:y};	
		default:
			break;
		}
	},
	
	//检测
	checkOk: function(dot,table){
		// 撞墙了
		if(dot.x<0 || dot.x>= MAP_WIDTH || dot.y<0 || dot.y>= MAP_HEIGHT){
			return -1;
		}else{
			//咬到自己了
			for(var i = 0; i< this.body.length; i++){
				if(dot.x == this.body[i].x && dot.y == this.body[i].y){
					return 0;
				}
			}
		}
	}
}


//产生随机食物
Food = {
	fx:0,
	fy:0,
	foodExist: false,
	
	randFood: function(table){
		if(!this.foodExist){
			this.randDot(table);
			//判断食物是否产生在蛇身上
			for(var i = 0; i< Snake.body.length; i++){
				if(this.fx == Snake.body[i].x && this.fy == Snake.body[i].y){
					randDot(table);
				}
			}
			table.rows[this.fy].cells[this.fx].style.backgroundColor = "red";
			this.foodExist = true;
		}
	},
	// 生成一个随机坐标点
	randDot: function(table) {
		this.fx = Math.floor(Math.random()*(MAP_WIDTH - 1) + 1);
		this.fy = Math.floor(Math.random()*(MAP_HEIGHT - 1) + 1);
	}
	
}

function document.onkeydown()        //捕获按的哪个键,进行方向控制
{
	var code = event.keyCode;
	switch(code){
		case 37 :{
			if(Snake.currDirect != "right"){
				Snake.nextDirect = "left";
			}
			break;
		}
		case 38 : {
			if(Snake.currDirect != "down"){
				Snake.nextDirect = "up";
			}
			break;
		}
		case 39 : {
			if(Snake.currDirect != "left"){
				Snake.nextDirect = "right";
			}
			break;
		}
		case 40 : {
			if(Snake.currDirect != "up"){
				Snake.nextDirect = "down";
			}
			break;
		}
	}
}

</script>    
  </body>
</html>

liujizhong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学JS写小游戏——贪吃蛇

贪吃蛇是一款非常经典的小游戏，最近在学javascript，突然想学到东西是不是应该实践下呢，闲来无聊就写了这个游戏，相当只是实现主要的功能，简单说就是能玩，当然由于技术有限，其中还有不少的BUG，这个后期如有时间再去完善或添加点新功能吧。虽然没得什么技术含量，但还是拿出来和大家尤其是新手们分享，愿和程序猿们一起进步！也给自己点信心，加油！附源码：
复制链接

扫一扫