利用JS实现贪吃蛇_js贪吃蛇

作者：weixin_40725706 | 2024-08-19 08:18:28

踩

js贪吃蛇

第一步：绘制地图利用JS输出表格。

第二步：产生蛇头和食物蛇头：红色食物蓝色。

第三步，通过js动态产生元素。

第四步，点击按钮时，让蛇头移动。

第五步：按下键盘上下左右时，改变当前蛇头移动方向。

注意解决如下贪吃蛇项目的几个问题：

1、食物的位置有可能会和身体重叠。

2、没有出界的死亡判定。

3、分数没跟随变化

4、如果出现蛇头吃到自己身体，出现死亡判定。

5、防止出现蛇头，反方向移动

注：代码段中有相关注释


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>617贪吃蛇</title>
		<style>
			*{               
				padding: 0;
			    margin: 0;
		     }
		     #map{
		     	width: 500px;
		     	height: 500px;
		     	background-color: pink;
		     	position: relative;
		     }
		     table{
		     	position: absolute;
		     	top:64px;
		     	left:0
		     }
		     td{
		     	width: 46px;
		     	height: 46px;
		     }
		</style>
		
	</head>
	<body>
		<h1 id="score">Score：0</h1>
		<button id="bt1">快</button>
		<button id="bt2">中</button>
		<button id="bt3">慢</button>
		<div id="map">
			
		</div>
		<script>
			//第一步：绘制地图 利用JS输出表格
			document.write("<table border='1' cellpadding='0'>")

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/1001449