微信小游戏

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

2015 年 JavaScript 开发者调查报告

年底将至,JavaScript 开发者调查也已经结束,此次调查总共有 5000 份回复,我真的迫不及待要分享这次调查的细节,感谢所有的参与者,这是 JavaSc...

412
来自专栏爱原型爱设计

2018年不可错过的创意404报错设计

404报错页面,作为提醒网站访问者服务器未找到请求资源或文件的页面,时常被UI/UX设计师,产品经理以及网页/软件开发者视作 (包括枯燥的登录页面,加载页面以及...

63520
来自专栏阮一峰的网络日志

Google日历简易版

我试过自己搭建软件,但又懒得维护。使用过twitter,但它的档案查阅和时间序列功能实在太弱了。

673
来自专栏Java学习123

基于python的终端天气查询

2636
来自专栏知晓程序

小程序不好如何反馈或举报 / 如何清理小程序缓存 / 群通知小程序推荐 | 小程序问答 #12

之前,我们总是嫌弃微信小程序太封闭。在刚过去的几天里,小程序终于走上了开放之路:在开放「小程序第三平台」和「小程序码」后,又全面开放了「公众号关联小程序」的能力...

731
来自专栏MixLab科技+设计实验室

技能之用iMovie制作预告片

hi,这是系列文章:技能之xxx的第1篇。 我为什么写这个系列的文章。因为我正在做一款app,我在团队中主抓产品设计、UX/UI设计、部分前端开发,少量运营。在...

26911
来自专栏互联网杂技

当卡片式UI不再流行,列表式UI将是王牌

随着 Material Design 的流行,卡片式 UI 已经成为现代 web 设计的一部分。尤其是你在提供一个汇总归档信息的界面时。 卡片是提供详细信息的入...

3207
来自专栏知晓程序

还不会用微信小程序?这篇文章给你扫扫盲 | 小程序问答 #16

是因为方便,小程序不需要下载、安装,就能用?还是因为小程序体积小,拯救了你 16G 的手机?

642
来自专栏BestSDK

涂图SDK:几行代码,让你的App也可以制作“我们是谁”

最近,一组“我们是谁”的漫画刷爆了朋友圈。这条出自于美国女画家Allie Brosh之手的漫画,在经历过网友的各种脑洞创作之后,如同病毒般出现在微信、微博等社交...

2994
来自专栏速成应用小程序开发平台

不用懂技术,免费教大家如何开发制作微信小程序的优惠券功能

微信小程序上线之后,越来越多的企业特别是零售行业,电商行业等流量竞争激烈和流量导向型的,需要线上线下结合。微信小程序,背靠微信10.4亿的月活以及10亿用户,巨...

1732

扫码关注云+社区