微信小游戏

前一阵,微信的跳一跳小游戏很是火,打破了之前说的不会推出游戏的说法,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 条评论
登录 后参与评论

相关文章

来自专栏HT

HTML5 技术在风电、光伏等新能源领域的应用

随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国,以风能、光伏发电为代表的新能源产...

2706
来自专栏hightopo

HTML5 技术在风电、光伏等新能源领域的应用

2205
来自专栏程序你好

微信小游戏开发入门: 示例代码介绍

3472
来自专栏域名资讯

搜狗新域名sogo.com 上市纽交所

搜狗公司(NYSE:SOGO)11月9日正式登陆纽交所后,搜狗搜索官网(www.sogou.com)logo由静态图片更换为动态图。随着搜狗公司的上市,搜狗公司...

510
来自专栏知晓程序

这个变化不简单!

这意味着,公众号能力实现了全面升级。在图文消息中,除了添加小程序卡片,还多了文字和图片链接,两种新的跳转方式。

812
来自专栏程序人生 阅读快乐

JavaScript高级程序设计(第3版) - 泽卡斯

本书是JavaScript 超级畅销书的最新版。ECMAScript 5 和HTML5 在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为J...

711
来自专栏Jerry的SAP技术分享

在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的。

1742
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–有JIT交货计划的采购(230)-3收货&开票

4.5 MIGO收货 收货是指实际货物和物料的入库过程。收货通常来自于外部供应商或内部生产部门。所有收货都会增加库存。 此步骤仅用于物料H20,H21,看板物料...

4426
来自专栏钱曙光的专栏

一周极客热文:依赖 IDE 做开发,会让你成为一名糟糕的程序员么?

上图为:Mac系统文本编辑器Chocolat 事实上,一款优秀的IDE会让你的工作更有效率:优质的框架加快了项目进度,自动编译和IDE重构工具让编码进行得更快,...

20610
来自专栏西枫里博客

熊掌号文章校验未通过 1 类错误的原因分析及使用技巧。

半夜更文,纯粹是为了更文而更文。最近撸一个项目代码,有点烦躁,导致博客断更超过一周了,虽然自定的月更目标完成了,但这么长时间断更还是不合适的。

1053

扫码关注云+社区