“倔驴”一个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