HTML初级程序编写

最新推荐文章于 2022-06-20 20:24:59 发布

Jie_Ger

最新推荐文章于 2022-06-20 20:24:59 发布

阅读量594

点赞数

分类专栏：习题文章标签：贪吃蛇 HTML 前端

本文链接：https://blog.csdn.net/Jie_Ger/article/details/84135579

版权

习题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

贪吃蛇的代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#first{
			width:600px;
			height:600px;
		}
		div{
		
			width:15px;
			height:15px;
			
			float: left;
		}
		.border{
			background:#ccc;
		}
		.head{
			background:deeppink;
		}
		.body{
			background:pink;
		}
		#second{
			width:200px;
			height:200px;
		}
		input{
			width:50px;
			height:50px;
		}
		#top{
			margin:0px 75px 25px; 
		}
		#left{
			margin-right:95px;
		}
		#bottom{
			margin-top:25px;
			margin-left:75px;
		}
		.food{
			background: greenyellow;
		}
	</style>
	<body>
		<div id="first"></div>
		<div id="second">
			<input type="button" id="top" value="上">
			<input type="button" id="left" value="左">
			<input type="button" id="right" value="右"> 
			<input type="button" id="bottom" value="下">
		</div>
		>
		<script>
			var morediv="";
			var num=0;
			function add(){
				for(var i=1;i<=40;i++){
					for(var j=1;j<=40;j++){
						num++;
						morediv = morediv+"<div id='"+num+"'></div>"
					}
				}
				return morediv;
			}
			document.getElementById("first").innerHTML = add();
			
			var child = document.getElementById("first").children;
			for(var i=0;i<child.length;i++){
				var Id = child[i].getAttribute("id");
				if((Id>=1&&Id<=40)||(Id>=1560&&Id<=1600)||(Id%40===0)||((Id-1)%40)===0){
					child[i].className = "border";
				}
				/*要是格子显示错误，没有排列整齐，可以自己定义first盒子和其子盒子的
				 * 高和宽，记得去掉边框样式，因为不同浏览器的边框宽度有所差别
				 */
			}
			//获取身体和头所在格子的id编号
			var snakeId = [465,466,467];
			//通过id获取格子
			var snake;
			for(var i=0;i<snakeId.length;i++){
				snake = document.getElementById(snakeId[i]+"");
				if(i==0){
					snake.className = "head";
				}else{
					snake.className = "body";
				}
			}
			//移动
			//移动的方向
			var btn = document.getElementsByTagName("input");
			
			
			function move(_input){
				btnId = _input.getAttribute("id");
					//下一步头的位置
						_input.setAttribute("click","1");
						switch(btnId){
							case "top":
								snakeId.unshift(snakeId[0]-40);
								break;
							case "right":
								snakeId.unshift(snakeId[0]+1);
								break;
							case "left":
								snakeId.unshift(snakeId[0]-1);
								break;
							case "bottom":			
								snakeId.unshift(snakeId[0]+40);
								break;
						}
					//判断蛇头下一步是否会触碰到事物
					var head = document.getElementById(snakeId[0]+"");
					if(head.className=="border"||head.className=="body"){
						alert("game over");
						location.reload();
					}
					
					
					
					
					if(head.className == "food"){
						haveFood = 0;
					}else{
						document.getElementById(snakeId[snakeId.length-1]).className="";
						snakeId.length=snakeId.length-1;
					}
					for(var i=0;i<snakeId.length;i++){
						snake = document.getElementById(snakeId[i]+"");
						if(i==0){
							snake.className = "head";
						}else{
							snake.className = "body";
						}
					}


			}
			
		function _click(){
        	for(var j =0;j<btn.length;j++){
            	btn[j].setAttribute("click","0");
        	}
    	}
    	_click();
    	function ban(){
    		var _position = snakeId[0]-snakeId[1];
    		switch(_position){
    			case -1:
    				btn[2].setAttribute("click","1");
    				break;
    			case 1:
    				btn[1].setAttribute("click","1");
    				break;
    			case -40:
    				btn[3].setAttribute("click","1");
    				break;
    			case 40:
    				btn[0].setAttribute("click","1");
    				break;
    		}
    	}
    	
	
    	var interval="";
			for(var i =0;i<btn.length;i++){
				
				btn[i].onclick = function(){
					var that = this;
					ban();
					if(this.getAttribute("click")==0){
						clearInterval(interval);//清楚上一个按钮的定时器
						_click();//初始化
						interval=setInterval(
							function(){
								move(that);
							},200
						)
					}


	
					
					
				
					
					//不能让头穿过身体
					
				}
			}

	
			var haveFood = 0;
			setInterval(
				function(){
					if(haveFood==0){
						var random = parseInt(Math.random()*1600);		
						if(child[random].className==""){
							child[random].className = "food";
							haveFood = 1;
						}
					}
				},200
			)

			
	


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

未经允许，不得转载！！！

Jie_Ger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML初级程序编写

贪吃蛇的代码实现&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; #first{ width:600px; heig
复制链接

扫一扫