原生js写贪吃蛇(界面比较丑勿喷)

最新推荐文章于 2022-11-30 00:14:35 发布
最新推荐文章于 2022-11-30 00:14:35 发布
阅读量745 收藏
点赞数 1
分类专栏： 原生JS 文章标签： 原生JS 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24870721/article/details/102958599
版权

一直想给自己写点东西，于是用原生JS写了一个贪吃蛇，缅怀下童年。废话不多说了直接上代码。写的时候没有考虑性能等问题，多次用到’createElement removeChild等命令。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>贪吃蛇</title>
</head>
<style>
	body{
		background-color: #444;
	}
	#wrap{
		position: relative;
		height: 502px;
		width: 402px;
		margin: 50px auto;
		border: 1px solid;
	}
	#box{
		position: absolute;
		top: 0;
		left: 0;
		height: 502px;
		width: 402px;
		border: 1px solid red;
	}
	#box h1{
		margin-top: 50px;
		text-align: center;
		line-height: 50px;
		color: #000;
	}
	#box button{
		width: 100px;
		margin-left: 150px;
		margin-top: 200px;
		font-size: 30px;
	}
	#box1 button{
		display: none;
		width: 140px;
		margin-left: 130px;
		margin-top: 350px;
		font-size: 30px;
	}
	#box p{
		margin-top: 100px;
		margin-left: 300px;
		font-size: 20px;
		color: #fff;
	}

	#wrap p{
		display: none;
		width: 100%;
		margin-top: 150px;
		text-align: center;
		font-size: 20px;
		color: #000;
	}
	#box span{
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: #ff3df1;
		border-radius: 50%;
	}

	#box1 .foods{
		position: absolute;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}
	#box1{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#box1 span{
		position: absolute;
		z-index: 100;
		text-indent: 10px;
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #000;
	}
</style>
<body>
	<div id="wrap">
		<div id="box">
			<!-- <h1>欢迎来到科科贪吃蛇</h1>
			<button type="button">PLAY</button>
			<p>版本号0.0.1</p> -->
		</div>
		<div id="box1">
			<span id="scoll"></span>
			<button type="button" id="box1btn">再来一次</button>
		</div>
		<p>笨蛋撞墙了</p>
	</div>
	<script>
		(function (){
			var wrap = document.getElementById("wrap"),
				p =wrap.getElementsByTagName("p")[0],
			    box = document.getElementById("box"),
			    boxspan =box.getElementsByTagName("span"),
			    btn= box.getElementsByTagName("button")[0],
			    box1=document.getElementById("box1"),
			    box1btn=document.getElementById("box1btn"),
			    asnake= document.getElementsByTagName("span"),
			    firstLeft = box.firstChild.offsetLeft,
				fristTop = box.firstChild.offsetTop,
				scoll = document.getElementById("scoll"),
			    timer,
			    j=0,
			    num,
		    	foodtop,
		    	arr=[],
			   	foodleft;
		   	//初始界面
		   	function init(){
		   		boxh1 = document.createElement("h1");
		   		boxh1.innerHTML = "欢迎来到科科贪吃蛇";
		   		box.appendChild(boxh1);
		   		boxbt = document.createElement("button");
		   		boxbt.innerHTML = "PLAY";
		   		boxbt.id="btn";
		   		box.appendChild(boxbt);
		   		boxp = document.createElement("h1");
		   		boxp.innerHTML = "版本号0.0.2";
		   		box.appendChild(boxp);	
		   	}
		   	init();
		   	btn= box.getElementsByTagName("button")[0];		   
		   	//开始游戏
		   	btn.onclick=function(){
			  	//清空游戏界面
			  	box.innerHTML="";
			  	//生成蛇
			  	snake();
			  	//生成食物
			  	food();
			  	//生成得分板
			  	scoll.innerHTML="得分:"+j+"";
		    }
		    //生成食物 位置随机
		    function food(){
		    	foods=document.createElement("div");
		    	foods.className = "foods";
		    	foodtop = Math.floor(Math.random()*25)*20;
		    	foodleft =Math.floor(Math.random()*20)*20;
		    	//食物的位置 随机的
	    		foods.style.top = foodtop + "px";
	    		foods.style.left= foodleft + "px";
				//食物的随机的颜色
			    fimg= Math.floor(Math.random()*10)
		    	foods.style.backgroundImage="url('img/"+fimg +".png')"; //图片的名称为1.png  				 	  2.png 这样的话就可以在实现随机显示图片 比较方便
		    	box1.appendChild(foods);
		    }
		    //生成蛇 以及蛇的运动   蛇的话利用的是数组的来存储的 吃一个食物数组长度+1并且增加位置属性
		    function snake(e){
		    	e = e || window.event;
		    	//生成初始化的蛇身
			    for (var i = 0 ; i < 5; i++) {
			    	arr.push(document.createElement("span"));
			     }
			    for (var i = 0; i < arr.length; i++) {
			     	box.appendChild(arr[i]);
			     	asnake[i].style.left = 100 +i*20+"px";
			     	asnake[i].style.top = 100 +"px";
			     }
			    firstLeft = box.lastChild.offsetLeft;
			    fristTop = box.lastChild.offsetTop;
			    //移动步长
			    var top = 0,
		    		left = 20;
		    	//运动
		    	timer = setInterval(function (){
			    	//蛇运动 键盘事件
 			    	document.onkeyup =function(e){
			    		e = e || window.event;
			    		if (top == 0) {
			    			if (e.keyCode==38) {
			    				top=-20;
			    				left = 0;
			    			}else if (e.keyCode==40) {
			    				top=20;
			    				left = 0;
			    			}
			    		}
			    		if (left==0) {
			    			if (e.keyCode==37) {
			    				left=-20;
			    				top=0;
			    			}else if (e.keyCode==39) {
			    				left=20;
			    				top=0;
			    			}
			    		}
			    	}
			    	arr.unshift(document.createElement("span"));
			    	box.appendChild(arr[0]);
			     	box.lastChild.style.left = firstLeft +left+"px";
			     	box.lastChild.style.top = fristTop+ top +"px";
			     	firstLeft = box.lastChild.offsetLeft;
			     	fristTop = box.lastChild.offsetTop;
			     	box.removeChild(box.firstChild);

			     	// 限定蛇的活动范围
					if (firstLeft<0 || firstLeft>390) {
						clearInterval(timer)
						box.innerHTML="";
						box1.removeChild(foods);
						arr.length="";
						p.style.display = 'block';
						box1btn.style.display = 'block';
					}
					if (fristTop<0 || fristTop >490) {
						clearInterval(timer)
						box.innerHTML="";
						box1.removeChild(foods);
						arr.length="";
						p.style.display = 'block';
						box1btn.style.display = 'block';
					}
					//蛇与食物相撞
		    		if (box.lastChild && touch(box.lastChild,foods)) {
		    			
							box1.removeChild(foods);
							arr.unshift(document.createElement("span"));
			    			box.appendChild(arr[0]);
			    			box.lastChild.style.left = firstLeft +left+"px";
			     			box.lastChild.style.top = fristTop+ top +"px";
							food();
							j++;
							scoll.innerHTML="得分:"+j+"";
		    		}
		}, 200 )
	}
	// obj1只能为蛇 obj2为食物
	function touch( obj1,obj2){ 
		var top1= obj1.offsetTop;
			left1= obj1.offsetLeft;
			bottom1= obj1.offsetTop + obj1.clientHeight;
			right1=obj1.offsetLeft + obj1.clientWidth;
			top2= obj2.offsetTop;
			left2= obj2.offsetLeft;
			bottom2= obj2.offsetTop + obj2.clientHeight;
			right2=obj2.offsetLeft + obj2.clientWidth;
		return !(top1 > top2 || left1 > left2 || bottom1 < bottom2 || right1 < right2)
    }
    //重新开始游戏
	box1btn.onclick = function(){
   		j=0;
   		init();
   		p.style.display = 'none';
		box1btn.style.display = 'none';
		box.innerHTML="";
		snake();
		food();
		scoll.innerHTML="得分:"+j+"";
   } 
}())		
	</script>
</body>
</html>
（新手向js项目）小白必看的原生js实现贪吃蛇游戏
weixin_51953261的博客
10-10 1238
前端入门，用原生js开发贪吃蛇小游戏
原生js写贪吃蛇
yezi__6的博客
09-12 275
贪吃蛇代码步骤： 1.创建蛇运动的地图：Map 2.创建蛇：以数组形式存放蛇的每一节。用for循环遍历蛇的每一节，来控制蛇的长度 3.写蛇运动：用for循环：让后一节走前一节的位置，按上下左右时，让蛇的运动方向改变，用键盘控制蛇运动的方向。 4.创建蛇的食物： 5.写当蛇与食物的坐标相等时，食物重新跑位置，蛇的长度加1（末尾加） 6.写蛇碰到边界，或者自己，游戏结束。 详细代码： &lt...
原生JS写贪吃蛇
Liw_J的博客
08-17 565
原生js贪吃蛇 游戏的练习重点在于对javascript的基础知识的串联，以及对逻辑思路的提升。在遇到相对比较大的项目或者任务时，本着大化小的思路，从局部开始着手写代码。本次贪吃蛇分三大部分（地图，蛇，食物），在展示实际页面以后会分解讲解各个步骤。 思路分析：1、地图 2、蛇 3、食物 1、用表格table创建地图，样式渲染页面，js负责整个蛇和食物在地图上的渲染和运动。 2、蛇...
原生JS 贪吃蛇
qq_36930071的博客
12-07 313
原生 JS 贪吃蛇
原生js写一个贪吃蛇小游戏(内含详细注释)
le__seul的博客
05-12 3742
很简单的贪吃蛇实现，游戏效果如下图
原生JS写贪食蛇游戏(一)
qq_28919991的博客
09-29 429
** JS写贪食蛇游戏(一) ** 今天用js来实现贪食蛇游戏的基本玩法，往后博主会不定时更新贪食蛇的进阶模式 例如增添关卡、蛇加速、双人同屏操作等等 话不多说,开始吧 贪食蛇的基本思路： 1.创建两个对象：蛇、食物； 2.让蛇动起来； 3.设立游戏规则：蛇头碰到边界是gameOver，蛇头碰到自身时gameOver 4.蛇头与食物重合时身体伸长一节同时食物出现在别的地方 先搭好骨架，界面的样...
纯原生js实现贪吃蛇游戏
10-19
在介绍如何使用纯原生JavaScript实现贪吃蛇游戏之前，我们需要了解一些基础知识和关键概念。贪吃蛇是一款经典的游戏，在此版本中，玩家将控制一条蛇在限定的地图内移动，吃掉出现的食物，每吃一个食物蛇的长度就会...
原生js实现贪吃蛇.zip
05-15
在本项目"原生js实现贪吃蛇.zip"中，我们探索了如何使用纯JavaScript语言来构建一个经典的贪吃蛇游戏。这个项目不仅展示了JavaScript的基本语法和操作，还揭示了编程思维和逻辑的重要应用。以下是关于这个项目的一些...
原生JS贪吃蛇游戏实战开发
06-10
在本项目中，我们将深入探讨如何使用原生JavaScript来实现一个经典的H5游戏——贪吃蛇。这个项目适合对JavaScript有一定基础，想要提升Web全栈技能的开发者。通过实际操作，我们可以了解到游戏开发的基本原理，以及...
原生JS实现贪吃蛇小游戏
10-15
原生JavaScript实现贪吃蛇小游戏是一项有趣的编程挑战，它涉及到基本的HTML布局、CSS样式以及JavaScript事件处理和对象编程。以下是对实现贪吃蛇小游戏的关键知识点的详细解释： 1. **HTML结构**： 游戏的基础是...
原生js实现贪吃蛇
it_czh的博客
08-24 439
 本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;H5游戏开发之贪吃蛇&lt;/title&gt; &lt;style&g
原生JavaScript实现贪吃蛇的游戏
LY_code的博客
04-17 1164
贪吃蛇游戏的思考步骤：1.默认初始值（3个）默认向右走 2.封装函数move，去移动蛇 3.去监听键盘的事件，看用户的怎么移动蛇 4.去判断碰到墙就死亡，结束游戏 5.去完成投放食物的封装函数 6.去实现蛇的吃食物的函数 其实我们触发键盘事件，我们是这么处理的，这是一种比较简单的想法。一个div是40px，当横着三个div数组，往右。数组0是蛇头，那么当移动时是最后一个div 的left和top值...
【学习笔记64】原生JS实现贪吃蛇
最新发布
yizhiyang
11-30 326
原生JS实现贪吃蛇
原生JS纯基础实现贪吃蛇
weixin_45072327的博客
08-10 396
话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var body; // 全局变量们,因为后面还需要获取 var ...
原生js简单实现贪吃蛇
Mrlonely思考笔记
08-22 824
js写个简单的贪吃蛇案例,用于复习一下js的原型链呀还有闭包沙箱知识等. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style&gt;
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3220
JS 超详细 贪吃蛇 案例 速速围观
原生JS实现贪吃蛇项目，附源码下载！
sdfujichao的博客
05-06 3584
运行于谷歌浏览器。主要是利用了函数的封装思想，把每一个小功能分别封装在一个函数中，大大提高了代码的可扩展性！！提高了代码的可维护性！！！提高了代码的可阅读性！！！项目要求：1：有边界，碰到边界就game over。2：猎物没3秒增加一个，而且位置随机产生。3：吃一个猎物自身就增加一个元素。4：按上下左右控制移动方向，按空格决定暂停和前进。 实现思路：主要是一开始就把实现的功能封装在了一个先函数中
JS 原生js实现贪吃蛇小游戏（含详细注释）
夏沐的博客
02-28 5724
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;style&gt; .map{ width:800px; height:600px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值