使用HTML+CSS+JS 实现简易版贪吃蛇

最新推荐文章于 2023-08-17 20:31:45 发布
最新推荐文章于 2023-08-17 20:31:45 发布
阅读量1.7k 收藏 12
点赞数 3
分类专栏： 案例练习 文章标签： html js javascript css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuu_lucky/article/details/103832753
版权

使用HTML+CSS+JS实现简易版贪吃蛇，功能还在完善中…

供大家学习参考使用！

效果如下：

使用矩阵生成简易版贪吃蛇

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Snake</title>
		<style type="text/css">
			/**全选,统配选择器*/
			
			* {
				margin: 0;
				padding: 0;
			}
			/*设置整个页面的背景*/
			body {
				background: -webkit-linear-gradient(left, #f1c40f, #e74c3c); /*设置渐变*/
				background: -moz-linear-gradient(left, red, orange);
				/*不同浏览器内核不同,兼容度不同,moz(火狐firefox)*/
			}
			
			h1 {
				text-align: center;
				margin-top: 20px;
			}
			
			table {
				margin: 30px auto;
				/*border-collapse:collapse ;*/
				/*单元格的位置重叠*/
			}
			
			td {
				width: 30px;
				height: 30px;
				border: 1px solid white;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<!-- <h1>Running Snake</h1> -->
		<table>
			<tr><td></td></tr> -->设置20个tr，每个tr下含20个td
		</table>
	</body>

JS代码部分

<script type="text/javascript">
		// 1.基本设置

		var score = 0; //定义分数变量，保存游戏的成绩
		var direction = "right" //设置蛇身移动的方向，默认向右移动
		var snake_data = [{
			"row": 6,
			"col": 8
		}, {
			"row": 6,
			"col": 7
		}, {
			"row": 6,
			"col": 6
		}, {
			"row": 6,
			"col": 5
		}, {
			"row": 6,
			"col": 4
		}, {
			"row": 6,
			"col": 3
		}]; //定义蛇身的基本数据(键，值类型)
		// row(行)，columns(列) 蛇身起始位置

		// 声明绘制蛇身的函数(并封装函数)
		function snake(row, col, color) {
			//			document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].style.background = color;
			var tr = document.getElementsByTagName("tr")[row];
			var td = tr.getElementsByTagName("td")[col];
			td.style.background = color;
		}

		//声明绘制整条蛇的函数
		function draw_snake() {
			for(var i = 0; i < snake_data.length; i++) {
				if (i != 0) {
					var result = snake_data[0].row == snake_data[i].row && snake_data[0].col == snake_data[i].col;
					// 如果蛇头的行号和当前行号相等(重合) 并且 蛇头的列号和蛇身的列号相等(说明重合)
					if (result) {
						die();
						return;
					}
				}
				var row = snake_data[i].row;
				var col = snake_data[i].col;
				var color = "rgba(0,0,0,1)";
				snake(row, col, color);
			}
		}
		//调用函数
		draw_snake();

		//声明绘制 蛋 的函数
		function draw_egg() {
			//do while 循环 --> 先执行一次，再循环
			do {
				var row = parseInt(Math.random() * 20); //random(0-1)
				var col = parseInt(Math.random() * 20);
				var flag = false; //随机出来的egg不能和蛇身重合
				for(var i = 0; i < snake_data.length; i++) {
					var snake_row = snake_data[i].row;
					var snake_col = snake_data[i].col;
					if(row == snake_row && col == snake_col) {
						flag = true;
					}
				}

			} while (flag) {
				//				document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].style.background="white";
				var tr = document.getElementsByTagName("tr")[row];
				var td = tr.getElementsByTagName("td")[col];
				td.style.background = "white";
			}
		}
		// 调用
		draw_egg();

		// 定义清屏函数 
		function clear() {
			for(var i = 0; i < 20; i++) {
				for(var j = 0; j < 20; j++) {
					var td = document.getElementsByTagName("tr")[i].getElementsByTagName("td")[j];
					if (td.style.background != "white") {
						td.style.background = "";
					}
				}
			}
		}

		// 定义死亡函数(碰壁，撞到自身)
		function die() {
			clearInterval(timer); // 停止定时器
			var result = confirm(`游戏结束,最终得分为:${score}！！！`);
			if (result) {
				window.location.reload();
			}
		}

		// 定义定时器，让蛇自动移动(主要业务逻辑)
		var timer = setInterval(function() {
			clear(); // 每移动一次都要清除上一次绘制的蛇
			switch(direction) {
				case "left":
					if(snake_data[0].col - 1 < 0) {
						die();
						return;
					}
					// unshift 给第一个元素后面加入一个元素
					snake_data.unshift({
						"row": snake_data[0].row,
						"col": snake_data[0].col - 1
					})
					
				break;

				case "right":
					if(snake_data[0].col + 1 > 20) {
						die();
						return;
					}
					snake_data.unshift({
						"row": snake_data[0].row,
						"col": snake_data[0].col +1 
					})
				break;

				case "up":
					if(snake_data[0].row - 1 < 0) {
						die();
						return;
					}
					snake_data.unshift({
						"row": snake_data[0].row -1,
						"col": snake_data[0].col
					})
				break;

				case "down":
					if(snake_data[0].row + 1 > 20) {
						die();
						return;
					}
					snake_data.unshift({
						"row": snake_data[0].row + 1,
						"col": snake_data[0].col
					})
				break;
			}
			
			//判断新添加的蛇头是否是egg
			var row = snake_data[0].row;
			var col = snake_data[0].col;
			var td = document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col];
			if (td.style.background != "white") {
				snake_data.pop();
			}else{
				draw_egg();
				score += 10; //得分+10分
			}
		draw_snake();
			
		}, 100); // 匿名函数，刷新时间(毫秒)

		// 监听键盘事件，完成贪吃蛇方向的改变
		// onkeydown 按下操作
		// 键盘类型属于unicode编码,每个数字对应键盘编码 ，左上右下
		document.onkeydown = function (event){
			console.log(event.keyCode); //在控制台输出
			switch (event.keyCode) {
				case 37:
				if (direction == "right") {
					return;
				}
				direction = "left";	
					break;

				case 38:
				if (direction == "down") {
					return;
				}
				direction = "up";	
					break;

				
				case 39:
				if (direction == "left") {
					return;
				}
				direction = "right";	
					break;	
				
				case 40:
				if (direction == "up") {
					return;
				}
				direction = "down";	
					break;	
				
				default:
					break;
			}
		}
	</script>

需要完善的地方：
1.没有添加重新游戏的按钮。
2.还可以继续美化。`

Yuu_lucky
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html+css+js小练习2-贪吃蛇
qq_43327962的博客
03-11 207
html+css+js小练习2-贪吃蛇 效果如下： 1.index.html代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>html5实现贪吃蛇小游戏</title> <style> *{ m...
js实现贪吃蛇游戏（简易版）
01-18
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 直接开始 效果图: 项目结构:图片自己找的 1.html <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> &...
html5简单的贪吃蛇小游戏代码
11-03
html5简单的贪吃蛇小游戏代码 html5简单的贪吃蛇小游戏代码
html+js实现贪吃蛇小游戏
qq_45142260的博客
04-06 2834
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
贪吃蛇html游戏代码
wjh091225的博客
03-23 1万+
贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
HTML实现简单贪吃蛇小游戏
qq_61345460的博客
08-17 796
HTML实现简单贪吃蛇小游戏。
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
JS实现简易贪吃蛇游戏
11-19
【JS实现简易贪吃蛇游戏】 在网页游戏中，贪吃蛇是一款经典的像素风格小游戏，玩家通过控制蛇的移动来吞噬食物，每吞噬一个食物，蛇的长度就会增加。这篇文章将介绍如何使用JavaScript来实现一个简单的贪吃蛇游戏。 ...
HTML 小游戏：简易版贪吃蛇
最新发布
01-02
HTML 小游戏：简易版贪吃蛇是一款基于纯HTML、CSS和JavaScript实现的经典游戏，无需任何额外环境配置，用户可以直接在浏览器中运行。这款游戏利用了Web技术的力量，为玩家提供了在网页上重温经典游戏的体验。 HTML...
JS简易贪吃蛇游戏.rar
08-29
总结，通过这个JS实现的贪吃蛇游戏，我们可以学习到JavaScript的基础语法、DOM操作、事件监听、对象和数组的使用，以及Canvas绘图技术。同时，也能锻炼问题解决和代码优化的能力。对于初学者而言，这是一个很好的...
HTML简易版贪吃蛇
09-14
用JavaScript和 HTML写了一个简易版扫雷游戏，大神勿喷，
html5简单贪吃蛇
09-06
刚开始学html5 然后用html5写了个最简单的小游戏 贪吃蛇
贪吃蛇HTML5代码
06-04
此段代码实现了简单的贪吃蛇网页版，用css、HTML5和JS完成
贪吃蛇网页版-HTML版
01-06
使用HTML实现的网页版贪吃蛇，实现较为简单，纯属用来娱乐！
简易贪吃蛇游戏代码.zip
07-04
简易贪吃蛇游戏代码是一款基于js跟html5封装的贪吃蛇，同时添加了css3颜色特效和背景图片，适合初级编程者学习。
纯JS版本贪吃蛇（绝对精美）
03-27
【标题】"纯JS版本贪吃蛇（绝对精美）"所涉及的知识点：...这个"纯JS版本的贪吃蛇"项目展示了JS在游戏开发中的强大能力，涵盖了前端开发的多个重要方面，对于学习和实践JavaScript的开发者来说，是一个很好的实践项目。
贪吃蛇（HTML+CSS+JavaScript）
weixin_60629460的博客
04-20 1855
js实现简易贪吃蛇
html实现贪吃蛇游戏(源码)
xcLeigh
11-01 4482
html实现贪吃蛇源码，酷炫的界面效果，点击开始游戏后，通过键盘的上下左右按键，操作移动方向，代码备注详细，一看就明白。
使用html+css+js写一段代码，实现贪吃蛇功能
04-25
好的，以下是使用HTML、CSS和JavaScript实现贪吃蛇游戏的代码： HTML: ``` <!DOCTYPE html> <html> <head> <title>Snake Game</title> <style> body { margin:0; padding:0; } #canvas { background-color: #ddd; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="snake.js"></script> </body> </html> ``` CSS: ``` #canvas { width: 400px; height: 400px; border: 1px solid #000; } ``` JavaScript: ``` // 获取 canvas 元素和绘图上下文 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 定义贪吃蛇和食物的初始位置和大小 var snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 }]; var food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }; var direction = "right"; // 初始方向为右 // 画布格子的大小 var gridSize = 20; // 定义画布中所有元素的颜色 var snakeColor = "#000"; var foodColor = "#f00"; var bgColor = "#ddd"; // 定义函数用来绘制一个方格 function drawGrid(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); } // 定义函数用来绘制整个画布 function draw() { // 清空画布 ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制贪吃蛇 snake.forEach(function (segment) { drawGrid(segment.x, segment.y, snakeColor); }); // 绘制食物 drawGrid(food.x, food.y, foodColor); } // 定义函数用来更新贪吃蛇的位置 function update() { // 根据当前的方向计算新的蛇头位置 var head = { x: snake[0].x, y: snake[0].y }; if (direction === "right") head.x += 1; if (direction === "left") head.x -= 1; if (direction === "up") head.y -= 1; if (direction === "down") head.y += 1; // 将新的蛇头加入到贪吃蛇的数组中 snake.unshift(head); // 如果蛇头与食物的位置相同，就吃掉食物并重新生成一个新的食物 if (head.x === food.x && head.y === food.y) { food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }; } else { // 否则，移除贪吃蛇的尾部 snake.pop(); } } // 定义函数用来处理按键事件 function handleKeyDown(event) { if (event.keyCode === 37 && direction !== "right") direction = "left"; if (event.keyCode === 38 && direction !== "down") direction = "up"; if (event.keyCode === 39 && direction !== "left") direction = "right"; if (event.keyCode === 40 && direction !== "up") direction = "down"; } // 注册按键事件的监听器 document.addEventListener("keydown", handleKeyDown); // 定时调用 update 和 draw 函数，实现动画效果 setInterval(function () { update(); draw(); }, 100); ``` 你可以将以上代码复制粘贴到三个文件中：一个是HTML文件，一个是CSS文件，一个是JavaScript文件。将这三个文件放在同一个目录下，然后在浏览器中打开HTML文件，就可以运行贪吃蛇游戏了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值