html5游戏开发实战-----大家来找茬

相信很多人都玩过大家来找茬,美女找茬之类的游戏,其实利用tangide我们也可以轻松开发出我们自己的找茬游戏.

tangide轻松实现了我们开发游戏简单,快捷的梦想,但是,不管是开发哪一类游戏,我们首先需要做的就是程序设计,我们拿到一个游戏的开发,不要一拿到手就马上啪啪啪的写代码,写到中途又不知道怎么去实现其中的功能,或者遇到其他什么问题让自己中断,这样的代码相信bug出现的概率相对要大很多.每当我们拿到一个case,首先我们就应该了解这个case主要实现哪些功能,把整体的框架设计好(当然,这部分很多项目都会有设计方案),然后我们需要了解项目的各项细节,想想哪些细节我们能一看到就可以马上写代码实现它,哪些我们需要花时间去研究才能实现.然后把那些难实现的统统找出来,好好想想怎么实现才是最简洁,效率最高的.当你实现这些功能后,在脑子里整体的跑一遍这一个项目,看看哪里还有不足的地方,加以补充.然后我们才可以开始写代码,磨刀不误砍柴功,相信经过上述的过程,你写起代码来会感觉游刃有余得多.

那么开始制作吧,首先新建一个项目,建开始界面,开始界面很简单,只需要添加两张图片，两个按钮，将音乐控件，音效控件放进去。将需要的音乐和音效分别放进音乐控件和音效控件里。

然后还需要建一个游戏界面和活动界面。

先做活动界面吧，只需要将对话框控件拖进场景里就可以，然后调整对话框的大小，属性，更改图片，添加几个Label控件输入相应的文字，在开始界面的活动规则按钮的点击事件里，打开对话框就可以，然后在对话框的按钮点击事件里关闭窗口，这样活动界面就完成了，而打开和关闭窗口的代码都可以用tangide的代码产生器自动产生。

//播放音效
this.playSoundEffect("按钮.mp3", function onDone() {console.log("play finished");});
var initData = {};
this.openWindow("游戏界面1", function (retData) {console.log("window closed.");}, true, initData);

var retData = {};
this.closeWindow(retData);

然后就可以布置游戏界面了。那么游戏界面就需要两张稍微大点的图，然后在图上相应的位置再加入商家的Logo图标，然后一个图片用于放时间，关卡数，还有生命值的数字，数字用三个图片字体，改好大小和字体路径等参数。当然时间需要计时器控件，因为我们有几个相同的场景，所以不需要重复的代码，只需要在一个场景里写成全局的代码就可以了。

var win = this.getWindow();
window.CommonProgress = function(win,el){if(el.name === "提示界面"){return ;}//错误次数剩余0次跳转if(win.errorCount === 0){var initData = {remainTime:win.overTime,HP:win.errorCount};win.openWindow("结束界面", function (retData) {console.log("window closed.");}, true, initData);}function delay(){setTimeout(function() {win.find("错误叉叉").setVisible(false);}, 200);  }if(el.name.indexOf("uppoint-") === 0 ||el.name.indexOf("downpoint-") === 0){//播放音效win.playSoundEffect("按对.mp3", function onDone() {console.log("play finished");});var index = el.name.split("-")[1];win.find("uppoint-" + index).setOpacity(1);win.find("downpoint-" + index).setOpacity(1);win.rightTimes++;}else if(el.name.indexOf("upimage") === 0 || el.name.indexOf("downimage" === 0)){//当点错时，剩余犯错机会减1//播放音效win.playSoundEffect("按错.mp3", function onDone() {console.log("play finished");});win.find("错误叉叉").setVisible(true);win.find("错误叉叉").setPosition(point.x - 15,point.y - 15);win.errorCount--;win.find("时间底纹图/生命值").setValue(win.errorCount);delay();}
};window.CommonProgress(this.getWindow(),this.targetShape);
//点对5次跳转页面
if(win.rightTimes === 5){var initData = {remainTime:win.overTime, HP:win.errorCount};win.openWindow("游戏界面2", function (retData) {console.log("window closed.");}, true, initData);
}

这里我在不同的地方采用的是直接放一张图片在那里隐藏，当点击的时候才会显示出来，点对了显示一个圈，点错了显示一个叉。这样就表示找到了正确的位置，而当点击其他的地方的时候表示点击错误，总共有五次错误的机会。然后在其他相同的场景里调用这个函数就可以了。

然后在计时器控件里的定时器事件中添加一些代码用于时间的控制。

var win = this.getWindow();
win.overTime--;
var timer = win.find("时间底纹图/时间");
win.times--;
var min = Math.floor(win.times / 60);
var sec = win.times % 60;
var minStr = (min >= 10 ? min : '0' + min);
var secStr = (sec >= 10 ? sec : '0' + sec);
timer.setValue(minStr + ":" + secStr);
if(win.overTime <= 10){//播放音效this.playSoundEffect("最后10秒倒计时.mp3", function onDone() {console.log("play finished");});
}
if(win.overTime === 0){var initData = {remainTime:win.overTime,HP:win.errorCount};this.openWindow("结束界面", function (retData) {console.log("window closed.");}, true, initData);
}

当然，相应的变量需要在窗口打开前声明或者定义。这样我的游戏已经成功了大半了，然后进入结束界面的编辑，结束界面很简单，我们玩游戏结束后会有一个相应的称号，这个用图片可以做，然后用时不同会获得相应的星星，这些都可以用图片做，因为要给星星一个运动的效果，所以我使用了动画，

点击小人位置就可以对动画进行相应的设置。在窗口打开前事件里判断一下用时多少设置等级称号，然后还可以添加多几个相应的场景，这样游戏基本玩成了，剩下的就是一些细节慢慢调整一下就可以了。怎么样，是不是很简单？那么来show一下成果。点击打开链接。

tangide----html5游戏开发神器，让你轻松开发，快乐编程。如有疑问可以添加我们的技术交流群（223466431），欢迎共同学习，共同进步。

html5游戏开发实战-----大家来找茬相关推荐

HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
[HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧
[color=ize:18px]一,筹办工做本次游戏开发需求用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(如今最新的版本是1.6.0). 引擎下载的位置:http: ...
HTML5 游戏开发实战｜黑白棋
黑白棋,又叫反棋(Reversi).奥赛罗棋(Othello).苹果棋.翻转棋.黑白棋在西方和日本很流行.游戏通过相互翻转对方的棋子,最后以棋盘上谁的棋子多来判断胜负.黑白棋的棋盘是一个有8×8方格的 ...
HTML5 游戏开发实战｜推箱子
经典的推箱子是一个来自日本的古老游戏,目的是在训练玩家的逻辑思考能力.在一个狭小的仓库中,要求把木箱放到指定的位置,稍不小心就会出现箱子无法移动或者通道被堵住的情况,所以需要巧妙地利用有限的空间和通道 ...
html5游戏开发实战第三章,我的启蒙--HTML5 第三章 Canvas
粗中细橡皮清屏 drow();functiondrow(){varcan=document.getElementById("myCanvas");//声明一个变量if(ca ...
HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
从踩坑到填坑|淘宝Web 3D应用与游戏开发实战
导读:本文是淘宝前端技术专家--徐乾伟(烧鹅)分享的淘宝 Web 3D 应用与游戏开发实战,这个话题在业界被谈及得比较少.今天将会从移动.3D.游戏三种交叉的话题来和大家探讨.接下来和小编一起从初试 ...

html5游戏开发实战-----大家来找茬

html5游戏开发实战-----大家来找茬相关推荐

最新文章

热门文章