微信小游戏

honey缘木鱼

发布于 2018-06-13 16:35:49

1.7K0

发布于 2018-06-13 16:35:49

文章被收录于专栏：娱乐心理测试娱乐心理测试娱乐心理测试

前一阵，微信的跳一跳小游戏很是火，打破了之前说的不会推出游戏的说法，2017年12月22日，微信发布了微信小游戏的体验版，打开自己的微信小程序账号，找到如下图：

屏幕快照 2018-03-05 上午10.18.17.png

小游戏点击上图中的小游戏，查看文档，目前小游戏不提供公开注册，可点击体验小游戏使用无 AppID 模式。

F0A8E5D1-5EAB-4A99-A419-79AFBB27739A.png

自己一步一步的按照文档说明，新建一个小程序项目，之前自己也遇到过一个坑，创立的项目总是和文档不一样，仔细看了文档，发现（注意：你要选择一个空的目录才会有这个选项），怪自己没有看清楚文档。
微信自己提供一个飞机大战的游戏，可以自己在真机预览，自己也想创建一个自己的微信小游戏，在此基础上，我把之前微信小程序（贪吃蛇）的游戏放在微信小游戏(贪吃蛇)，把之前的微信的飞机大战的多余代码去掉。
创建食物，蛇头，蛇身 // 食物方法

   food() {
      var food = {};
      food["color"] = "rgb(" + this.randomAB(0, 255) + "," + this.randomAB(0, 255) + "," + this.randomAB(0, 255) + ")";
      food["x"] = this.randomAB(0, windowW);
      food["y"] = this.randomAB(0, windowH);
      var w = this.randomAB(10, 20);
      food["w"] = w;
      food["h"] = w;
      return food;
  }

// 蛇头

var snakeHead = {
  image: image,
  x: 0,
  y: 0,
  w: snakeW,
  h: snakeH
};

// 添加蛇身

        snakeBodys.push({
          color: "green",
          x: snakeHead.x,
          y: snakeHead.y,
          w: snakeW,
          h: snakeH
        });

4.吃到食物

// 吃到食物函数
  eatFood(snakeHead, food) {
    var sL = snakeHead.x;
    var sR = sL + snakeHead.w;
    var sT = snakeHead.y;
    var sB = sT + snakeHead.h;
    var fL = food.x;
    var fR = fL + food.w;
    var fT = food.y;
    var fB = fT + food.h;
    if (sR > fL && sB > fT && sL < fR && sT < fB && sL < fR) {
      return true;
    } else {
      return false;
    }
  }

//绘制的方法

function drawObj(obj) {
    if (obj == snakeHead)
    {
       image.src = avatarUrl 
       ctx.drawImage(image, obj.x, obj.y, obj.w, obj.h)
       image.onload = function () {
     }
      
    }else
    {
      var offScreenCanvas = wx.createCanvas()
      var offContext = offScreenCanvas.getContext('2d')
      offContext.fillStyle = obj.color
      offContext.fillRect(obj.x, obj.y, obj.w, obj.h)
      ctx.drawImage(offScreenCanvas, 0, 0)
    }  
  }

//手的左右移动

//移动方向
    wx.onTouchMove(function (e) {
      moveX = e.touches[0].clientX;
      moveY = e.touches[0].clientY;

      diffX = moveX - startX;
      diffY = moveY - startY;
      if (Math.abs(diffX) > Math.abs(diffY) && diffX > 0 && !(snakeMoveDirection == "left")) {
        //  向右
        snakeMoveDirection = "right";
          //console.log("向右"); 
      } else if (Math.abs(diffX) > Math.abs(diffY) && diffX < 0 && !(snakeMoveDirection == "right")) {
        //  向左
        snakeMoveDirection = "left";
          //console.log("向左");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY > 0 && !(snakeMoveDirection == "top")) {
        //  向下
        snakeMoveDirection = "bottom";
           //console.log("向下");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY < 0 && !(snakeMoveDirection == "bottom")) {
        //  向上
        snakeMoveDirection = "top";
          //console.log("向上");
      }
    })

注意：用Canvas绘制完成，一定要清除轨迹，（蛇的身体，蛇头）ctx.clearRect(snakeBody.x, snakeBody.y, snakeBody.w, snakeBody.h);

有两点问题： 1.由于个人账号没有微信小游戏appid，个人无法发布； 2.在手机预览时，会闪退（不知道这个问题是不是也和没有appid有关系）

如果想看源码的：https://github.com/dt8888/game

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.03.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

微信