HTML5实战之《疯狂猜价格》

最新推荐文章于 2025-05-02 22:00:00 发布

易辰惜

最新推荐文章于 2025-05-02 22:00:00 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.youkuaiyun.com/dearm23/article/details/46923481

版权

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

3 篇文章

订阅专栏

拿到这个case的时候，我脑子里立刻就想起了一个节目，《幸运52》，相信很多人都看过这个节目，其中有个环节就是猜商品的价格，当时看着电视里那些嘉宾在猜的时候，李咏快速的报出高了，低了，正确这些词语的时候，心里真为那些嘉宾捏了一把汗，为那些猜错价格的人感到可惜。

没错，疯狂猜价格这个游戏就是根据这一思路来设计游戏的。首先，在屏幕上会展示一张商品的图片，因为都是高大上的商品，所以价格都上千了，每个商品下方都有一个被挡住的价格，总共四位数，每位数字都有三次猜选的机会，然后下方是0～9的数字，点选数字就可以猜测价格，点选的数字反映在被档的价格区上，当点选的数字比价格对应位上的数字大或者小时，分别在被挡价格的上方显示大了，小了的图片，并有相应的动画。直到在三次机会内猜中就可以了。下面来show一下成果：

http://www.i5r.com.cn/apprun-qqD99C785C03471A96016CE87CC2A03EFD%7C381436838570743.html 。

因为是制作模板，所以一些东西就不能在程序里写死，必须使用控件可以很直观的就修改，首先是游戏加载界面，

这里一共修改了两处图片，一个是苏宁电器，一个是小熊的图标，在商家订制该游戏时可以更换为商家的LOGO。然后小熊的运动是根据下方加载条的进度来的，所以就需要在加载条的内容改变事件里用代码实现，

var win = this.getWindow();
var moveLoGo = win.find("移动LoGo");
moveLoGo.setPosition(this.x + this.w * value / 100 - (moveLoGo.w >> 1), this.y - moveLoGo.h);

这样这个界面就完成了。

然后进入游戏开始界面，这里更简单，就一个开始按钮，一个活动按钮需要我们写几行代码，其他是图片，

这个界面甚至可以全部用图片做成，但是图片显示要设成自动。然后再新建一个场景用于游戏界面，建一个对话框用来做活动规则界面，然后在开始竞猜和活动规则按钮的点击事件里将两个场景打开就可以了，当然，这个代码可以用代码产生器直接产生。

然后是活动规则界面，

因为点击活动规则后，要让活动窗口有个蹦出来的感觉，在点击我知道了的时候要让界面渐渐缩小，所以就需要对对话框的颜色块进行动画设置，

图片左上角标出的小人儿那里就可以弹出对画框进行动画设置。然后就可以进入游戏界面进行布局了。

因为考虑到手机适应问题，所以我用了四个网格，一个用于点选的数字，一个是被挡住的价格，一个是用于显示比较的结果，最后一个是用于点错的机会显示。网格内用的都是图片，然后文字分别用几个不同的Label控件，输入商品名字和描述。点错的机会的两张图片可以设置在一个控件里，总共三个控件。图片的布局需要一致，要不然到手机上就会显示错乱。当然为了游戏效果，我在游戏界面也加入了动画，让它从上方掉下来，点对完价格后又回收回去，

以下就是全部的代码，仅供参考哦

var win = this.getWindow();
win.find("ui-sound-music-general").setValue(true);
win.playSoundMusic("Katy Perry - Part Of Me (Instrumental).mp3");
win.wrongTimes = 0;
var commodityPic = win.find("底块/猜选框/竞猜的商品");
win.picNum = 0;
win.setNum = 0;
win.numberShade = win.find("底块/猜选框/ui-gridup/底框" + win.setNum +"/边框" + win.setNum);
function onDone(){
   commodityPic.setBgImage(win.picNum);
   win.numberShade.setBgImage(0);
   for(var m = 1;m <= 3; m++){
       win.find("底块/ui-livegrid/生命值" + m).setBgImage(0);
   }
}
win.find("底块").animate("playdown",onDone);//播放底块下拉动画

win.buttonClick = function(posNum,num){
    var grid = win.find("底块/猜选框/ui-gridup");
    var resultPosX = [];
    for(var n = posNum;n <= posNum;n++){
        resultPosX[n] = (grid.x + grid.w) / (4 - posNum) + 70;
        console.log("resultPosX[n] = " + resultPosX[n]);
    }
    var price = [win.find("底块/价格0").getValue(),win.find("底块/价格1").getValue(),win.find("底块/价格2").getValue()];
    var thousands = Math.floor(price[win.picNum] / 1000);//千位数
    var hundreds = Math.floor(price[win.picNum] / 100 % 10);//百位数
    var tens = Math.floor(price[win.picNum] / 10 % 10);//十位数
    var units = Math.floor(price[win.picNum] % 10);//个位数
    var result = win.find("底块/猜选框/结果");
    win.find("底块/猜选框/ui-gridup/底框"+ posNum + "/边框" + posNum + "/数字").setValue(num);//设置相应位置的数值
    var value = win.find("底块/猜选框/ui-gridup/底框"+ posNum + "/边框" + posNum + "/数字").getValue();
    
    function cmpValue(values,nums){
        var initData = {wrongTimes:win.wrongTimes,picNum:win.picNum,setNum:win.setNum};
        var answer = win.find("底块/猜选框/答案/结果" + posNum);
        if(values > nums){
           //显示对象
         answer.setVisible(true); 
         answer.setBgImage(0);
         answer.animate("playmiss",function(){this.setVisible(false);});
          //result.setBgImage(1);
          win.wrongTimes++;
         // result.setPosition(resultPosX[posNum],grid.y - result.h);
          win.find("底块/ui-livegrid/生命值" + win.wrongTimes).setBgImage(1);
        }
        else if(values < nums){
            answer.setVisible(true); 
            answer.setBgImage(1);
            answer.animate("playmiss",function(){this.setVisible(false);});
            // result.setBgImage(2);
             win.wrongTimes++;
            // result.setPosition(resultPosX[posNum],grid.y - result.h);
             win.find("底块/ui-livegrid/生命值" + win.wrongTimes).setBgImage(1);
        }
        else if(values == nums){
            for(var j = 1;j <= 3;j++){
                win.find("底块/ui-livegrid/生命值" + j).setBgImage(0);
            }
           win.wrongTimes = 0;//错误次数复位
           result.setVisible(true);
           result.setBgImage(0);
           result.animate("playmiss");
           result.setPosition(grid.x + grid.w / 3,grid.y - result.h);
           if(win.setNum < 4){
               win.find("底块/猜选框/ui-gridup/底框" + win.setNum +"/边框" + win.setNum).setBgImage(1);
               win.setNum++;
               if(win.setNum <= 3){
                    win.find("底块/猜选框/ui-gridup/底框" + win.setNum +"/边框" + win.setNum).setBgImage(0);
               }
           }
           if(win.setNum >= 4 && win.picNum < 2){
               win.picNum++;
               win.setNum = 0;
               win.find("底块").animate("drawin",function(){
                   this.animate("playdown");
                   commodityPic.setBgImage(win.picNum);//改变商品图片到下一张
                   for(var i = 0;i<=3;i++){
                       win.find("底块/猜选框/ui-gridup/底框"+ i + "/边框" + i + "/数字").setValue(null);
                   }
                   //改变名字和描述
                   var name = win.find("底块/猜选框/名字" + (win.picNum - 1));
                   name.setVisible(false);
                   var describe = win.find("底块/猜选框/描述" + (win.picNum - 1));
                   describe.setVisible(false);
                   var nextName = win.find("底块/猜选框/名字" + win.picNum);
                   var nextDescribe = win.find("底块/猜选框/描述" + win.picNum);
                   nextName.setPosition(name.x,name.y);
                   nextName.setVisible(true);
                   nextDescribe.setPosition(describe.x,describe.y);
                   nextDescribe.setVisible(true);
                   win.numberShade.setBgImage(0);
               });//底块回收动画
            }
            else if(win.setNum == 4 && win.picNum == 2){
                //当第三张图设置完个位数时退出
                win.openWindow("结束界面", 
                	function (retData) {console.log("window closed.");}, true, initData);
            }
        }
        
        //错误次数达到3次退出
        if(win.wrongTimes === 3){
            win.openWindow("结束界面", 
            	function (retData) {console.log("window closed.");}, true, initData);
        }
  }
  switch (posNum) {
    case 0:
        cmpValue(value,thousands);
        break;
    case 1:
        cmpValue(value,hundreds);
        break;
    case 2:
        cmpValue(value,tens);
        break;
    case 3:
        cmpValue(value,units);
        break;
  }
};

疯狂猜价格，没有三四千，也不要一两千，只要998，真的只要998，今天不玩您明天就找不到了啊，998你玩不了吃亏也玩不了上当，玩不了北京一平方也玩不了出国游一趟，七巧板出品，质量保证~快来看看啦！ http://www.tangide.com/gamebuilder.php