前几天写了一个JavaScript小游戏,大概是这样的

demo:strongfanfan.top/RunPig   

源代码:www.github.com/strongfanfan/RunPig

  画风简约(low),技术实现上很简单,但是细节还是耗费了挺长时间的,本文主要复盘一下思路,和碰到的一些自以为的难点。

一、基本html+css骨架

二、基本逻辑

   1、舞台相对定位,pig和障碍绝对定位,通过js动态对left,top赋值。

   2、定时器定时执行render函数,形成动画效果,帧率60,定时间隔1000/fps。

   3、运动计算,键盘输入控制pig,每次render读取键盘判断onmousedown事件触发,计算运动偏移量

   4、碰撞检测,每次运动计算后,getRange提取位置信息,遍历floor数组对比位置信息,返回y轴速度和位置

  基本就这样,下面讲一些实际调试中的问题。

三、碰到的坑

  1、临界值计算调了好几次才算是正确检测到,画图真是好东西 - -,觉得很简单的临界值,总是有地方写错。

  2、hitCheck,move,getrange三个函数设计好调用顺序再写。

  3、以后写完代码立即总结,我记得遇到好多坑,但是现在想不起来了,我的天。

小游戏runpig总结的更多相关文章

  1. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  2. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

  3. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  6. C语言-纸牌计算24点小游戏

    C语言实现纸牌计算24点小游戏 利用系统时间设定随机种子生成4个随机数,并对4个数字之间的运算次序以及运算符号进行枚举,从而计算判断是否能得出24,以达到程序目的.程序主要功能已完成,目前还有部分细节 ...

  7. Cocos2d-x 版本小游戏 《是男人就下100层》 项目开源

    这个是很久就开始动手写的一个小游戏了,直到最近才把它收尾了,拖拖拉拉的毛病总是很难改啊. 项目是基于 cocos2d-x v2.2 版本 ,目前只编译到了 Win8 平台上,并且已经上传到了商店,支持 ...

  8. Chrome 中的彩蛋,一款小游戏,你知道吗?

    今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...

  9. 软件工程:黄金G点小游戏1.0

    我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

随机推荐

  1. SwipeRefreshLayout嵌套ScrollView包裹复杂头布局和RecyclerView

    布局如下:上面是一个描述有:头像和部分信息的布局,底部是一个RecyclerView: 想法:想实现RecyclerView向上滚动的时候,隐藏上面的头像布局信息:使用了 CoordinatorLay ...

  2. 驱动开发学习笔记. 0.05 linux 2.6 platform device register 平台设备注册 2/2 共2篇

    驱动开发读书笔记. 0.05 linux 2.6 platform device register 平台设备注册 2/2 共2篇 下面这段摘自 linux源码里面的文档 : 内核版本2.6.22Doc ...

  3. HttpTool.java(在java tool util工具类中已存在) 暂保留

    HttpTool.java 该类为java源生态的http 请求工具,不依赖第三方jar包 ,即插即用. package kingtool; import java.io.BufferedReader ...

  4. XML约束之DTD

    XML文件的约束:什么叫约束呢?顾名思义,就是对xml文件的内容进行按照既定规则的限制.我们知道,因为xml文件的标签是可以自定义的,而往往我们用xml文件都是为了表达一定的数据集合(即小型的数据库) ...

  5. windows下安装composer抛出Composer\Downloader\TransportException异常解决办法

    1. 把默认的 secure-http 改成false composer config -g secure-http false 2. 修改配置文件 #修改全局文件(推荐) composer conf ...

  6. 十二 .ocBlock

    NSProxy是一个不继承NSObject的根类(尽管它遵守NSObject协议),调用[[NSProxy alloc]init]将会产生一个运行异常. 所幸,oc引入被称为“块代码”的第一级函数的概 ...

  7. Thinkpad 装 centos 7后发热量大处理

    原因:由于没有独立显卡驱动导致发热量大,禁用独立显卡去驱动即可. 步骤: 开机按 Fn+F1 进入BIOS. 选择 config 选项卡, 找到 Primary Display [SG] BIOS-- ...

  8. [译]关于iOS和OS X废弃的API你需要知道的一切

    原文: Everything You Need to Know about iOS and OS X Deprecated APIs 如你所知,已废弃(Deprecated)的API指的是那些已经过时 ...

  9. 一点一滴学shell-Shell expr的用法 (转)

    原文链接:http://desheng666.blog.163.com/blog/static/4908408220121643953425/ expr命令一般用于整数值,但也可用于字符串.一般格式为 ...

  10. C# 抓取网站数据

    项目主管说这是项目中的一个亮点(无语...), 类似于爬虫一类的东西,模拟登陆后台系统,获取需要的数据.然后就开始研究这个. 之前有一些数据抓取的经验,抓取流程无非:设置参数->服务端发送请求- ...