刮刮乐的山寨版-我就爱刮水果

最新推荐文章于 2022-01-01 12:13:35 发布
码农下的天桥
最新推荐文章于 2022-01-01 12:13:35 发布
阅读量1.1k
点赞数
分类专栏：前端 Html5游戏开发文章标签： html5 微信游戏刮刮乐我要刮水果
本文链接：https://blog.csdn.net/cdnight/article/details/50504951
版权
前端同时被 2 个专栏收录
243 篇文章 2 订阅
订阅专栏
Html5游戏开发
20 篇文章 0 订阅
订阅专栏
前言

微信推广小游戏是短平快的，那么刮刮乐也是很经常出现的。于是，这篇就写一写刮刮乐的逻辑。、
参考资料

用HTML5 Canvas 做擦除及扩散效果
在线演示地址

runjs的演示地址
运行截图

这里写图片描述
恭喜您，最后获得了一个香蕉
核心代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="full-screen" content="true"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
  <script src="../js/box2dWeb/Box2dWeb-2.1.a.3.min.js"></script>
  <script src="../js/lufylegend/lufylegend-1.10.0.min.js"></script>


  <style>
    body{
      padding: 0;
      margin: 0;
    }
  </style>

</head>
<body>

<div id="game" style=""></div>

<script type="text/javascript">

  var GameSettings={
    prizeWidth:512 //奖品图片的宽度。
    ,prizeHeight:512 //奖品图片的高度

  };


  var GameOptions={
    width:600
    ,height:800
  };
  var GameData={
    gameOver:false
  };
  var innerTools={
    timeFormat:function(seconds){
      var _seconds=parseInt(seconds);
      var _s=_seconds%60;
      var _m=parseInt((_seconds-_s)/60)%60;
      var _str="";
      if(_m<=9){
        _str="0"+""+_m;
      }
      else{
        _str=""+_m;
      }
      if(_s<=9){
        _str=_str+":0"+_s;
      }
      else{
        _str=_str+":"+_s;
      }
      return _str;
    }
    ,browser: {
      versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {         //移动终端浏览器版本信息
          trident: u.indexOf('Trident') > -1, //IE内核
          presto: u.indexOf('Presto') > -1, //opera内核
          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
          iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, //是否iPad
          webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
  };

</script>
<script>
  //--这是需要加载的各种资源。
  var _resources=[];
  //--加载完成后得到的数据。，
  var resourceList={};
  function _addResource(name,path){
    _resources.push({
      name:name
      ,path:path
    });
  }

  var LayerLoading={};

  //--初始化其他设置，设置屏幕等等。
  function resetSystem(){
    //--刚体系统设置
    LGlobal.box2d = new LBox2d();
    //--屏幕设置
    //LGlobal.align = LStageAlign.BOTTOM_MIDDLE;
    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
    //LGlobal.stageScale = LStageScaleMode.EXACT_FIT;

    LSystem.screen(LStage.FULL_SCREEN);
//    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
//    LSystem.screen(LStage.FULL_SCREEN);
  }
  //--加载资源。
  function loadResources(callback){
    _addResource("apple","images/apple512.png");
    _addResource("apricot","images/apricot512.png");
    _addResource("banana","images/banana512.png");
    _addResource("cherry","images/cherry512.png");
    _addResource("kiwi","images/kiwi512.png");
    _addResource("lemon","images/lemon512.png");
    _addResource("mango","images/mango512.png");
    _addResource("orange","images/orange512.png");
    _addResource("peach","images/peach512.png");
    _addResource("pear","images/pear512.png");
    _addResource("strawberry","images/strawberry512.png");
    _addResource("tomato","images/tomato512.png");
    LayerLoading = new LoadingSample3();
    addChild(LayerLoading);
    //--这里开始要加载资源了。
    LLoadManage.load(
            _resources,
            function(progress){LayerLoading.setProgress(progress);}
            ,
            function(_resource_loaded_object){
              resourceList=_resource_loaded_object;
              removeChild(LayerLoading);
              if(callback){
                callback();
              }
            }
    );
  }

  init(10,"game",GameOptions.width,GameOptions.height,function(){
    resetSystem();
    loadResources(function(){
      gameInit();
    });
  });
</script>

<script>
  //--游戏的初始化。
  function gameInit(){

    var _prize_random="";
    var random_arr=[];
    for(var key in prizeListMap){
      random_arr.push(key);
    }
    var _random_index=parseInt(parseInt(Math.random()*1000)%random_arr.length);
    _prize_random=random_arr[_random_index];
    console.log(_prize_random);

    ObjPrize=initLayerPrize(_prize_random);
    LayerPrize.visible=false;
    addChild(LayerPrize);
    ObjModal=initLayerModal(_prize_random);
    addChild(LayerModal);
    LayerPrize.visible=true;

  }
</script>

<script>

  //--游戏的唯一难点就是，如何处消掉遮罩层，显示出图片。这里有一篇文章，用原生的canvas及相关api的可以参考一下：http://www.linuxidc.com/Linux/2015-04/115766.htm
  //当然，在demo。jsp里面也将文章里面的方法实现一次。
  //下面是文章的摘要
//  方案一的可优化点最明显的就是循环
//  ，
//  其两大缺陷都是基于此的
//  。
//  因此方案二的主要思路放弃了clip方法
//  。
//  而是利用了canvas上下文的strokeStyle属性
//  ，
//  该属性是指在canvas中绘制矢量图形的时候矢量线的绘制样式
//  ，
//  其值可以为color(颜色值)
//  、
//  gradient(渐变对象)
//  、
//  pattern(pattern对象)
//  。
//  这个方案就是将方案一中的drawImg方式改为将canvas上下文的strokeStyle设置为图片
//  ，
//  然后在绘制的时候直接画线就可以了
//  ，
//  因为矢量线的背景就是需要展示的图片
//  ，
//  这样就实现了擦除的效果
//  。
//  HTML结构不变
//  ，
//  JS代码如下
//  ：


  //接下来就是用lufylegend来实现了。
  var prizeListMap={
    "apple":{
      msg:"恭喜你获得了苹果"
    }
    ,"apricot":{
      msg:"恭喜您获得了杏桃"
    }
    ,"banana":{
      msg:"恭喜您获得了一年份的香蕉，从此不怕用不完"
    }
    ,"cherry":{
      msg:"恭喜您获得了一份樱桃"
    }
    ,"kiwi":{
      msg:"恭喜您获得了奇异果"
    }
    ,"lemon":{
      msg:"恭喜您获得了一份柠檬"
    }
    ,"mango":{
      msg:"恭喜您获得了芒果"
    }
    ,"orange":{
      msg:"恭喜您获得了橙子"
    }
    ,"peach":{
      msg:"恭喜您获得了桃子"
    }
    ,"pear":{
      msg:"恭喜您获得了鸭梨"
    }
    ,"strawberry":{
      msg:"恭喜您获得了一份士多啤梨"
    }
    ,"tomato":{
      msg:"恭喜您获得一份土豆"
    }
  };
  var LayerModal=new LSprite();
  var LayerPrize=new LSprite();

  var ObjModal={};
  var ObjPrize={};

  function initLayerPrize(currentPrizeName){
    var _root_=new LSprite();
    var _bitmap_prize=new LBitmap(new LBitmapData(resourceList[currentPrizeName]));
    var _x=parseInt((GameOptions.width-GameSettings.prizeWidth)/2);
    var _y=parseInt((GameOptions.height-GameSettings.prizeHeight)/2);
    _bitmap_prize.x=_x;
    _bitmap_prize.y=_y;
    _root_.addChild(_bitmap_prize);
    LayerPrize=_root_;
    var robj={
      getRoot:function(){
        return _root_;
      }
    };

    return robj;
  }
  function initLayerModal(currentPrizeName){
    var _root_=new LSprite();
    //--设定高度和宽度以及位置以覆盖奖品层。
    var _x=parseInt((GameOptions.width-GameSettings.prizeWidth)/2);
    var _y=parseInt((GameOptions.height-GameSettings.prizeHeight)/2);
    _root_.x=_x;
    _root_.y=_y;
    _root_.width=GameSettings.prizeWidth;
    _root_.height=GameSettings.prizeHeight;

    //--设定stroke type
    var strokePattern=LGlobal.canvasObj.getContext("2d").createPattern(resourceList[currentPrizeName],"no-repeat");

    _root_.graphics.strokeStyle(strokePattern);
    //_root_.graphics.lineCap("round");
    //_root_.graphics.lineJoin("round");
    _root_.graphics.lineWidth("25");

//    var pat=ctx2.createPattern(img,"no-repeat");
//    ctx2.strokeStyle=pat;
//    ctx2.lineCap="round";
//    ctx2.lineJoin="round";
//    ctx2.lineWidth="25";

    var innerData={

    };

//    ctx.fillStyle = 'gray';
//    ctx.fillRect(0, 0, w, h);
    //
    // _root_.graphics.drawRect(0,0,GameSettings.prizeWidth,,GameSettings.prizeHeight,)
    //绘制矩形涂抹层。
    _root_.graphics.drawRect(0,'#00000',[0,0,GameSettings.prizeWidth,GameSettings.prizeHeight],true,'#cccccc');

    //--添加事件--拖动。
    //--分成pc端的拖动及移动端的拖动。
    if(innerTools.browser.versions.mobile==true||innerTools.browser.versions.mobile==true||innerTools.browser.versions.android||innerTools.browser.versions.iPhone){
      _init_mobile_operations();
    }
    else{
      _init_pc_operations();
      //me._init_mobile_operations();
    }
    function _init_mobile_operations(){
      _root_.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){

        console.log("mobile 要开始拖动了");
        _root_.graphics.beginPath();
        _root_.graphics.moveTo(event.selfX,event.selfY);
        //ctx2.moveTo(e.clientX,e.clientY);

      });
      _root_.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){
        window.the_event=event;
        if(GameData.gameOver){
          return;
        }
        _draw_arc(event.selfX,event.selfY);
        console.log("mobile 拖动中。");
      });
    }
    function _init_pc_operations(){
      var __pc_data={
        inDrag:false
      };
      _root_.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){
        __pc_data.inDrag=true;
        console.log("pc 要开始拖动了");
        _root_.graphics.beginPath();
        _root_.graphics.moveTo(event.selfX,event.selfY);
        //ctx2.moveTo(e.clientX,e.clientY);

      });
      _root_.addEventListener(LMouseEvent.MOUSE_UP,function(event){
        __pc_data.inDrag=false;
        console.log("pc结束拖动");
      });
      _root_.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){
        window.the_event=event;
        if(GameData.gameOver){
          return;
        }
        if(__pc_data.inDrag==false){
          return;
        }
        _draw_arc(event.selfX,event.selfY);
        console.log("pc 拖动中。");
      });
    }

    //--这是拖动时候画出的点。。。
    function _draw_arc(x,y){

      //_root_.graphics.arc(x, y, 5, 0, Math.PI * 2);
      //shape.graphics.arc(100,75,50,0,2*Math.PI);
      //_root_.graphics.stroke();
      //_root_.graphics.drawArc(1, "#000000", [x, y, 20, 0, 2*Math.PI,false,true], true);
//      _root_.graphics.fillStyle='transparent';
//      _root_.graphics.beginPath();
//      _root_.graphics.arc(x, y, 10, 0, Math.PI * 2);
//      _root_.graphics.fill();

      _root_.graphics.lineTo(x,y);
      _root_.graphics.stroke();
    }

    LayerModal=_root_;


    var robj={};

    return robj;


  }


</script>
</body>
</html>