微信小游戏开发-遇到的错误

一、小游戏里面的帧循环

1、帧循环简单实现：

//这里导入weapp-adapter，里面有个全局的canvas对象
import './js/libs/weapp-adapter'
//获取一个2d的画布
const ctx = canvas.getContext('2d');

let aniId = 0;	//维护当前requestAnimationFrame的id
let img = new Image();
img.src = 'images/bg.jpg';

//帧循环函数
function loop(){
	//将img画在画布上
    ctx.drawImage(
      img,
      0, 0, 
      canvas.width, canvas.height
    );
    //这是清楚上一帧的图像，一般不用这样，一般是每局游戏结束后再次开始前调用
    window.cancelAnimationFrame(this.aniId)
	//这里是的loop函数能够一直执行，即一帧一帧不停的绘制
	aniId = window.requestAnimationFrame(loop, canvas);
}

function main(){
	//这里使得loop函数能够开始执行
	aniId = window.requestAnimationFrame(loop, canvas);
}

main();  //让程序运行起来

2、对drawImage()函数的单独小结：

//第一种使用方法：
ctx.drawImage(
  img,
  //从img上从(img_x,img_y)截取img_width, img_height的图片
  img_x, img_y, img_width, img_height,
  //将截取的图片在(pos_x,pos_y)上绘制成指定的宽度和高度
  pos_x, pos_y, draw_width, draw_height
);
//第二种使用方法：
ctx.drawImage(
  img,
  //直接将图片在(pos_x,pos_y)上绘制成指定的宽度和高度
  pos_x, pos_y, draw_width, draw_height
);

3、程序运行截图：

二、小游戏里的事件触发

1、事件触发的简单实现：

// 在帧循环的基础上，事件处理添加进来

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

const ctx = canvas.getContext('2d');
let aniId = 0;	//维护当前requestAnimationFrame的id
let img = new Image();
img.src = 'images/bg.jpg';

let btnText = '点我显示';
let isTouch = false;
let btnArea = {		//限制触摸区域
  startX: 127,
  startY: 60,
  endX: 247,
  endY: 100
}

//自己封装一个画文字的函数，在(x,y)处画出文字，根据textWidth来计算出文字大小
function drawText(ctx, text = '', x = 0, y = 0, textWidth = 0, font = '华文楷体', color = '#ffffff'){
  ctx.fillStyle = color;
  let size = parseInt(textWidth / text.length);
  font = size + 'px ' + font;
  ctx.font = font;
  ctx.fillText(text, x, y + size);
}
//自己封装一个画矩形的函数，以color来填充
function drawRect(ctx, x=0, y=0, width=0, height=0, color = '#ffffff'){
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

//这是触摸事件处理函数，简易实现点击按钮显示/隐藏矩形框
function touchEventHandler(e) {
  e.preventDefault()
  const x = e.touches[0].clientX
  const y = e.touches[0].clientY
  if (x >= btnArea.startX && x <= btnArea.endX
      && y >= btnArea.startY && y <= btnArea.endY){
        if(isTouch == false){
          isTouch = true;
          btnText = '点我隐藏';
        }
        else{
          isTouch = false;
          btnText = '点我显示';
        }
    }
}

//帧循环函数
function loop(){
	//将img画在画布上
    ctx.drawImage(
      img,
      0, 0, 
      canvas.width, canvas.height
    );
	//如果isTouch为true，则画出矩形框
	if(isTouch == true){
      drawRect(ctx, 40, 200, 300, 200, '#f05b72');
    }
    //这里画出按钮区域，先画矩形再画文字，不然文字会被盖住
    drawRect(ctx, 127, 60, 120, 40, '#f47920');
    drawText(ctx, btnText, 147, 65, 80, '华文楷体');

    //window.cancelAnimationFrame(this.aniId)
	//这里是的loop函数能够一直执行，即一帧一帧不停的绘制
	aniId = window.requestAnimationFrame(loop, canvas);
}

function main(){
	//这里使得loop函数能够开始执行
	aniId = window.requestAnimationFrame(loop, canvas);
	//将处理触摸事件的方法添加到canvas中
	canvas.addEventListener('touchstart', touchEventHandler);
}

main();  //让程序运行起来

2、对addEventListener函数的理解：

//'touchstart'触摸开始(手指刚点击)时的事件，它触发时会执行touchEventHandler()函数
canvas.addEventListener('touchstart', touchEventHandler);
//'touchmove'触摸移动(拖动)时，它触发时会执行touchEventHandler()函数
canvas.addEventListener('touchstart', touchEventHandler);
//'touchend'触摸结束(手指离开屏幕)时，它触发时会执行touchEventHandler()函数
canvas.addEventListener('touchstart', touchEventHandler);

3、程序运行截图