贪吃蛇 js

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量51 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhou_Chuang_Ya/article/details/125390380
版权

js 贪吃蛇案列

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>贪吃蛇</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#map {
				width: 500px;
				height: 500px;
				background-color: pink;
				position: relative;
			}
			table{
				position: absolute;
				left: 0px;
				top: 102px;
			}
			td{
				width: 48px;
				height: 48px;
			}
			#fast,#middle,#slow{
				width: 40px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<h1>Score : 0</h1>
		<br />
		<button id="fast">快</button>
		<button id="middle">中</button>
		<button id="slow">慢</button>
		<div id="map">
			
		</div>
		<script>
			document.write("<table  border='1' cellspacing='0'>")
				for(var i=0;i<10;i++)
				{
					document.write("<tr>")
					for(var j=0;j<10;j++){
						document.write("<td></td>")
					}
					document.write("</tr>")
				}
			document.write("</table>")
			//2. 产生蛇头和食物 ，蛇头是红色
//			var headNode=document.createElement("div")
//			headNode.style.width="50px";
//			headNode.style.height="50px";
//			//background-color 在js'里用驼峰命名写backgroundColor
//			headNode.style.backgroundColor="red"
//			//随机位置
//			headNode.style.position="absolute"
//			headNode.style.left=parseInt(Math.random()*10)*50+"px"
//			headNode.style.top=parseInt(Math.random()*10)*50+"px"
//			var map=document.getElementById("map");
//			map.appendChild(headNode);
			
			function createDiv(color){
				var div=document.createElement("div")
				div.style.width="50px";
				div.style.height="50px";
				div.style.backgroundColor=color
				div.style.position="absolute"
				div.style.left=parseInt(Math.random()*10)*50+"px"
				div.style.top=parseInt(Math.random()*10)*50+"px"
				map.appendChild(div)
				return div;
			}
			var footNode=createDiv("blue")
			var headNode=createDiv("red")
			var bodyNodes=[]
			headNode.dirtion='右'
			//点击快 实现快速移动
			var fast=document.getElementById("fast")
			var x=0;
			fast.onclick=function(){
				window.t=setInterval(function(){
					//身体移动
					if(bodyNodes.length>0){
						for (var n=bodyNodes.length-1;n>=0;n--){
							switch(bodyNodes[n].dirtion){
								case "左": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l-50+'px'
								break
								case "右": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l+50+'px'
								break
								case "上": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t-50+'px'
								
								break
								case "下": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t+50+'px'
								break
							}
							if(n==0){
								bodyNodes[n].dirtion=headNode.dirtion
							}
							else{
								bodyNodes[n].dirtion=bodyNodes[n-1].dirtion
							}
						}
					}
					//头部移动
					switch(headNode.dirtion){
					case "左": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l-50+'px'
					break
					case "右": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l+50+'px'
					break
					case "上": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t-50+'px'
					
					break
					case "下": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t+50+'px'
					break
				}   
					//判断蛇头是否出界
					var t=parseInt(headNode.style.top)
					var l=parseInt(headNode.style.left)
					if(l<0||t<0||l>450||t>450)
					{
						clearInterval(window.t)
						alert('GAVM OVER!')
						
					}
					//当蛇头移动后，判断是否碰到了自己的身体
					for(var n=0;n<bodyNodes.length;n++){
						if(headNode.style.left==bodyNodes[n].style.left&&headNode.style.top==bodyNodes[n].style.top)
						{
							clearInterval(window.t)
							alert('GAME OVER!')
							
						}
					}
					//进行碰撞检测 蛇和头部 重合在一起  食物位置刷新
					if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top)
					{
						
						//先产生对应的身体
						var newNode=createDiv("yellow")
						var lastNode
						if(bodyNodes.length==0){
							lastNode=headNode
						}else{
							lastNode=bodyNodes[bodyNodes.length-1]
						}
						switch(lastNode.dirtion){
							case "上":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t+50+'px'
							break
							case "下":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t-50+'px'
							break
							case "左":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l+50+'px'
							break
							case "右":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l-50+'px'
							break
						}
						//新产生身体移动 的方向
						newNode.dirtion=lastNode.dirtion
						//新产生的身体放入数组中
						bodyNodes.push(newNode)
						
						//随机数的校验
						var px=parseInt(Math.random()*10)*50+"px"
						var py=parseInt(Math.random()*10)*50+"px"
						//无限循环
						while(true){
							for(var n=0;n<bodyNodes.length;n++){
								if(bodyNodes[n].style.left==px&&bodyNodes[n].style.top==py){
									px=parseInt(Math.random()*10)*50+"px"
									py=parseInt(Math.random()*10)*50+"px"
									break
								}
							}if(n==bodyNodes.length){
								break
							}
						}
						footNode.style.left=px
						footNode.style.top=py
						//加分
						var h1=document.getElementsByTagName("h1")
						x=x+10
						h1[0].innerHTML='Score:'+x
					}
				},250)
				
			}
			//点击中 实现中速移动
			var middle=document.getElementById("middle")
			var x=0;
			middle.onclick=function(){
				window.t=setInterval(function(){
					//身体移动
					if(bodyNodes.length>0){
						for (var n=bodyNodes.length-1;n>=0;n--){
							switch(bodyNodes[n].dirtion){
								case "左": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l-50+'px'
								break
								case "右": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l+50+'px'
								break
								case "上": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t-50+'px'
								
								break
								case "下": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t+50+'px'
								break
							}
							if(n==0){
								bodyNodes[n].dirtion=headNode.dirtion
							}
							else{
								bodyNodes[n].dirtion=bodyNodes[n-1].dirtion
							}
						}
					}
					//头部移动
					switch(headNode.dirtion){
					case "左": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l-50+'px'
					break
					case "右": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l+50+'px'
					break
					case "上": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t-50+'px'
					
					break
					case "下": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t+50+'px'
					break
				}   
					//判断蛇头是否出界
					var t=parseInt(headNode.style.top)
					var l=parseInt(headNode.style.left)
					if(l<0||t<0||l>450||t>450)
					{
						clearInterval(window.t)
						alert('GAVM OVER!')
						
					}
					//当蛇头移动后，判断是否碰到了自己的身体
					for(var n=0;n<bodyNodes.length;n++){
						if(headNode.style.left==bodyNodes[n].style.left&&headNode.style.top==bodyNodes[n].style.top)
						{
							clearInterval(window.t)
							alert('GAME OVER!')
							
						}
					}
					//进行碰撞检测 蛇和头部 重合在一起  食物位置刷新
					if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top)
					{
						
						//先产生对应的身体
						var newNode=createDiv("yellow")
						var lastNode
						if(bodyNodes.length==0){
							lastNode=headNode
						}else{
							lastNode=bodyNodes[bodyNodes.length-1]
						}
						switch(lastNode.dirtion){
							case "上":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t+50+'px'
							break
							case "下":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t-50+'px'
							break
							case "左":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l+50+'px'
							break
							case "右":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l-50+'px'
							break
						}
						//新产生身体移动 的方向
						newNode.dirtion=lastNode.dirtion
						//新产生的身体放入数组中
						bodyNodes.push(newNode)
						
						//随机数的校验
						var px=parseInt(Math.random()*10)*50+"px"
						var py=parseInt(Math.random()*10)*50+"px"
						//无限循环
						while(true){
							for(var n=0;n<bodyNodes.length;n++){
								if(bodyNodes[n].style.left==px&&bodyNodes[n].style.top==py){
									px=parseInt(Math.random()*10)*50+"px"
									py=parseInt(Math.random()*10)*50+"px"
									break
								}
							}if(n==bodyNodes.length){
								break
							}
						}
						footNode.style.left=px
						footNode.style.top=py
						//加分
						var h1=document.getElementsByTagName("h1")
						x=x+10
						h1[0].innerHTML='Score:'+x
					}
				},500)
				
			}
//			点击实现慢速移动
			var slow=document.getElementById("slow")
			var x=0;
			slow.onclick=function(){
				window.t=setInterval(function(){
					//身体移动
					if(bodyNodes.length>0){
						for (var n=bodyNodes.length-1;n>=0;n--){
							switch(bodyNodes[n].dirtion){
								case "左": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l-50+'px'
								break
								case "右": 
								var l=parseInt(bodyNodes[n].style.left)
									bodyNodes[n].style.left=l+50+'px'
								break
								case "上": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t-50+'px'
								
								break
								case "下": 
								var t=parseInt(bodyNodes[n].style.top)
									bodyNodes[n].style.top=t+50+'px'
								break
							}
							if(n==0){
								bodyNodes[n].dirtion=headNode.dirtion
							}
							else{
								bodyNodes[n].dirtion=bodyNodes[n-1].dirtion
							}
						}
					}
					//头部移动
					switch(headNode.dirtion){
					case "左": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l-50+'px'
					break
					case "右": 
					var l=parseInt(headNode.style.left)
						headNode.style.left=l+50+'px'
					break
					case "上": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t-50+'px'
					
					break
					case "下": 
					var t=parseInt(headNode.style.top)
						headNode.style.top=t+50+'px'
					break
				}   
					//判断蛇头是否出界
					var t=parseInt(headNode.style.top)
					var l=parseInt(headNode.style.left)
					if(l<0||t<0||l>450||t>450)
					{
						clearInterval(window.t)
						alert('GAVM OVER!')
						
					}
					//当蛇头移动后，判断是否碰到了自己的身体
					for(var n=0;n<bodyNodes.length;n++){
						if(headNode.style.left==bodyNodes[n].style.left&&headNode.style.top==bodyNodes[n].style.top)
						{
							clearInterval(window.t)
							alert('GAME OVER!')
							
						}
					}
					//进行碰撞检测 蛇和头部 重合在一起  食物位置刷新
					if(headNode.style.left==footNode.style.left&&headNode.style.top==footNode.style.top)
					{
						
						//先产生对应的身体
						var newNode=createDiv("yellow")
						var lastNode
						if(bodyNodes.length==0){
							lastNode=headNode
						}else{
							lastNode=bodyNodes[bodyNodes.length-1]
						}
						switch(lastNode.dirtion){
							case "上":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t+50+'px'
							break
							case "下":
							newNode.style.left=lastNode.style.left
							var t=parseInt(lastNode.style.top)
							newNode.style.top=t-50+'px'
							break
							case "左":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l+50+'px'
							break
							case "右":
							newNode.style.top=lastNode.style.top
							var l=parseInt(lastNode.style.left)
							newNode.style.left=l-50+'px'
							break
						}
						//新产生身体移动 的方向
						newNode.dirtion=lastNode.dirtion
						//新产生的身体放入数组中
						bodyNodes.push(newNode)
						
						//随机数的校验
						var px=parseInt(Math.random()*10)*50+"px"
						var py=parseInt(Math.random()*10)*50+"px"
						//无限循环
						while(true){
							for(var n=0;n<bodyNodes.length;n++){
								if(bodyNodes[n].style.left==px&&bodyNodes[n].style.top==py){
									px=parseInt(Math.random()*10)*50+"px"
									py=parseInt(Math.random()*10)*50+"px"
									break
								}
							}if(n==bodyNodes.length){
								break
							}
						}
						footNode.style.left=px
						footNode.style.top=py
						//加分
						var h1=document.getElementsByTagName("h1")
						x=x+10
						h1[0].innerHTML='Score:'+x
					}
				},1000)
				
			}
			document.onkeydown=function(event){
//				console.log(event.keyCode)
				switch(event.keyCode){
					case 38:
					if(!(headNode.dirtion=='下'&&bodyNodes.length>0))
					{headNode.dirtion="上"}
					break
					case 40:
					if(!(headNode.dirtion=='上'&&bodyNodes.length>0)){
						headNode.dirtion="下"
					}
					break
					case 37:
					if(!(headNode.dirtion=='右'&&bodyNodes.length>0)){
						headNode.dirtion="左"
					}
					break
					case 39:
					if(!(headNode.dirtion=='左'&&bodyNodes.length>0)){
						headNode.dirtion="右"
					}
					
					break
				}
			}
		</script>
	</body>
</html>
-花小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
贪吃蛇js代码完整html,javascript贪吃蛇完整版(源码)
weixin_30877775的博客
06-04 977
javascript贪吃蛇完整版 注释完整，面向对象复制代码 代码如下:贪吃蛇 Snake v2.4body{font-size:9pt;}table{border-collapse: collapse;border:solid #333 1px;}td{height: 10px;width: 10px;font-size: 0px;}.filled{background-color:blue;}...
贪吃蛇 javascript
11-28
学了三天HTML，用最基础的知识尝试写了贪吃蛇（按键控制语句我是百度的），在判断蛇咬到自己的问题上有点小问题，不过不影响正常游戏。
javaScript贪吃蛇
m0_58065010的博客
11-16 3973
javaScript写的贪吃蛇，有注解和图片。
贪吃蛇js实现总结
蓝猫爱睡觉
03-04 651
这是一篇关于js贪吃蛇的总结 对象: 蛇 食物 游戏 1.创建食物对象 /*<!--创建食物对象 属性: X , Y ,width,height,color 方法: render 随机创建一个食物对象,并输出到map上 -->*/ //自调用函数 ------>开启新的作用域------防止命名冲突 (function () { ...
贪吃蛇js
jvhbi的博客
10-26 387
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简易的贪吃蛇游戏</title> <style type="text/css"> * { padding: 0; margin: 0; } .m{width:400px; margin-top: 50px; margin-left: a.
贪吃蛇js部分 框架和思路
qq_46266956的博客
01-23 443
思维导图 js代码 var sw = 20, sh = 20, td = 30, tr = 30; var snake = null, food = null, game = null; function square(x,y,classname){ this.x = x*sw; this.y = y*sh; this.class = classname; this.viewContent = document.createElement("div"); this.viewCont
贪吃蛇JS实现
MichaelAn的博客
08-16 1567
网上看到可以使用原生JS实现贪吃蛇，JS代码300行，下面是游戏截图。 代码太多，CSDN 不让上传:>> 所以到github上面下载吧：github 链接 废话不多说，直接上代码，HTML和CSS部分不分析。JS部分的功能说明在注释中。 先放CSS代码 body { background: rgb(102, 178, 255); } main { max-w...
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1227
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
JavaScript贪吃蛇
原地起飞
11-24 5409
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
js实现贪吃蛇
m0_58730471的博客
01-28 882
贪吃蛇
贪吃蛇js小游戏
09-13
这是一个纯js代码实现的贪吃蛇小游戏，代码简明易懂，适合新手，欢迎下载这是一个纯js代码实现的贪吃蛇小游戏，代码简明易懂，适合新手，欢迎下载
贪吃蛇JS
03-24
NULL 博文链接：https://it-han.iteye.com/blog/1076703
贪吃蛇js代码
03-25
简单的贪吃蛇游戏，纯JavaScript的开发，可以当做新手试用项目！
JS贪吃蛇游戏代码
12-01
JS贪吃蛇游戏代码是一款很好玩的网页游戏代码。游戏难度分为初级、中级、高级、超高级、变态，选择难度开始游戏，游戏过程中可以随时调整难度级别。
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 118
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 197
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 855
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-花小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值