nNb480ZtZ6r0
为提高游戏体验，在游戏启动时会预先加载游戏使用的资源，同时显示一个表示资源加载完成百分比的进度条。那么我们该如何实现这种效果呢？来，我来手把手教你实现。 首先，我们看一下HTML页面代码 注意$(function(){……})中的代码，表示页面加载完毕后执行，效果和<body>标签中的onload一样。 此函数中主要代码执行流程：首先初始化canvas，然后加载资源，接下来绘制游戏画面，即执行runGame()函数。 initCanvas()函数创建并初始化canvas，代码如下： 此函数主要做了以下几件事：1、判断绘图客户区大小是否小于设计分辨率（4...
上次给大家介绍了如何实现资源加载进度条，资源加载完毕后就会进入游戏主界面。我们接着来实现游戏的功能——显示游戏主面板。 目前我们的数独游戏在资源加载完毕后就没有后续动作了，即游戏画面一直停留在进度条显示100%的画面，那么如何显示游戏主面板呢？很简单，更改游戏状态。嗯，还记得那个名字叫gxsGameState的类么？如果不记得了，我们一起来回忆一下他的模样 很明显，要想显示游戏主面板，只需要将游戏状态类的成员变量nState的值改为1即可，那么，我们在哪里改？如何改呢？ 因为游戏主面板是在游戏资源加载完毕后就可以显示了，所以应该在资源加载完毕的时候更改游戏状态。让我们来回顾一...
上次给大家讲了如何绘制游戏主界面及数字面板，今天接着往下面讲，如何生成默认固定数字。游戏开始之前，我们要在数字面板上随机初始化一些数字并显示出来，我们来看看该如何实现。 首先看看html页面代码 runGame()函数增加了一行代码g_oGameObj.initGame();此函数负责调用生成随机数字的函数，我们接着看它的代码 g_oGameData.genereateFixed()函数是在固定位置生成随机数的函数，它的代码如下： 首先将保存数字的aFixed数组初始化，接下来逐行逐列生成随机数字，并验证每一行、每一列、每3×3方块内是否有重复数字，最后在每一行内随机...
设想一下，你正在玩一款RPG游戏，在河中被BOSS追杀，还有2分钟BOSS就追上你，屏幕显示倒计时，你必须拼尽全力在2分钟内游到岸上……好了，让我们回到现实中来，如何实现计时效果呢？我来给大家详细介绍。 首先我们定义一个计时器类gxsTimer，用于游戏中的计时操作，代码如下： isTimeOut()成员函数用来判断上次计时开始时段到现在是否超出指定的时间间隔，如超出则返回true，否则返回false； 我们应该在什么地方调用计时器的init()成员函数呢？答案是在g_oGameObj对象的initGame()成员函数中，代码如下： 现在我们要实现计时效果，就需要不停地...
假设你正在玩一款角色扮演游戏（RPG），主角走进了一家店铺，你用鼠标点击店铺里管家，这时屏幕显示一个待售物品菜单，然后你可以选购你需要的物品。那么，你知道从你点击鼠标的那一刻起，游戏是怎样响应的吗？让我给你详细介绍其中的逻辑。 首先，我们抽象出鼠标点击事件的相关信息，重要的信息有三个，点击时的x坐标、点击时的y坐标，点击事件是否处理，并把它们定义到一个对象中，代码如下： 很明显，为保持代码封装性，需要编写两个成员函数对事件对象进行读写，相关代码如下： 其次，我们需要编写响应鼠标点击的事件代码。为简单起见，我让占据屏幕最大尺寸的canvas响应鼠标点击，如何将canv...
游戏中的按钮不难实现，但是如何实现按钮点击后的状态改变效果呢？例如：点击游戏中的一个按钮后，按钮凹陷下去，隔了简短的时间间隔后，按钮又弹起来，恢复原来的状态。这节课我们来实现按钮的这种效果，我们在游戏资源加载完毕后，资源进度条显示100%后，在资源进度条下面显示一个按钮，点击这个按钮后，进入游戏，显示游戏主面板。效果如下图所示 我们来看看游戏代码需要做哪些调整，由于资源加载完毕后并不自动切换到游戏主面板，也就是说资源加载完毕后需要显示资源加载进度条，所以，游戏的状态变量值需要变更，修改如下 既然游戏状态变量值更改了，那么，很自然，依赖此值绘制游戏场景的代码也需要做相应的...
什么是复合控件？就是将多个基本控件组合在一起，给用户提供更多交互功能的控件，例如：游戏中的设置对话框，可以用来更改游戏设置。那么，游戏中的自定义复合控件是如何实现的呢？我们先来看看本节课要实现的效果——数字选择框，一个由掩码图层和多个按钮控件组合而成的复合控件，运行效果如下： 当用户点击数字面板时，将弹出数字选择面板。好了，我们来看看游戏代码更改了哪些地方。首先，修改了数字面板响应鼠标点击的回调函数的代码，修改后的代码如下： 这个回调函数内主要是做以下几件事：1、清除事件标记，表示已事件（鼠标点击）处理；2、修改响应事件的索引层次序（数字选择面板所在层）；3、修改游戏状...
上节课给大家介绍了数字面板如何响应鼠标点击事件，在控件台打印一条消息表示对鼠标点击的响应。在实际游戏中，用户点击数字面板空白处后将显示数字选择面板，用户点击数字选择面板上的数字按钮后，将点击的数字填入数字面板。我们规定以下两种情况下不显示数字选择面板：1、用户没有点击数字面板空白处；2、上次填入数字后检验出重复数字。运行效果如下图所示： 这个截图中用户在第四行、第四列的空白处填入了数字9，导致行、列、块预警，即同一行数字9重复，同一列数字9重复，3X3块内数字9重复。下面我们先介绍如何显示数字选择面板。数字选择面板是在数字面板的回调函数中实现，代码如下： 我们看...
今天给大家介绍一下如何在游戏中实现对话框，我们先来看一下游戏中对话框的效果，运行结果如下： 对话框自带一个蓝色的掩码层，掩码层上面显示对话框，点击“确定”按钮将关闭对话框。我们将在游戏主面板中添加一个“显示游戏规则”按钮，用户点击此按钮后将显示“游戏规则”对话框。首先，我们需要对游戏主面板的代码进行修改，因为它新增了一个子控件——显示游戏规则按钮；接下来，还需要修改UI类的事件处理代码，父控件需要处理事件时，在子控件未能处理事件时不返回false（返回false将让下一控件处理事件），而是让子控件的父控件处理事件。我们先给游戏主面板添加一个表示父控件是否需要处理事件的变量bSel...
如何判断游戏是否通关？通关后如何重新开始游戏，让用户重玩？今天给大家详细介绍如何实现以上功能。先看一下数独游戏通关后的提示界面，截图如下： 首先，我们需要判断游戏是否通关，那么如何判断呢？有两个条件：1、数字面板已经全部填满；2、没有显示数字重复预警。游戏通关的流程如下：用户填入数字后，判断是否通关，如通关，则将计时暂停并将游戏状态改为5（表示通关），绘制场景函数将显示游戏通关及重玩提示对话框，用户点“重玩”按钮后游戏重新初始化。下面先看看通关判断函数的代码： 用户填入数字后，判断是否通关，如通关则更改游戏状态值为5。接下来看看judgeWin()函数的代码 ...
羊了个羊游戏从本质上来说是一个消除类的游戏，与其它消除类游戏不同的是，羊了个羊是一个立体的消除游戏，它将待消除的方块分布排列在多个不同的层内，只有所有层内的方块都消除了才能过关。有人说它的玩法与《3Tiles》极为类似，但这种玩法并不是最早的，最早将方块分布排列在多个层内再进行消除的是一款叫做《中国龙》的街机游戏。其玩法是将众多麻将牌随机分布排列在多个层中，拾起三个相同的牌即可消除，消除全部的牌即可通关游戏。 我写这个系列的文章不是教你如何玩羊了个羊，而是教你如何开发一个类似羊了个羊的游戏。羊了个羊这类游戏并不难开发，其难点在于如何实现一个关卡编辑器，即——如何将牌（或方块）分布排列到...