js贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布
最新推荐文章于 2024-05-02 14:46:08 发布
阅读量472 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44963099/article/details/90171735
版权

背景音乐的话，你们换一下就可以了， 我就不加背景音乐的链接了，网易云一搜一大把

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>贪吃蛇</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			body {
				position: relative;
			}

			#gameMap {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 800px;
				height: 500px;
				font-size: 0px;
				background: #000000;
			}

			h1 {
				width: 200px;
				color: white;
				text-align: center;
				position: absolute;
				top: 300px;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				cursor: pointer;
			}

			h1:hover {
				color: red;
			}

			h3 {
				width: 300px;
				color: white;
				text-align: center;
				position: absolute;
				top: 350px;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

			span {
				display: inline-block;
				/* box-sizing: border-box; */
			}

			.snake {
				position: absolute;
				background-color: red;
				border-radius: 50%;
			}

			.food {
				position: absolute;
				background-color:blue;
				border-radius: 50%;
			}
			#sum{
				width:150px;
				height: 50px;
				background: gray;
				position: absolute;
				top: 580px;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				text-align: center;
				color: white;
				line-height: 50px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="gameMap"></div>
		<h1>开始游戏</h1>
		<audio id="Audio" loop="loop">
			<source src="audio/贪吃蛇BGM.mp3">
		</audio>
		<h3>WSAD上下左右</h3>
		<div id="sum">您的得分：0分</div>
	</body>
</html>
<script type="text/javascript">
	let h1 = document.querySelector("h1");
	let h3 = document.querySelector("h3");
	let sum = document.getElementById("sum");
	let i=null;//初始话得分
	let snake = [] // 创建容纳蛇的数组
	h1.onclick = function(evt) { //点击开始游戏
		document.getElementById("Audio").play();
		let e = evt || event;
		h1.style.display = "none";
		h3.style.display = "none";
		sum.style.display = "block";
		
		//1.创建地图
		
		let box = { //每一个方块的高度,因为贪吃蛇吃到东西是必须要精确的坐标才可以吃到东西,所以我打算用span铺满游戏界面
			width: 20,
			height: 20,
		};
		function map() {
			let gameMap = document.getElementById("gameMap"); //获取地图
			let row = Math.floor(gameMap.offsetWidth / box.width); //列：游戏界面的宽度除以盒子的宽度就等于需要创建多少个box
			let rol = Math.floor(gameMap.offsetHeight / box.height); //行：游戏界面的高度除以盒子的宽度就等于需要创建多少个box
			let num = row * rol; //行列相乘就是总共需要的box
			let newSpan = null; //给新建的span定义并置空,其实不置空也可以,个人习惯;
			for (let i = 0; i < num; i++) { //循环创建num个span
				newSpan = document.createElement("span"); //创建span
				newSpan.style.width = box.width + "px";
				newSpan.style.height = box.height + "px";
				gameMap.appendChild(newSpan); //把新建的span添加到地图上
			}
		}
		map()

		//2.创建蛇
	
		function createSnake() {
			let snakeBody = null;
			let gameMap = document.getElementById("gameMap"); //获取地图
			for (let i = 0; i < 3; i++) { //i的值就是初始的蛇的长度,想是几节就写几
				snakeBody = document.createElement("span");
				snakeBody.style.width = box.width + "px"; 
				snakeBody.style.height = box.height + "px";
				snakeBody.style.left = 0 + "px";//蛇的初始位置
				snakeBody.style.top = "0px";
				snakeBody.className = "snake"; //声明body的class名是snake,通过css样式span.snake改变颜色
				gameMap.appendChild(snakeBody);
				snake.push(snakeBody); //把创建好的span在snake的尾部插入
			}
		}
		createSnake()
// 
// 		//3.让蛇移动
// 		
		let dir=3;
		document.onkeypress=function(evt){
			let e = evt || event;
			let key = e.keyCode = e.which = e.charCode;
			if(key==97){
				dir=0;
			}else if(key==100){
				dir=1;
			}else if(key==119){
				dir=2;
			}else if(key==115){
				dir=3;
			}
		}
// 		
// 		直接写这个也可以用
// 		document.οnkeypress=function(evt){
// 			let e = evt || event;
// 			let key = e.keyCode = e.which = e.charCode;
// 			if(key==97){
// 				newLeft -= box.width;
// 			}else if(key==100){
// 				newLeft += box.width;
// 			}else if(key==119){
// 				newTop -= box.height;
// 			}else if(key==115){
// 				newTop += box.height;
// 			}
// 		}
// 
		let time = null;//置空定时器
		time=setInterval(function(){
			let gameMap=document.getElementById("gameMap");
			//蛇头移动snake
			let snakehead=snake[snake.length-1];//因为下标是从0开始的,所以蛇的长度减一就是现在蛇头,现在snakehead就是蛇头 
			let newTop=snakehead.offsetTop //蛇头的offsetTop 
			let newLeft=snakehead.offsetLeft;//蛇头的offsetLeft 
			if(dir==0){
				newLeft -= box.width;
			}else if(dir==1){
				newLeft += box.width;
			}else if(dir==2){
				newTop -= box.height
			}else if(dir==3){
				newTop += box.height;
			}
			
// 			
			//除蛇头外身体移动-蛇节
			for(let i=0;i<snake.length-1;i++){
				snake[i].style.top=snake[i+1].offsetTop+"px";//每个蛇的身体部分span的坐标都等于前一个的坐标
				snake[i].style.left=snake[i+1].offsetLeft+"px";
			}		
			
			snakehead.style.left=newLeft+"px";
			snakehead.style.top=newTop+"px";
			
// 			 //如果超出边界，游戏结束
// 			 
// 			//减去一个盒子的高度的原因因为left是以容器的最上面算的,所以减去才刚好
			if(newLeft>gameMap.offsetWidth-box.height){
				clearTimeout(time);
				h1.style.display = "block";
				h3.style.display = "block";
				h1.innerText="Game"+""+""+""+"Over";
				h3.innerText="撞到墙壁";
				h1.onclick=null;
				newLeft==gameMap.offsetWidth+"px";
				newLeft=gameMap.offsetWidth+"px"
			}
			if(newLeft<0){
				clearTimeout(time);
				h1.style.display = "block";
				h3.style.display = "block";
				h1.innerText="Game"+""+""+""+"Over";
				h3.innerText="撞到墙壁";
				h1.onclick=null;
				newLeft=0;
			}
			if(newTop<0){
				clearTimeout(time);
				h1.style.display = "block";
				h3.style.display = "block";
				h1.innerText="Game"+""+""+""+"Over";
				h3.innerText="撞到墙壁";
				h1.onclick=null;
				newTop=0;
			}
			if(newTop>gameMap.offsetHeight-box.height){
				clearTimeout(time);
				h1.style.display = "block";
				h3.style.display = "block";
				h1.innerText="Game"+""+""+""+"Over";
				h1.onclick=null;
				h3.innerText="撞到墙壁";
				newTop=gameMap.offsetTop+"px";
			}
			
			//判断吃掉自己
			// for(let i=1; i<snake.length; i++){
			// 	if(newLeft==snake[i].offsetLeft && newTop==snake[i].offsetTop){
			// 		clearTimeout(time);
			// 		h1.style.display = "block";
			// 		h3.style.display = "block";
			// 		h1.innerText="Game"+""+""+""+"Over";
			// 		h1.οnclick=null;
			// 		h3.innerText="吃掉自己";
			// 		newTop=snake[i].offsetTop+"px";
			// 		newLeft=snake[i].offsetLeft+"px";
			// 	}
			// }
// 			 
// 			//4.判断吃到食物
// 			
// 			//只要蛇头的left和top和food的left,top相等了,说明吃到食物了
			if(newLeft==food.offsetLeft && newTop==food.offsetTop){
				i++
				food.className="snake";//给food声明一个class名,目的通过css改变样式
				snake.push(food);
				createFood();
				sum.innerText="您的得分："+i+"分";
			}
			
		},100)
// 		
// 		//3.创建食物
		let food = null;
		function createFood(){
			let gameMap=document.getElementById("gameMap"); //获取游戏地图
			food=document.createElement("span");//创建一个span节点
			food.className="food";
			food.style.width=box.width+"px";
			food.style.height=box.height+"px";
			food.style.left=Math.floor((gameMap.offsetWidth-2)/box.width*Math.random())*box.width+"px";
			food.style.top=Math.floor((gameMap.offsetHeight-2)/box.height*Math.random())*box.height+"px";
			gameMap.appendChild(food);
		}
		createFood();
 	}
</script>
素描本里的男子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
JS贪吃蛇小游戏
qq_39369835的博客
02-12 303
JS贪吃蛇小游戏： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;title&amp;lt;/titl
Js贪吃蛇
qq_41043296的博客
03-08 1745
JS贪吃蛇 Js原生贪吃蛇：canvas HTML <canvas id="can"></canvas> #can{ background: #000000; height: 400px; width: 850px; } JS //公共板块 var blockSize = 10; //地图的高宽 var mapW = 300; var mapH = 150; //历史食物var var historyfood = new Array(); //食物数组
JS贪吃蛇
csdn_jwdlh的博客
03-04 2607
JS贪吃蛇效果展示CSS样式index.htmlindex.css构造方格蛇的创造蛇的初始化蛇的运动创建和生成食物创建游戏逻辑按下键盘方向键控制蛇移动方向定时器开始游戏暂停游戏结束游戏 效果展示 CSS样式 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
JavaScript贪吃蛇
原地起飞
11-24 5679
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
Javascript贪吃蛇
05-27
JavaScript贪吃蛇是一款基于网页的经典游戏，通过JavaScript编程语言实现，展现了JavaScript在游戏开发中的应用。这款游戏的原理是利用HTML作为展示界面，JavaScript处理游戏逻辑和用户交互，为玩家提供了一个简单但...
JS版贪食蛇
04-18
NULL 博文链接：https://kenkao.iteye.com/blog/1835949
JavaScript版贪吃蛇
03-13
使用JavaScript中对象、定时器以及html5新增的Canvas标签等知识制作的一款纯js贪吃蛇游戏，大家下载来学习下
利用js实现贪吃蛇的小游戏
07-14
利用js实现贪吃蛇的小游戏，用网页打开，请用ie浏览器打开
JS做贪吃蛇
05-17
使用JScript制作的一款小游戏——贪吃蛇，代码相对容易，便于初学者研究自学
js小游戏贪吃蛇
学无止境！
04-13 599
介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢迎各位能给我提出来，希望大家能喜欢这个小游戏！ 项目结构： 虽然是个动态web项目，但我是用纯前端技术完成的，只是使用的工具是eclipse而已，大家大可放心运行在自己的浏览器上。 运行效果 注意...
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JS实现贪吃蛇小游戏
FFlouxetine的博客
05-14 2654
JS实现贪吃蛇小游戏 分析食物 对象：食物 属性：宽（width）、高（height）、水平坐标（x）、垂直坐标（y）、背景颜色（bgcolor） 方法：随机生成、移除食物 （在此之前可以完成一个小任务,相当于为这一步做铺垫） 例题：随机生成十个方块，每一秒刷新一次，位置随机，颜色随机 分析蛇 对象：蛇 属性：初始长度（一个个蛇节构成：x，y，color）、方向：（direction） 方...
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
用js代码实现贪吃蛇小游戏
最新发布
guai_guai_guai的博客
05-02 1637
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值