欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

微信小游戏开发 - 学习笔记

发表日期:2019-10 文章编辑:小灯 浏览次数:1071

官方教程地址

- 玩微信小游戏前提基础技能

JS ES6 写法

- 小游戏一个纯jscore的程序,没有DOM 操作 ;H5游戏都是玩弄canvas;所以官方有个weapp-adapter.js,模拟了canvas

import './js/libs/weapp-adapter';

引入后,全局就会有一个canvas对象;Adapter下载地址

- 单例类的写法

let instance;
export default class Instant {
  constructor() {
    if (instance)
      return instance;
    instance = this;
    //不管怎么new xxx 不会是新的对象
    this.xxx="xxxx";
  }
}

调用

import Instant from './js/tt/instant';
let instant = new Instant();

或是在类里

import Instant from './js/tt/instant';
export default class Main{
  constructor() {
    this.instant = new Instant();
  }
}

- 时间轴 window.requestAnimationFrame
用法

let render= e => {
  //刷新逻辑
  window.requestAnimationFrame(render, canvas);
}
window.requestAnimationFrame(render, canvas);

- 图片

let img = new Image();
img.src = 'images/enemy.png';

图片的x,y属性是只读;
要刷新位置得这么玩

let img = new Image();
let ctx = canvas.getContext('2d');
img.src = 'images/enemy.png';
var render = e => {
  //清空canvas内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //重新绘制img对象到canvas xx yy 是 鼠标点击的坐标位置
  ctx.drawImage(img, xx, yy, img.width, img.height);
  window.requestAnimationFrame(render, canvas);
}
window.requestAnimationFrame(render, canvas);
let [xx, yy] = [0, 0];
canvas.addEventListener('touchstart', ((e) => {
  e.preventDefault();
  let x = e.touches[0].clientX;
  let y = e.touches[0].clientY;
  [xx, yy] = [x,y]
}));

- 按钮互动事件 (好恶心)
居然只能通过touch的 x y 属性,与对象存在的位置 宽高 进行判断比较!!!
官方教程代码:

//游戏结束后的触摸事件处理逻辑
  touchEventHandler(e) {
    e.preventDefault()
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY
    let area = this.gameinfo.btnArea
    if (x >= area.startX
      && x <= area.endX
      && y >= area.startY
      && y <= area.endY)
      this.restart()
  }

之前用过egret定位图片ui元素,也是各种x y ,非常累!!


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:https://www.dengtar.com/24354.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.