资讯专栏INFORMATION COLUMN

Canvas 实现一个简单的贪吃蛇

Jochen / 2094人阅读

摘要:点击预览在之前的代码风格,和样式上做了大调整,如下图,主要是美化了移动端移动端中间的圆点按钮是重新开始,周围的方向按钮和游戏手柄操作一样端键盘方向键控制本次得分历史最高分移动端端适配蛇的样式美化游戏设置障碍物源码关注我

Intro

点击预览
在之前的代码风格,和样式上做了大调整,如下图,主要是美化了移动端

Before

After

Start

移动端:中间的圆点按钮是重新开始,周围的方向按钮和游戏手柄操作一样
web端:键盘方向键控制

Technology stack

Typescript
rollup
yarn
canvas API

Done

本次得分

历史最高分

移动端、web端适配

Todo

蛇的样式美化

游戏设置障碍物

Review and issues

github源码
关注我

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108661.html

相关文章

  • 使用TypeScript和Canvas编写移动端贪吃大作战游戏

    摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...

    AlphaWallet 评论0 收藏0
  • 装逼最高境界---一行js代码完成一个简易版贪吃游戏

    摘要:有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛代码如下当前浏览器不支持标签游戏结束我不是来装逼的。 有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛!代码如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

    hidogs 评论0 收藏0
  • 装逼最高境界---一行js代码完成一个简易版贪吃游戏

    摘要:有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛代码如下当前浏览器不支持标签游戏结束我不是来装逼的。 有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛!代码如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

    vincent_xyb 评论0 收藏0
  • canvas 绘制贪吃游戏

    摘要:蛇类当中的保存当前蛇类的所有的方块。移动,根据保存的私有变量方向用来对数组中保存的方块对象进行更改还有一个苹果类。用于进行随机生成吃苹果,在移动方法中,如果蛇的头方块和苹果方块重合那么吃到苹果,重新调用生成苹果方法。 效果如下 showImg(https://segmentfault.com/img/remote/1460000018151831?w=1439&h=899); 代码 ...

    AlphaWallet 评论0 收藏0

发表评论

0条评论

Jochen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<