【原】我是超級收銀員，你敢來挑戰嗎

微信在最新的iPhone版應用中運營刷卡功能，為了推廣該功能，小組成員自主開發了簡單的超級收銀員小游戲。第一次寫前端游戲，嚴重意識到js寫少了，趁這次惡補下，畢竟還年輕，感覺老了腦袋不好使。今天給大家分享本次游戲的學習成果，有興趣的同學先掃描二維碼挑戰。

目錄：

• 游戲思路
• 游戲場景
• 核心代碼

 

游戲思路

本人很喜歡玩游戲，也玩過不少小游戲，5月份的時候我接觸了手游《刀塔傳奇》，好玩、有趣味性，讓自己又愛又恨投入了時間和金錢，享受其中的樂趣，相信“好玩”和“商業化成功”是做一款游戲的目標，對於超級收銀員游戲，市場上類似的有很多，而我們的目標很簡單，只想把超級收銀員做成一個好玩的小游戲，更有趣味性，思路如下：

玩法簡單

游戲界面隨機出現不同物品，點擊條形碼格加分，其它減分。

易上手

隨便玩一二局游戲就知道怎么玩，學習成本低。

趣味性

游戲UI風格幽默，如鳥被擊中后爆炸。

虐心

游戲從一開始簡單快速到困難，容易出錯，用戶不服輸。

分享文案拉仇恨

大部分用戶第一次玩得的分數低於40，被授予“水貨收銀員”的稱號，並被全球50%以上的收銀員打敗，求朋友來幫忙報仇；

分數大於40，被授予“超級收銀員”的稱號，求朋友來超越；

通過用戶傳播、推廣。

 

游戲場景

來自咸菜大師的作品，微信版截圖，原版界面更好看- -

 

核心代碼

1.隨機生成物品

九宮格中，隨時出現物品，函數如下：

//產生隨機數，例如從1~9數字中隨機選擇3個，getRandom(3,9)
function getRandom(count,totle){
    var arr = [];
    var tmp;
    while(arr.length < count){
        tmp = parseInt(Math.random() * totle);
        if(arr.indexOf(tmp) == -1){
            arr.push(tmp);
        }
    }
    return arr;
}

 九宮格中，隨時為li標簽添加class：

var time;//游戲時間
var interval;//游戲運行的頻率
//隨機顯示卡牌，剩余時間越少，卡片的切換速度和數量的遞增
function _updateInterval(){
    //隨機選擇class 並隨機為選擇的li添加該class
    $("body").find(".game-main li").removeClass();
    var prize_config = ["bird","code","code","code","bird","code","bird","code","card"]; 

    if((interval >= 800)){
      var classname_arr = getRandom("1","3");
      var li_arr = getRandom("1","9");
      for(var i = 0; i < 1; i ++){ 
        var li_randomName = prize_config[classname_arr[i]];
        var li_randomLi = $(".game-main li")[li_arr[i]];
        $("body").find(li_randomLi).addClass("ico-"+li_randomName);
      }
    }

    //此處省略代碼...

    if((interval < 50)){
      var classname_arr = getRandom("8","9");
      var li_arr = getRandom("8","9");
      for(var i = 0; i < 8; i ++){ 
        var li_randomName = prize_config[classname_arr[i]];
        var li_randomLi = $(".game-main li")[li_arr[i]];
        $("body").find(li_randomLi).addClass("ico-"+li_randomName);
      }
    }

    //循環自身
    time_out = setTimeout(arguments.callee,interval);
}

2.時間、分數控制

var time_minus;
var time_out;

//時間控制
function prize_time(){ 
  time_minus = setInterval(_countdown,1000);
  time_out = setTimeout(_updateInterval,interval);
}
function _updateTime(minus){
  time -= minus;
}
//游戲時間更新
function _updateCount(){
  $("#game_time").text(time);
}
//游戲時間減少
function _countdown(){

  _updateTime(1);

  if(time >= 0){
    _updateCount();
    interval = time * 15;

    interval = Math.max(interval,550);
    
  }
  else if(time < 0){
    _showEnd();  
    time_minus && clearInterval(time_minus);
    time_out && clearTimeout(time_out);
  }

}

//分數控制，觸摸到鳥和卡片的頭像扣5分
$(".game-main li").on("tap",function(){
  var gameMainLi = $(this);
  gameMainLi.addClass("on");
  if(gameMainLi.hasClass("ico-bird")){
    _updateTime(5)
  }
  else if(gameMainLi.hasClass("ico-card")){
    _updateTime(5)
  }
  else if(gameMainLi.hasClass("ico-code")){
    val += 1;
    $("#game_order").text(val);
  }
})

3.根據游戲結果的單數生成分享文案

首先要加載微信分享模塊的接口，這里就不做介紹，分享到朋友圈的分案如下：

//時間到，顯示結果
function _showEnd(){
  $(".game-main li").removeClass();
  $(".state").removeClass("hide");
  $(".state-order").text(val);

  //分享到朋友圈的文案
  txt2 = Math.min((((val / 80)*100)+ (Math.random() *99 / 100)).toFixed(2)  ,100);
  if(val >= 40){
    $(".state").addClass("show-suc");
    txt1 = "我是超級收銀員，你敢挑戰么";//分享出去的標題
    share_img = "ico_share_suc.jpg"//分享出去的圖標
    share_txt = "我用微信掃碼刷卡，60秒收銀"+val+"單，打敗全球"+txt2+"%的收銀員，你敢挑戰么？"//分享出去的描述
  }
  else{
    $(".state").addClass("show-fail");
    txt1 = "我是水貨收銀員，誰來替我報仇";
    share_img = "ico_share_fail.jpg"
    share_txt = "我用微信掃碼刷卡，60秒收銀"+val+"單，被全球"+(100.00-txt2)+"%的收銀員打敗/(ㄒoㄒ)/~~，誰來替我報仇"
  }
}

 

總結

第一次完整開發一個小游戲，雖然不難，但也是折騰了好幾天，以上一點想法，水平有限，不足之處，歡迎大家拍磚~

最后感謝前端大貓的大力協助~