摘要：
断断续续地把Demo又写了一阵，终于把角色的冲刺动作完成了。冲刺的作用是使角色能够快速移动，闪避攻击或障碍。其完成效果如下： 首先，仍需要一些变量来表示角色的冲刺状态： 在角色处于地面的情况下，按下U键可以让角色进行冲刺，松开时角色停止冲刺，若持续按住则角色冲刺动作持续至dashLifeTime耗尽 阅读全文
摘要：
在上一篇《Canvas制作时间与行为可控的sprite动画》中已经实现了角色的左右移动，本篇继续实现角色的一系列动作之一：跳跃。先来看看最终效果： 要实现跳跃，必须模拟垂直方向的速度和重力加速度，由于Canvas中坐标系与平时见到的平面坐标系不同，向下为正，向上为负，故定义两个变量： 另外，还需要一 阅读全文
摘要：
在Web领域通常会用到一组sprite来展示动画，这类动画从开始到结束往往不会有用户参与，即用户很少会用控制器(例如鼠标、键盘、手柄、操作杆等输入设备)进行操作。但在游戏领域，sprite动画与控制器的操作是密不可分的。最近在写一个小游戏，涉及到很多知识点，于是打算把这些内容通过一些Demo总结出来 阅读全文
摘要：
最早开始调试移动端网页时，本人都是采取PC上改几行代码，手机上刷新一下看效果这种笨方法来开发的，效率低而且容易让人抓狂。最近偶然发现原来可以使用PC上的浏览器来调试移动设备，不由得感叹相逢恨晚。 工具： Chrome浏览器(PC) Chrome Dev浏览器(移动设备) 步骤： 在移动设备上安装Ch 阅读全文
摘要：
做这个小功能的初衷是让服务器合并压缩CSS和JS并将生成的文件返回客户端，从而减少HTTP请求。 页面中引用CSS和JS的方式一般采用下面这种形式： 这样会向服务器发送两个请求，如果引用的文件越多，请求数就越多，性能就下降得越多。 再来看另一种方式： 这种方式将需要请求的文件用逗号分隔，以参数形式发 阅读全文
摘要：
博客园默认的代码片段样式不太美观，特别是复制代码时会把前面的行号也复制下来，操作起来比较麻烦。最近看到一种使用CSS计数器来美化代码片段的方法，于是研究了一下计数器的使用，在此做个笔记。 这是官网的例子： 显示结果为： 通过上面的例子，css计数器的用法可谓一目了然，那么如何用在代码片段的样式上呢？ 阅读全文
摘要：
在Visual Studio 2010后续版本的安装界面中，可以发现一组小球在滑动表示安装程序正在进行： 于是尝试用CSS实现了一下。 首先需要建立用来表示小球的html结构： 用5个div分别表示5个小球，并加入样式： 之后需要考虑小球的运动效果，于是给样式circle加入缓动样式： 另外小球有先 阅读全文
摘要：
很多时候拿到的素材都是单方向的，需要将其手动翻转来达到需求，比如下面这张图片： 它是朝右边方向的，但还需要一张朝左边方向的，于是不得不打开PS将其翻转然后做成雪碧图。如果只是一张图片还好说，但通常情况下图片可能有多个动作，这种情况下工作量就大大提升了，非常费时费力。好在canvas中提供了scale 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(七)》中研究了恐龙与障碍物的碰撞检测，这一篇主要研究组成游戏的其它要素。 游戏分数记录 如图所示，分数及最高分记录显示在游戏界面的右上角，每达到100分就会出现闪烁特效，游戏第一次gameover时显示历史最高分。分数记录器由DistanceMeter 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(六)》中研究了恐龙的跳跃过程，这一篇研究恐龙与障碍物之间的碰撞检测。 碰撞盒子 游戏中采用的是矩形(非旋转矩形)碰撞。这类碰撞优点是计算比较简单，缺点是对不规则物体的检测不够精确。如果不做更为精细的处理，结果会像下图： 如图所示，两个盒子虽然有重叠部分 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(五)》中实现了眨眼睛的恐龙，这一篇主要研究恐龙的跳跃。 恐龙的跳跃 游戏通过敲击键盘的Spacebar或者Up来实现恐龙的跳跃。先用一张图来表示整个跳跃的过程： 下面通过代码来实现。首先注册键盘事件： 按下跳跃键后，执行startJump方法： 1 s 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(四)》中实现了障碍物的绘制及移动，从这一篇开始主要研究恐龙的绘制及一系列键盘动作的实现。 会眨眼睛的恐龙 在游戏开始前的待机界面，如果仔细观察会发现恐龙会时不时地眨眼睛。这是通过交替绘制这两个图像实现的： 可以通过一张图片来了解这个过程： 为实现图片的 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(三)》中实现了让游戏昼夜交替，这一篇主要研究如何绘制障碍物。 障碍物有两种：仙人掌和翼龙。仙人掌有大小两种类型，可以同时并列多个；翼龙按高、中、低的随机飞行高度出现，不可并行。仙人掌和地面有着相同的速度向左移动，翼龙则快一些或慢一些，因为添加了随机的速 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(二)》中实现了云朵的绘制和移动，这一篇主要研究如何让游戏实现昼夜交替。 昼夜交替的效果主要是通过样式来完成，但改变样式的时机则由脚本控制。 首先对游戏容器使用transition创建一个贝塞尔渐变： 渐变作用于两个属性：filter及backgroun 阅读全文
摘要：
在上一篇《Chrome自带恐龙小游戏的源码研究(一)》中实现了地面的绘制和运动，这一篇主要研究云朵的绘制。 云朵的绘制通过Cloud构造函数完成。Cloud实现代码如下： 主要的逻辑代码在Cloud的原型链中： 最后测试一下这个方法： 效果如下： 这样云朵就绘制好了。 阅读全文
摘要：
目录 Chrome自带恐龙小游戏的源码研究(一)——绘制地面 Chrome自带恐龙小游戏的源码研究(二)——绘制云朵 Chrome自带恐龙小游戏的源码研究(三)——昼夜交替 Chrome自带恐龙小游戏的源码研究(四)——绘制障碍物 Chrome自带恐龙小游戏的源码研究(五)——绘制霸王龙 Chrom 阅读全文
摘要：
很久以前就想着做一个游戏，但什么都不会又不知道从哪里开始，胡乱找来一些书籍和资料结果太深奥看不懂，无奈只能放弃。这一弃就是十多年，倥偬半生，眼看垂垂老矣，还是没能有什么成果。 近年来游戏引擎越来越多，相关资料也愈加丰富，使得游戏开发的门槛不再那么高了。特别是HTML5游戏，只需要一个支持HTML5的 阅读全文
摘要：
在研究代码时发现类似这样一段代码： 最初对于第5行不是很理解，为什么可以传一个this作为参数，并且最终还成功地执行了alert方法，毕竟this是一个构造函数而非具体的方法。 后来查阅了相关文档，发现关键之处在于handleEvent这个函数，该函数原本就存在于《DOM2级事件规范》中： 这个接口 阅读全文
摘要：
先复习一下用法： 各个参数说明： 用一张图来说明： context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 以下是w3school给的例子： 然而实际在运行中图片是不显示的，这是比较坑的问题，解决方法是将drawImage放入 img.onloa 阅读全文
摘要：
本篇是《canvas转盘抽奖的实现(一)》的另一种实现方法，主要通过css3的transform以及transition过渡来实现。 // <![CDATA[ (function() { var canvas = document.createElement('canvas'), a = docum 阅读全文