「倔驢」一個h5小遊戲的實現和思考（碼易直播）——總結與整理

　　3月23日晚上8點半（中國隊火拼韓國的時候），作了一期直播分享。15年作的一個小遊戲，把核心代碼拿出來，現場講寫了一遍，結果後面翻車了，寫錯了兩個地方，致使運行效果有點問題，直播邊說話邊寫代碼還真不同（能夠理解爲藉口）。我先貼出寫錯的兩個地方。

1.

//self.last['', ''];//重置 這個是寫錯的
self.last = ["",""];//重置  這個纔是正確的

2.

$sword.css({'-webkit-transfrom':'rotateX(' + this.swordRotate[this.rotateIndex] +'deg)', 'display': 'block'});//錯的，form寫成from了（之前還老說別人經常寫錯）
$sword.css({'-webkit-transform':'rotateX(' + this.swordRotate[this.rotateIndex] +'deg)', 'display': 'block'});

　　直播又不能暫停，當時出了問題真的沒檢查出來，一直去看邏輯有沒有錯誤，結果全是拼寫錯誤，直到直播結束我才找到問題。 也算是第一次作視頻的現場直播，看了一下回放，核心問題應該是講清楚了，只是聽我說話有點難受，語言組織的太差，頓一頓的，還有不少口水語。 若是要看直播回放的朋友前30分鐘看看就好了，後面的快進吧。 由於直播的時候好多準備好的東西，沒有準確講出來，下面先用博客來講一遍，最後附上直播地址。

　　

需求：

　　作的是一個有點相似切水果的遊戲，遊戲的應用場景在移動設備上，交互方式就是屏幕滑動，對着一隻驢一陣亂切（能夠想象是水果忍者切最後的那個紅色石榴），最後計算規定時間內，切的次數，給予相應獎勵。這類遊戲的目的不在於多好玩，而在於給用戶優惠的同時排隊不那麼無聊，一個購物的排隊過程的一個遊戲，主要是還能夠根據遊戲狀況打折，固然根據遊戲的特性，還能夠用於其它環境。這類H5小遊戲都比較簡單，使用的技術：jq、html、css。

　

實現細分：

需求已經清楚了，咱們來思考下，要實現功能，咱們須要作哪些工做：遊戲頁面-遊戲功能交互-遊戲結果。

• 遊戲頁面: 寫好頁面，適配（頁面不要出現滾動，恰好一屏）
• 遊戲功能交互（如何切驢）：驢的區域，手勢交互（切驢的算法），切中效果（刀數增長、刀光劍影），倒計時
• 遊戲結果：依據切驢次數展現的最終樣式和遊戲後的中獎結果，送微信卡券，結果分享......

工做量大部分都在頁面和樣式上，還有狀態的切換，核心功能是手勢交互。

 

核心功能：

　　此次分享，其它頁面都作好了，直接來寫核心代碼。就是下面這頭驢，如何實現手勢滑動，計算切驢的次數。這個能夠本身先思考一下，若是是本身作的話，準備怎麼去作，本身的方案本身能不能把它實現。方案我想每一個人都有想法，可是最終能不能落地，能不能實現這個只有作了才知道。

　　個人方案就是獲取驢的一個座標範圍，根據手勢進出驢的範圍，來判斷是否算是切一次。好比我上一次手指的位置在驢外面，此次就在裏面了，那就說明我是從外到裏進去了一次，就算切了一刀，若是再從裏面出去，那麼又算是一刀。以下圖：

　　紅色區域是監聽的touch事件區域，綠色的區域都表明是驢，白色表明手勢，經過手勢進去這個區域咱們統計切的次數。  可是有個問題若是我直接一刀從外面到裏面再到外面不反向呢?以下圖

　　

　　我直播裏講錯了，寫博客我纔想起以前的邏輯，源碼裏也確實不是上面那樣算的。　實際是我第一次手指的位置 從「外」 到 「裏" 再到 "外"算是一刀；第一次手指的位置從」裏「到」外「算一刀。 這樣從哪裏開始彷佛都並無重複計算。 可是要嚴格按照真實狀況模擬，這樣的算法和代碼或者具體怎麼算一刀的需求，仍是須要再進行一次深入的推敲。但目前的方式算出來，從感官上確實是察覺不到任何問題的，自己遊戲也是無條件的給用戶優惠，這樣的算法也不會讓用戶受損，或者說你們都是公平的。

　　仍是來講說具體代碼和實現步驟把

　　1. 先找到驢的範圍：

　　$donkey: $('.donkey'),//倔驢的dom

    init: function(){
        var self = this;
        var $offset = self.$donkey.offset();//獲取驢的位置和寬度
        self.$x = [$offset.left + $offset.width / 5, $offset.left + $offset.width - $offset.width / 5];//0左1右
        self.$y = [$offset.top + $offset.height / 5, $offset.top + $offset.height - $offset.height / 5];//0上1下
        return this;
    }

　　以上定義了驢的左右上下座標，由於驢和菜板是一張圖，加減處理的五分之一是截掉後面菜板。

　　2. 綁定touch事件

 　　cut: function(){
        var self = this,
            $region = $('.cut-region');

        $region.on('touchstart', function(){
            $region.on('touchmove', function(e){
                e.preventDefault();
                if(self.cutCount(e)){//去計算是否應該算一次，若是須要計數+1，會返回true
                }
            });
                
        }).on('touchend', function(){
            $region.off('touchmove');
        });
    },

　　3. 進出判斷計算

　　cutCount: function(e){//傳入的touch事件對象
        var self = this;
　　　　 self.last = ['', ''];
        var loca = e.targetTouches[0];
        if(loca.clientX > self.$x[0] 
            && loca.clientX < self.$x[1] 
            && loca.clientY < self.$y[1] 
            && loca.clientY > self.$y[0]){//在驢身上

                if(self.last[0] == 'in') return false;//上一次一樣在裏面，不執行

                if(self.last[0] == 'out' && self.last[1] == 'in'){//上一次在外面
                    return true;
                }else{
                    self.last[1] = self.last[0];
                    self.last[0] = 'in';
                    return false;
                }
                
        }else{//就在外面

            if(self.last[0] == 'out') return false;//上一次在一樣外面，不執行

            if(self.last[0] == 'in' && self.last[1] == 'out'){
                return true;
            }else{
                self.last[1] = self.last[0];
                self.last[0] = 'out';
                return false;
            }
        }
    },

　　last紀錄了上一次和上上次手指的位置，這樣紀錄咱們後面才能判斷正確。

　　剩下的就是去打磨交互效果了，這裏就很少說了，能夠直接看下源碼或者直播回放。

 

小遊戲的思考：

　　我作過那麼些個小遊戲，基本都是本身想方案再寫出來實現的，拿到需求的時候須要拆分和評估，先把遊戲核心難點找出來單獨實現了才行，不然先作其它事情沒有意義。 遊戲本質是經過視覺、觸覺、聽覺和本能意識產生與現實相近的體驗，利用這幾個感官的特性，給人形成逼真的體驗，好比視覺上的錯位、相對移動，聽覺上物體的聲音、遠近聲音大小等等。 對於一些要求並不高的小遊戲，咱們能夠作一些模擬上的捨棄，要實現一個現實模擬，有些時候可能會很是複雜，若是作不到百分百準確，至少先作出一個讓人使用起來感受到基本上是這個東西的版本。 固然若是本身願意鑽研也是好事，不要影響開發進度就好。 若是有一天誰遇到這類的需求，發現這個事情很難作，就要先想辦法簡化，達到最低要求，再慢慢去優化，不會拆分會給人心理形成負擔，容易被一拳頭撐死。 若是是作h5小遊戲的話，必定要強調html和css，先寫好這兩個東西，再去使用JS，由於若是html和css不寫好，不充分利用其最大優點的話，用js去填補是會消耗很大精力的，會讓代碼維護和可讀性變得複雜，好比說一些輪播圖的實現，本身寫過的人可能會有所體會。

 

如下是直播地址 和 github上的源碼，有興趣的看看吧，給個start也好~

直播回放地址https://www.mayigeek.com/mayi-edu-web/user/html/liveShare.html?id=8  

看不了的話，複製連接在微信打開吧！

 

 

github上的源碼https://github.com/zimv/cut-donkey