在本文中，我将从头开始用JavaScript构建一个简单的微信小程序游戏源码内核。玩家可以通过键盘控制点。每当红色圆圈碰撞时，它会得到1分，方块会移动到随机位置。
　　此应用程序的要求是HTML、JavaScript的基本知识以及HTML画布的一些先验知识。
　　完整源码：y.wxlbyx.icu
　　应用程序的文件结构如下所示：
　　index.html:包含HTML代码
　　script.js：包含应用程序的主要逻辑

　　画布被赋予了高度和宽度500px以及边框样式“实心”，因此我们可以清楚地查看它。它被赋予id’canvas’以从script.js文件中引用它。这就是HTML的全部内容。在浏览器中打开它，您会看到一个空白的空白框。那是我们的画布。
　　现在让我们进入脚本部分。最初，我们获得了对画布的引用，以便我们可以在其上进行绘制。

　　为了使用画布，我们需要引用画布的上下文。参数2d被传递，它指定我们在2D中工作。接下来，我们声明一些变量来保存我们的点、食物、分数、方向、速度等。每个变量的信息都在注释中。

　　现在我们准备好变量，我们初始化我们的点。最初，点数组是空的。它应该包含点的坐标。现在让我们这样做。

　　for循环从0到length.每次它向点数组添加一个圆圈，使圆圈正好位于前一个圆圈的左侧。为此，圆的x坐标每次减小(size*2)并且y坐标保持不变。在点准备好之后，我们调用setInterval带有两个参数的函数：一个调用每个间隔的函数和一个整数，它是以毫秒为单位的间隔。在我们的例子中，它是100。即每100毫秒调用一次函数draw。
　　该draw函数是我们程序的主要部分，魔法发生的地方。每100毫秒调用一次绘制函数，该函数清除画布，根据点的方向更新点的位置，然后重新绘制它。这发生得太快了，我们甚至都没有注意到。同时，它检查点和食物的碰撞并更新分数。

　　ctx.clearRect()方法在重绘之前清除画布。连续的for循环从点的尾部到头部（从最后一个索引到第一个索引）循环遍历点的圆圈。如果当前索引不是头部，则将其设置为其前一个圆圈。即最后一个圆圈占据倒数第二个圆圈的位置，倒数第二个占据倒数第三个的位置，依此类推……这样点看起来好像在移动。
　　如果当前索引是头部，首先它检查方向（在开关情况下）并根据该方向增加圆的坐标。
　　Right:增加x坐标
　　Left:减小x坐标
　　Up:减小y坐标
　　Down:增加y坐标
　　在添加和减去坐标之后，它应该被绘制在画布上，以便玩家可以看到移动的点。下面的代码用更新后的坐标绘制了点的每个圆圈。

　　现在点被画在画布上。但这不是唯一要绘制的东西，我们仍然需要绘制食物和得分。画食物类似于画点的圆圈。如果是食物，我们用红色填充它。下一个问题是检查碰撞。该函数checkCollission()完成这项工作并返回一个布尔值。它以两个圆圈作为参数，在我们的例子中，它是点的头和食物。

　　上述函数的逻辑非常简单。这是我们在学校学习的。首先，我们取两个圆的中心点之间的距离，并将其与它们的半径之和进行比较。如果更大：没有碰撞；否则：他们相撞了。插图将阐明这个概念。

　　如果checkCollission()返回true，则首先增加分数并将食物放置在0到画布宽度/高度之间的任何随机位置。random函数接受两个参数min、max，并在它们之间给出一个随机数。

　　现在我们已经走到了尽头。最后一块拼图是keydown事件处理程序。我们需要根据按下的键盘按钮来控制点的方向。

　　onkeydown每当按下一个键时都会调用处理程序。然后我们检查键是右、左、上还是下箭头并分配相应的方向。37,38,39和40是左、上、右和下箭头的键码（ASCII值）。现在保存文件并在浏览器中打开它。
　　代码还不行。这是因为，要使代码正常工作，timer应该启动，我们还没有完成。正如您所注意到的，计时器已设置为init()功能。因此，在代码的最后一行调用init函数，保存它，然后刷新浏览器。您可以看到一条移动的点，您可以使用键盘的箭头键来控制它。