首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    刚学会 TypeScript, 顺手做个贪吃蛇小游戏

    ,以及设置蛇头的位置 为什么要是蛇头呢?...this.scorePanel.level - 1) * 30) 由于我们的蛇有死亡机制,我们需要预先判断以下,这里也存在着 this 指向的问题,我们需要手动调整指向当前的类 在处理到这一步时,我们的蛇头已经能够移动了...检查吃到食物 现在我们的蛇头已经能够移动了,我们可以去触碰食物以及任何地方了,我们现在需要检查是否吃到食物,吃到食物会怎么样,执行什么函数 // 检查是否吃到食物 checkEat(X: number,...this.bodies[i] as HTMLElement).style.top = Y + 'px'; } } 我们通过循环,从蛇的最后一个蛇块开始遍历,让它的位置变成前一个蛇块的位置 这样就能一个接着一个移动了...在蛇移动的时候,第二节蛇身的位置应该是第一节的位置,蛇头的位置是value 的位置,当蛇头反向时,它的值就会变成第二节身体的位置 画个图好理解一点,圆圈表示蛇头即将到达的位置,右边的方块是蛇头 因此我们添加这段代码

    64640

    刚学会 TypeScript, 顺手做个贪吃蛇小游戏

    ,以及设置蛇头的位置 为什么要是蛇头呢?...this.scorePanel.level - 1) * 30) 由于我们的蛇有死亡机制,我们需要预先判断以下,这里也存在着 this 指向的问题,我们需要手动调整指向当前的类 在处理到这一步时,我们的蛇头已经能够移动了...检查吃到食物 现在我们的蛇头已经能够移动了,我们可以去触碰食物以及任何地方了,我们现在需要检查是否吃到食物,吃到食物会怎么样,执行什么函数 // 检查是否吃到食物 checkEat(X: number,...this.bodies[i] as HTMLElement).style.top = Y + 'px'; } } 我们通过循环,从蛇的最后一个蛇块开始遍历,让它的位置变成前一个蛇块的位置 这样就能一个接着一个移动了...在蛇移动的时候,第二节蛇身的位置应该是第一节的位置,蛇头的位置是value 的位置,当蛇头反向时,它的值就会变成第二节身体的位置 画个图好理解一点,圆圈表示蛇头即将到达的位置,右边的方块是蛇头 因此我们添加这段代码

    64310

    【网页游戏】Vue3 + Typescript 自己动手实现一个贪吃蛇

    不有了解帧循环的可以参考我下面这篇文章。...我们需要根据方向去修改蛇头的坐标,然后我们把蛇头的坐标放进蛇身体的数组的最后一个元素,然后再删掉蛇身体的数组的第一个元素。...因为蛇移动永远都是下一节的蛇身走到上一节蛇身的位置,这样视图上看起来就像是蛇在移动了。...这个就很简单了,只要判断蛇头的坐标和蛇身体是否一样就行了。当相同的时候我们往蛇身体的数组里 push 当前蛇头的位置,但是不删掉蛇尾的元素,视图上看起来就像是蛇增加了一节。 如何检测蛇的碰撞?...碰到边界的判断就是蛇头的坐标是否超过了行数和列数。碰到自己的判断就是蛇头的坐标是否和蛇身体的某一节重合。

    1.4K30
    领券