利用JS实现贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布

正在努力加载...

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量3.6k

点赞数 3

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_63489869/article/details/125423214

版权

第一步：绘制地图利用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'>")