小游戏runpig总结
前几天写了一个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总结的更多相关文章
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- C语言-纸牌计算24点小游戏
C语言实现纸牌计算24点小游戏 利用系统时间设定随机种子生成4个随机数,并对4个数字之间的运算次序以及运算符号进行枚举,从而计算判断是否能得出24,以达到程序目的.程序主要功能已完成,目前还有部分细节 ...
- Cocos2d-x 版本小游戏 《是男人就下100层》 项目开源
这个是很久就开始动手写的一个小游戏了,直到最近才把它收尾了,拖拖拉拉的毛病总是很难改啊. 项目是基于 cocos2d-x v2.2 版本 ,目前只编译到了 Win8 平台上,并且已经上传到了商店,支持 ...
- Chrome 中的彩蛋,一款小游戏,你知道吗?
今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...
- 软件工程:黄金G点小游戏1.0
我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...
随机推荐
- MLA Handbook for Writers of Research Papers笔记
MLA Handbook for Writers of Research Papers.7th ed.New York:MLA,2009.print.还有一本,留待阅读MLA Style Manual ...
- windows7内核驱动开发试验环境配置
首先配置环境参照这个: http://blog.csdn.net/qing666888/article/details/50858272 然后在win10里可能由于没有做测试签名因此一直没有成功加载驱 ...
- android中string.xml中%1$s、%1$d等的用法
今天在研究前辈写的代码的时候,突然发现string里面出现了<stringname="item_recent_photo">最近拍摄%1$s</string> ...
- Android 开发环境配置
转至:http://www.cnblogs.com/shangdahao/archive/2013/04/17/3025429.html Windows下的开发环境需要安装以下软件: Java JDK ...
- jquery制作省份城市地区多选控件总结
1.弹出的选择框有jquery直接放在body后面,以position:absolute绝对定位,top,left处理位置. 如果想让该选择框位于点选元素下面,则获取点选元素位置 var target ...
- SpringMVC结合easyUI中datagird实现分页
SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...
- NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...
- Brainstorm-the walkthrough example: Image Classification
(1) 运行create data,其中包括下载cifar10,并转换为hdf5格式(详见百度百科:http://baike.baidu.com/view/771949.htm#4_2): cifar ...
- ajax 请求如何解决乱码
今天遇到一个问题,有关ajax 请求中传输中文,遇到乱码的问题. 如下代码: function UpdateFolderInfoByCustId(folderId, folderName, custI ...
- slim框架中防止crsf攻击时,用到的函数hash_equals
1.防止crsf攻击的最多解决方案就是 为每个请求生成一个唯一 token ,验证来源于客户端 HTML 表单产生的 POST等请求 . 2.这个token默认放在session中. slim框架源码 ...