HTML5实战之《疯狂人参果》

最新推荐文章于 2024-09-11 10:10:41 发布

易辰惜

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量562

点赞数

分类专栏： html5游戏实战文章标签： html5 tangide 手机游戏移动开发 web游戏

本文链接：https://blog.csdn.net/dearm23/article/details/47080013

版权

html5游戏实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文分享了一款简单的HTML5手机游戏《疯狂人参果》的开发过程，讲述了如何实现游戏场景、角色动画、计时器及分数系统。游戏包括加载和开始界面，主角猴子通过接人参果得分，30秒内连续接到人参果分数递增。作者使用TangIDE作为开发工具，并提供了游戏完成后的体验链接和开发交流群信息。

摘要由CSDN通过智能技术生成

一转眼，在这一行业也有段时间了，从开始的懵懵懂懂，到现在看到一个项目，脑子里就会自然而然地会构思其中的功能怎么去实现，我想我是进步了，心里很高兴。

其实这个项目也很简单，在游戏中主要实现了场景里的树生长出桃子(我称它为仙桃)，和人参果，然后从树上掉下来，下面就是一个猴子(且称它为花果山的猴儿吧)搂着个篮子在下面来回地接，接中人参果就加分，接到仙桃游戏就结束。场景里还有一个计时，总共游戏时间是30秒，如果连续接到人参果就使加的分越高。下面就说说我是怎么实现这个游戏的。首先是加载界面和开始界面，这都很简单，在这里就不做详细介绍了。

这里主要介绍一下按钮的动画实现，这在平台的动画里可以设置。如图：

只要设置好水平和垂直的缩放变化就可以了。然后是游戏界面，游戏界面因为要有个游戏提示，所以我选择了颜色块，把它填充黑色，透明度为0.5就可以了，当然这个颜色块最后再添加也不迟。场景里仙桃和人参果的生成范围要在树的上方，所以我放了个颜色块作范围，猴儿的移动主要写了指针按下事件，当指针的点在屏幕左边的时候就给猴儿一个向左的速度，点在右边屏幕的时候就给猴儿一个向右的速度，当然还要考虑到达两边的时候要使猴儿停止，可以在它的移动事件里设置当它到达两边的时候设置速度为0.计时器因为数字有“：”号，所以要对分秒显示进行设置，我这里只有30秒。下面是游戏界面的参考代码：

窗口打开前事件：

this.resetGame();
var win = this.getWindow();
var monkey= win.find("猴子");
var underprop = win.find("underprop");
win.scoreBase = 1;
win.iphoneFlag = 1;//用于下方是否碰到
monkey.setPosition(win.w / 2 - monkey.w / 2,underprop.y - monkey.h);
win.times = 30;
win.score = 0;
win.find("ui-timer").stop();
win.find("ui-timer-general").stop();

var colorStone = win.find("area");
//取点函数
win.preparePoint = function (){
        var randX = Math.random() * colorStone.w + win.leftdownPoint.x ;
        var randY = Math.random() * colorStone.h + win.rightupPoint.y;
        var getPoint = {x:randX,y:randY};
        return getPoint;
};
//四边形的四个顶点
win.leftupPoint = {x:colorStone.x,y:colorStone.y};
win.rightupPoint = {x:colorStone.x + colorStone.w,y:colorStone.y};
win.leftdownPoint = {x:colorStone.x,y:colorStone.y + colorStone.h};
win.rightdownPoint = {x:colorStone.x + colorStone.w ,y:colorStone.y + colorStone.h};

指针按下事件：

var win = this.getWindow();
if(this.targetShape && this.targetShape.name.indexOf("提示页面") === 0){
    return;
}
var monkey= win.find("猴子");
if(point.x > win.w/2 && person.x < (win.w - person.w)){
    monkey.setV(4);
}
else if(point.x <= win.w/2 && monkey.x > 0){
   monkey.setV(-4);
}

指针松开事件：

var win = this.getWindow();
var monkey = win.find("猴子");
monkey.setV(0);

定时器事件(生成桃子和人参果)：

var win = this.getWindow();
var gainPoint = win.preparePoint();
function fallintSomething(sth){
    var fallingObj = win.dupChild(sth);
    fallingObj.setVisible(true);
    fallingObj.setPosition(gainPoint.x,gainPoint.y);
    fallingObj.animate("dap",function(){fallingObj.setDensity(1);});
}
var item = Math.random() > 0.5 ? "人参果" : "桃子";
 fallintSomething(item);

定时器事件(计时)

var win = this.getWindow();
win.times--;
var timer = win.find("倒计时计分板/剩余时间");
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.times === 0){
    this.stop();
    win.find("ui-timer-general").stop();
    win.score = win.find("分数计分板/分数").getValue();
    var initData = {score:win.score};
    win.openWindow("结束界面", 
    	function (retData) {console.log("window closed.");}, true, initData);

}