听说刚学完JavaScript的你，找不到demo来练手？
听说刚学完JavaScript的你，找不到demo来练手？
文章目录
-
听说刚学完JavaScript的你，找不到demo来练手？ - 前言：
- 文件资源：
- demo的简单介绍：
- 布局：
- 效果图：
- 具体实现：
- html文件：
- css文件：
- 相关功能实现：
- 1.产生蛇头、食物div
- 2.使用定时器让蛇头动起来
- 3.通过键盘的上下左右键，实现蛇头的移动
- 4.定义两个数组
- 5.碰撞检测：以改变食物的位置
- 6.身体随之移动：
- 7.游戏结束
- 8.防止更新的食物位置与身体重合
- 9.得分增加
- 10.对按钮实现相关功能
- js文件：
前言：
这是本蒟蒻这周的web作业，开始觉得选贪吃蛇可能会有点小难，但是自己看了看网站的一些视频后，发现似乎还是挺有意思的，于是打算分享出来，希望对刚学完JavaScript基础知识，正愁没有demo来练手的小伙伴有些许帮助。
文件资源：
资源位置
因为比较简单，所以没有设置c币，只希望大佬留个赞再走呗；
demo的简单介绍：
前言中也提了句，这是一个web版的低配版贪吃蛇单机小游戏
（看到前面那么多前缀，就知道，这真的只是一个demo，因为实在是太低配了）
这是的蛇头，食物、身体都是通过div实现，所以就比较简单了。
这里的JavaScript用的是jquery框架，因为还是可以稍微少点代码量（哈哈哈）
布局：
效果图：
既然选好目标后，我们首先当然是得确定布局：
这是最终需要的效果图。
具体实现：
那么怎么实现呢：
1.地图：
身体，食物都要大小一致，我们还是比较容易想到用table标签，但是table下面不能创建div，这是我们需要注意的。所以我们需要另外开一个div表示真正的地图：这样就可以在地图开生成食物和蛇头了。
但是我们会发现table标签和真正表示地图的div不能重合，于是我们可以用绝对定位，使其重合
2.得分显示区域：
直接用一个div下面封装一个span标签即可，方便之后修改它的值
3.改变速度按钮区域：
直接用四个buton标签即可
4.游戏说明区域：
一个p标签即可
于是html文件和css文件就出来了：
这里对于table的创建，就别一个个cv…
vscode下直接table>tr20>td40按回车即可，
其他操作可以看下面博客：
https://www.cnblogs.com/summit7ca/p/6944215.html
html文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇title>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script src="index.js" type="text/javascript">script>
head>
<body>
<table>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>