首页 /  手机网站 /  手机游戏 / 微信小游戏避坑笔记实录篇

0 71

微信小游戏避坑笔记实录篇

h5已经写好的canvas游戏怎么顺利移植到微信小游戏里呢,其实也很简单,先解决以下几个大问题就差不多了。

1、只能创建一个canvas

如果你在h5上创建了多个canvas然后想合并到大的canvas,在微信小游戏上是有很多问题的,有的canvas会合并之后并没有显示出来;

2、创建canvas语句替换

h5上的我们直接 

canvas = document.createElement('canvas');

在微信上使用


canvas = wx.createCanvas();

注:canvas 要使用全局变量

3、js的window对象

微信小游戏里没有定义 window

如果你在js里把window当成一个全局变量来使用的话这时就要做如下修改


window = window || GameGlobal;

微信小游戏里用GameGlobal 用它来做全局变量

注意 js 里的 window.innerWidth
获取屏幕的宽高等 是不能这样用的,下面会讲。

4、获取屏幕的宽和高

js里通常用 window.innerWidth 和 window.innerHeight来获取屏幕的宽和高

微信小游戏里要用他们官方的api了,如下

WIDTH = wx.getSystemInfoSync().windowWidth,

HEIGHT = wx.getSystemInfoSync().windowHeight

5、常用事件api

h5里的常用三个事件

手指的触摸事件 touchstart(手指开始按下去事件) touchmove手指移动事件  touchend (手指离屏事件)


canvas.addEventListener('touchstart', ((e) => {

    e.preventDefault();

  }));

这个对应的微信api为

wx.onTouchStart(function(e){

ship.touched = true;

    //e.touches[0].clientX; //手指到左边屏幕的距离

    //e.touches[0].clientY;//手指到上边屏幕的距离

});

canvas.addEventListener('touchmove', ((e) => {

    e.preventDefault();

  }));

这个对应的微信api为

wx.onTouchMove(function(e){

    //e.touches[0].clientX; //手指到左边屏幕的距离

    //e.touches[0].clientY;//手指到上边屏幕的距离

});

canvas.addEventListener('touchend', ((e) => {  

}));

这个对应的微信api为

wx.onTouchEnd(function(e){

});


[来源] https://yuanmouren.erlyun.com/p.php?id=124

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
容若 2020-05-03 11:38
10
送花
20积分一朵