用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-1-13 12:48:40 柿霖不是林 咫尺尊享 楼主 01519
    点评:主要使用了canvas






    //点击坐标
    var startX = 0;
    var startY = 0;
    //移动的坐标
    var moveX = 0;
    var moveY = 0;
    //移动的距离
    var X = 0;
    var Y = 0;
    //蛇头的坐标
    var x = 0;
    var y = 0;

    //蛇对象
    var python = {
      color:'#ff0000',
      x:0,
      y:0,
      w:20,
      h:20
    }
    //蛇身体
    var pythonBody = [];
    //方向
    var fx = null;
    var pythonfx = 'right';

    Page({
        canvasStart:function(e){
          // console.log(e);
          startX = e.touches[0].x;
          startY = e.touches[0].y;
      },
      canvasMove:function(e){
        moveX = e.touches[0].x;
        moveY = e.touches[0].y;

        X = moveX - startX;
        Y = moveY - startY;

        if(Math.abs(X) > Math.abs(Y) && X > 0){
          fx = 'right'
        }else if(Math.abs(X) > Math.abs(Y) && X < 0){
          fx = 'left'
        }else if(Math.abs(X) < Math.abs(Y) && Y > 0){
          fx = 'buttom'
        }else{
          fx = 'top'
        }
      },
      canvasEnd:function(){

        pythonfx = fx;
      },
      onReady: function(){
            var cvs = wx.createContext();
            //帧数,模拟机60桢每秒
            var zs = 0;
            function draw(obj){
               cvs.setFillStyle(obj.color);
                cvs.beginPath();
                cvs.rect(obj.x, obj.y, obj.w, obj.h);
                cvs.closePath();
                cvs.fill();
            }
            function animate(){
                zs++;
                if(zs%20 == 0){
                  //给蛇身体添加一节
                  pythonBody.push({
                    x:python.x,
                    y:python.y,
                    w:20,
                    h:20,
                    color:"#00ff00"
                  })
                  //获取方向
                  switch(pythonfx){
                    case "right":
                      python.x += python.w;
                    break;
                    case "left":
                      python.x -= python.w;
                    break;
                    case "top":
                      python.y -= python.h;
                    break;
                    case "buttom":
                      python.y += python.h;
                    break;
                  }
                  if(pythonBody.length > 4){
                    pythonBody.shift()
                  }
              }

              //绘制蛇头
              draw(python);

              //绘制身体
              for(var i=0; i<pythonBody.length; i++){
                var pythonBodys = pythonBody;
                draw(pythonBodys)
              }
              wx.drawCanvas({
                canvasId: 'String',
                actions: cvs.getActions()
              })
              requestAnimationFrame(animate);
            }
            animate();
        }
    })

    <canvas canvas-id="String" style="width:100%;height:100%; background:#ccc" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" />


    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略