Yorhom's Game Box

一，准备工作本次游戏开发需要用到lufylegend.js开源游戏引擎，版本我用的是1.5.2（现在最新的版本是1.6.0）。引擎下载的位置：http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar引擎API文档：http://lufylegend.com/lufylegend/api首先为了开发方便，我们得先建立一个叫

在上一篇文章中，我们研究了一下Box2dWeb的锁链效果，当我研究出来以后，我便突发奇想地想用这一效果制作一个越野自行车小游戏。于是呢便对此研究了一番。今天就先来研究一下越野自行车里的地形。一，准备工作首先你需要下载lufylegend和box2dweb 这两个引擎。1，什么是刚体说实话，这个刚体是什么我也不是很清楚，我们不妨把它当成一个现实生活中的物体？刚体其实还有一个比较详细的解释，这个解释来自《HTML5 Canvas游戏开发实战》一书：刚体表示十分坚硬的物质，它上面任意两点的位置都是完全不变的，它

在box2dweb中，要想使刚体移动，不能单纯地改变x、y坐标。其一，这样会使你的游戏失去了物理运动的效果；其二，在box2dweb中，直接调整刚体的位置是一个十分不好的方法，会违背物理运动原理，只有在刚体创建前的时候才用这个方法。所以在我们的自行车创建出来以后，想要移动刚体，最好的方法就是给刚体施加一个力。在box2dweb中，施加力的方法有：ApplyForce、ApplyImpulse、SetLinearVelocity。本次使用的只有ApplyForce。其余的几种可以暂且不管。如果你确实想了解的

这几天放寒假了，时间也多了起来，当然又有时间搞搞程序了。哈哈~昨天在开发我的塔防游戏时突然发现人物实际攻击范围比规定的范围小，按理说应该是一样大的，但偏偏不准，我被这个问题搞得糊里糊涂的。最后询问了一个程序高手——我哥哥。他虽然是搞C++的，但听了我代码解释中有检测圆形碰撞时，他立刻就发现了问题，他告诉我，敌人可以看作是方块，而攻击范围是圆的，如果把敌人弄成圆形进行碰撞检测那必然不准，应该检测

最近做Box2dWeb开发时，想写个创建正多边形的功能，可是由于学识尚浅，我在草稿纸上画了，想了一个上午也没有研究出什么好方法。后来翻抽屉的时候，找出了以前哥哥画的一张用同心圆画椭圆的示意图。看到这幅画，我不禁在想椭圆不就是一个N边形吗？圆不就是一个正N边形吗？如果把两个同心圆的半径设定为相等，画出来的椭圆不就是一个圆吗？因此，我立刻开始实验。原本我以为比较难，会用到圆的解析式之类的，没想到就45行代码就搞定了，主要用到的数学知识就是sin和cos。

HTML5中没有关于链接的API，所以我们只有自己来实现了。首先，我们来想一下，链接有什么特点。第一个想到的估计就是它能跳转，这是链接最显著的特点，当然这也是废话，要不怎么能叫链接？第二个想到的可能就是文字下方的下划线；第三可能就是当鼠标盘旋在它上空时，鼠标要变成一只手。这些都不难实现，因为跳转可以用window.open()来实现，下划线用html5 canvas API就能实现，更改鼠标的样式用css改就OK。接下来就来讲一下如何实现这些。本次开发依然用到了开源引擎lufylegend，引擎的一些信

由于我写这个示例只是为了娱乐一下，所以没有写一句注释（在下实在是太懒了……），为了方便大家理解，我说一下整个游戏的制作过程和设计方式。首先，我们的游戏主体应该是一像模板样的东西，数据和这些模板分开，要用到数据时，将数据引入然后然后通过固定的模板实现相同的作用但不同的效果。举一个例子，假设我们这些程序员有一天穿越到了古代，成为了比程序员还苦的炼钢工人（我可没有诅咒大家啊）……为了方便炼铁，工厂给我们准备了几个模子，我们只用将不同的铁水倒进这个模子，然后等它冷却，就能打造出材料不同但造型相同的武器（也不知道古

最近有的朋友说他们很喜欢原生的javascript的代码，不喜欢看用引擎封装后的，所以希望我写一些原生html5代码。于是我原本就准备在这篇中讲讲用原生html5写游戏，但是写过来写过去发现还得用到lufylegend中的一些原理。于是就想到可以讲讲lufylegend中的一些原理。毕竟知道原理比只知道用法好得多。首先我们得看看lufylegend引擎的介绍。【lufy在以前的文章中也提到过lufylegend的原理，但我个人认为介绍地不详细，没有说清楚原理，后来我自己慢慢看，才看懂了一些。所以我希望我能

本次来说一说如何利用lufylegend.js引擎制作一款html5游戏后将其通过Qt转换成EXE程序。步骤其实非常简单，接下来就一步步地做一下解释和说明。首先我们来开发一个有点类似于太空大战的游戏，游戏截图如下：游戏介绍：这个游戏原本是七十一雾央前辈用Cocos2d-x开发的android小游戏。由于我看到这个游戏实现起来比较简单，因此就把apk下载下来，并且在雾央的指导下，把它当r

上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方：http://blog.youkuaiyun.com/yorhomwang/article/details/7984576一、图片准备今天我准备换几张图片，这样更新鲜些。pic1.pngpic2.pngpic3.pn

是英雄就下100层是一款经典的手机小游戏，以前是在诺基亚手机上十分有名。今天我们就用html5和lufylegend一步步地实现它。一，准备工作首先，你需要下载lufylegend，下载地址如下：http://lufylegend.googlecode.com/files/lufylegend-1.7.0.rar接着你需要了解lufylegend，API介绍如下：htt

一、前几章的位置 Javascript做模糊查询-数组无双(一)-循环不能不重视http://blog.youkuaiyun.com/yorhomwang/article/details/7855991Javascript做模糊查询-数组无双(二)-完美的调用筑造最后的成功http://blog.youkuaiyun.com/yorhomwang/article/details/7855997

这是一款益智类小游戏，通过点击屏幕使方块跳起从而躲过迎面而来的障碍物。游戏中设置了保存最高纪录的功能，看看自己能否超越自我，挑战极限。至于游戏名称为什么叫《真方块无双》，我想大概是因为玩了半个月《真三国无双》的原因吧，一时灵感一现就想到了这个名称。哈哈（也不知道Koei会不会因为模仿他的品牌而罚我的款）

了解localStoragelocalStorage是最新的HTML5中的新技术，它主要是用于本地储存。最近看了看localStorage，发现比cookie好多用了，还比cookie简单多了。于是我到这里来和大家分享一下。一、介绍本地储存这东西历史可长了，先是从cookie开始，中途还有什么userdata，flash，Gears，最后到了现在总算找到了我满意的了，那就是lo

徐家破镜昏如雾。半面人间露。等闲相约是看灯。谁料人间天上、似流星。朱门帘影深深雨。憔悴新人舞。天涯海角赏新晴。惟有桥边卖镜、是闲行。——宋·刘辰翁·《虞美人》流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现。不过流星很少见，至少我没有见到过，因此从来没有对着它许愿。最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果。因此今天就来实

以前用javascript实现过令文本逐字输出的效果，今天我来用html5中的canvas实现一下。canvas里的内容可不像那样好操作，首先，你需要懂得一些html5的API才能操作canvas，而可以用DOM直接操作，相对而言，canvas还是要比复杂些。那么本篇就为大家讲述如何令文本逐字输出。首先我先说明，本篇我不打算用任何引擎，因为今天我们是来研究技巧和原理的。一，原理做一个富

一、前言本次教程将向大家讲解如何用html5将小地图块拼成大地图，以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。首先让我们来了解了解如何用html5实现动画，毕竟“动静结合”是先有动再有静。看了上一章的内容，或许你就有了对html5实现动画有了初步了解：html5游戏开发--"动静"结合(一): http://blog.youkuaiyun.com/yorh

很久又没写博客了，一者是因为要上课，平时没有什么零碎的时间研究新东西；二者最近在开发一款塔防游戏，有整块的时间都拿去开发这个项目了。因此最近没有什么好的东西和大家分享。这周末看在游戏快完工的份上，抽出了半天的时间研究了一下html5幻灯片制作，效果还不错，展示如下：首先是一张《真三国无双7》关云长的头像其次是《真三国无双7》貂蝉的头像切换时的效果怎么样？效果

今天我突发其想，想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。由于本次是偶自娱自乐，所以代码就不多讲了，只讲一下Shape.js和BootPage.js的用途。Shape.js是用来绘画我们iphone手机外壳用的类，而BootPage.js是开机界面的类。两者的功能不同，相当于Shape.js用来处理硬件外观，BootPage.js用来处理显示。其他的就留个大家自己看吧。虽然代码有点

一，什么是TicTacToe（井字棋）本游戏为在下用lufylegend开发的第二款小游戏。此游戏是大家想必大家小时候都玩过，因为玩它很简单，只需要一张草稿纸和一只笔就能开始游戏，所以广受儿童欢迎。可能我说了半天，对它名字不熟悉的朋友也不懂我在说神马。那没关系，我就引用Wiki（维基百科）的介绍作为大家对它名字的认识，顺便也勾起我们儿时的回忆：井字棋，大陆、台湾又称为井字游戏、圈圈叉叉；另

什么是卷轴玩过RPG或者横版格斗的同学应该知道，人物走到屏幕中央后，由于地图过大，地图会进行移动，人物则相对静止不动。这个就是传说中的卷轴。有了以上的简介，大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来，我们就利用lufylegend.js游戏引擎来实现这个效果。原理介绍其实实现这个效果的关键在于如何使人物静止，何时移动地图，以及如何移动地图。

好像哪位老师曾说过，音乐是世界通用语言。是的，听不懂英文，但总能欣赏英文歌吧。很早以前就想做个音乐播放器，但是由于跟随歌曲显示当前歌词的效果一直实现不了，所以我的想法一直无法实现。不过，最近创意不佳，没心情开发游戏了，于是闲下来搞点小发明。这次就先模仿一下手机QQ音乐中歌词显示效果。恰巧，年末新歌蛮多的，于是我就选了一首比较好听的歌曲——手写的从前。不难发现，在这里，除了前三行，方括号代表的不是区间而是时间。在前三行中，方括号里的内容分别代表：歌曲名，演唱者，音乐长度。但是这些算不上歌词吧，所以真正要

最近数学预习到选修本的定积分，前一向用它解决了物理上的正弦交流电有效值问题，前几天突发奇想，想用它来计算圆周率。于是我花了半节物理课的时间研究了一下，得出了以下求解方法。首先我们知道半径为r，圆心为(0, 0)的圆的方程是：x^2 + y^2 = r^2 不过这个是个方程，无法使用积分求解，所以我们要对它进行变形，变成一个函数。根据本人多年刷题经验，要把其变为函数，只需取一个半圆即可，获取半圆则需将其变形

一，前言本游戏是鄙人研究lufylegend数日之后，闲暇之余写下的。本游戏运用全新的技术html5写成的。游戏引擎为国产的lufylegend.js，大家可以去它的官网看看。游戏处于测试阶段，希望各位为游戏提点意见。另外游戏中的拼图是随即分配，保证游戏的随即性。 二，怎么玩？下载地址（含原码+图片）：http://files.cnblogs.com/ducle/Puzzle.

本游戏是一款另类塔防游戏。本作以三国这段历史为题材，提供了从颍川之战到官渡之战，官渡之战到夷陵之战，夷陵之战到五丈原之战等15个关卡。在每个关卡中，你会控制一名三国武将与出现的敌军进行交战以此保护你的主公；同时，你还可以召唤出你的友军，与你并肩作战。 除此之外，本作还提供了人物对话，以及火计、水攻等计谋，使游戏可玩度更高。与此前相同，本作依旧是HTML5和Javascript作为开发语言。

游戏简介Flying Stone是一款模拟抛物运动的休闲小游戏。游戏中，玩家通过轻敲屏幕，抛出系在旋转杆上的石头来袭击飞出的小乌鸦，以此得分。小乌鸦以不同速度和轨迹飞出，击中后得分也会有所不同。游戏限时90秒，游戏结束后会在服务本游戏目前支持Android版和在线版。如何开始访问游戏主页，你可以在其中找到所需的版本：http://wyh.wjjsoft.com/page

本文翻译自@sevenson的文章Separating Axis Theorem (SAT) Explanation 。原文作者用的是ActionScript 3来编写算法，不过文中主要讲述的还是算法原理，我想一旦算法原理被我们掌握了，选择什么编程语言来实现算法都是次要的事情了。 本人并非英文专业，所以文中翻译得有不妥或疏漏之处，欢迎各位指正，谢谢！正文如下：分离轴定理（英文简称SAT）是一项用于

初学lufylegend.js之日，我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏，还写了篇博文来炫耀一下：HTML5小游戏《智力大拼图》发布，挑战你的思维风暴。不过当时初学游戏开发，经验浅薄，所以没有好好专研游戏里的算法和代码的缺陷，导致游戏出现了很多bug，甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏，希望我能把代码里的bug改一下方便初学者学习

吕蒙曰：士隔三月【1】，当刮目相看。所以，在下在这三月中发奋图强，花了约莫8节信息课的时间研究扫雷。呜呼，由于在下才能尚且不足，所以也就只能勉强打过中级难度的吧。不过，一边玩的同时，我还一边对扫雷这个游戏的制做方法构思了一下。所以说，本文中的算法完全是凭借自己对扫雷游戏规则的总结而自行研发出来的，倘若和MS的扫雷玩法有些出入，还望各位看官见谅

在实现这个效果的时候，我想到了两种方案。方案一：在炸弹刚体爆炸时，由炸弹刚体为起点，向四周喷散小刚体，这些小刚体会被喷射到附近的刚体上，对附近的刚体施加力，然后力是物体运动状态改变的原因（摘自高中物理必修一），然后爆炸效果就可以完成了。这个方法比较简单，但是我觉得有点dirty way。像我这种耳机标有R的必须带右边，标有L的必须带左边的人，怎么可能就此满足了呢？当然，感兴趣的朋友可以自己尝试一下这种方法～方案二：首先想办法把炸弹刚体周围的其他刚体找到，然后对它们施加一个力，我们只用控制好力的方向就可以

天花无数月中开,五采祥云绕绛台。堕地忽惊星彩散,飞空旋作雨声来。怒撞玉斗翻晴雪,勇踏金轮起疾雷。更漏已深人渐散,闹竿挑得彩灯回。记得每年过春节的那段时间，除了欣赏隆冬的景色，剩下的就是欣赏天空中美丽的烟花了。成都的冬天，天空中总是灰蒙蒙的，像是织了一层薄薄的轻纱，把阳光挡走了一部分。路边的枫树上，没有了夏日整天“知了”，“知了”的小家伙，是否有鸟儿，我却也忘了。树上的枫叶寥寥无几，可能是在某一时候，悄无声息地飘落了；有时路过一棵年岁已高的树，也不知是地球引力还是什么的原因，一片叶子会自然地落下来，不留神

JavaScript实际上是一种弱类型语言，与C++和Java等语言不同。因此，在JavaScript中，没有强调类（class）这一概念，但实际运用中，类还是很重要的，比如写一款游戏，如果我们不停地调用函数来完成创建角色，移动角色的话，那会是什么样的呢？可能会出现非常多的重复代码，因此我们需要一个类来统一这些代码。所谓的类，就是把程序中的代码分类，比如说游戏中的关于角色的代码算作一类，游戏背景算作一类，游戏特效又是

刚过完春节，想必大家收到了各种祝福和贺卡吧～Y某我今年也为同学和家人准备了贺卡。不一样的是，我的贺卡可不是made from树，而是一行行代码凝聚而来的。考虑到本次开发需要的功能不多，所以就没有用库件了，利用纯Html5 Canvas API来完成本次梦幻之旅：节日贺卡。虽然用到的Canvas API不多，但是效果还是蛮理想的～每次写博客和大家分享技术的时候，我都会先把原理介绍给大家，因为这样一来，大家对下文中的代码理解起来就快多了。所以原理很重要，得作为第一个研究话题。无论是在测试地址里还是截图中，

用过锤子的人都知道（如果你没用过，而且也不知道怎么用，建议你去问问雷神索尔），要砸碎一个自行车该怎么砸呢？如果你不会，我教你三招吧：法一：使劲砸；这种方法适用于你想换把锤子法二：到阿斯嘉找雷神大哥去，这个速率最快，估计不到抽完一根烟的工夫，你的自行车就只剩原子了法三：去某个地方把锤子换成螺丝刀等工具，然后把你那自行车零件一块一块地给卸下来显然，这三种方法各有所长，不过既然我们的自行车是一块一块地拼起来的，那么还是一块一块地给拆了好，于是，我选择了3（实际上是因为Box2dWeb没有锤子这玩意，也认不

最近在scratch社区逛的时候，发现了一位国外牛人设计的一个动画portals。在这个项目中，所有圆圈根据三个参数的调控进行一系列美妙的运动。我看这个项目挺有趣的，于是就用html5模仿了一个，不同的是，为了使动画更连贯，我采用了自动变更参数的方式来使整个动画播放过程完全自动化核心代码这些圆圈的运动轨迹由三个参数和一个函

最近开始研究Box2dweb，Box2dweb是一款物理引擎，主要是对物理刚体和关节连接进行了封装，box2dweb很强大当然也有些复杂，不过幸好lufylegend.js做了这方面的封装，在制作时如果用lufylegend配合Box2dweb，那就简单多了。要学习box2dWeb我还是给大家推荐拉登大叔的博客，地址：http://www.ladeng6666.com/blog，写得相当好，话说他

前面我们看到的机器人就是通过这个类来实现的。但是正如学过生物必修一的同学都知道，动物生命层次是这样的：个体->系统->器官->组织->细胞，我们的机器人就是个体，那么四肢构成运动系统，以此类推。所以我们的这个Robot类就只是个装载头部，身躯，四肢的容器。在上面给出的文件结构中可以看到，还有Head.js和Body.js这些类，他们的实例化对象就是放在Robot这个个体里的部件了

今天来学习下HTML5 Canvas颜色动画。什么是颜色动画呢？以我的理解就是以某种颜色过渡到另一种颜色。和这个效果有点类似：http://w3school.com.cn/tiy/t.asp?f=css3_animation1 上面的demo是用css3实现，而我们今天要用的是Canvas。Canvas并没有相关的API，所以要想实现这种效果，只有靠自己了。从上面的例子可以看出，我们需要完成缓动动画和颜色变化这两个基本效果，再将这两个效果组合一下，就是我们要的结果了。实现颜色效果的原理其实很简单，就是通

本篇为《『HTML5挑战经典』是英雄就下100层-开源讲座》第二篇，需要用到开源引擎lufylegend，可以到这里下载：下载地址：http://lufylegend.googlecode.com/files/lufylegend-1.7.1.rarAPI文档：http://lufylegend.com/lufylegend/api却说我们的英雄能顺利地从天而降了，不过丝毫没有悬念，他

开言：在RPG游戏中，如果有地图切换的地方，通常就会使用幕布效果。所谓的幕布其实就是将两个矩形合拢，直到把屏幕遮住，然后再展开直到两个矩形全部移出屏幕。为了大家做游戏方便，于是我给这个引擎加了这么一个类。本系列文章目录：如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现http://blog.youkuaiyun.com/yorhomwang/article/details