微信小程序游戏-----动画

setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()

var canvas =wx.createCanvas()
var ctx =canvas.getContext("2d")

ctx.fillStyle ="red"
ctx.fillRect(0,0,100,100)
ctx.clearRect(0,0,canvas.width,canvas.height)  //清除画布
ctx.fillRect(0,20,100,100)
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.fillRect(0,150,100,100)
var num =0
var timer=setInterval(function(){
    num++
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.fillRect(0,num++,100,100)
    if(num>150){
        clearInterval(timer)
    }
},20)

 

//用延时器做动画
var canvas =wx.createCanvas()
var ctx =canvas.getContext("2d")

 ctx.fillStyle ="red"

//延迟定时器去做
ctx.fillRect(0,0,100,100)
setTimeout(() => {
    ctx.clearRect(0,0,canvas.width,canvas.height)  
    ctx.fillRect(0,150,100,100)
}, 500);

var canvas =wx.createCanvas()
var ctx =canvas.getContext("2d")

 ctx.fillStyle ="red"
VAR TIMER =NULL

//延迟定时器去做
ctx.fillRect(0,0,100,100)
var num =0;
loop()
function loop(){
    num ++
    TIMER= setTimeout(() => {
        ctx.clearRect(0,0,canvas.width,canvas.height)  
        ctx.fillRect(0,num,100,100)
        if(num<150){
           clearTimeout(TIMER)
        }
        
    }, 20);
}

var canvas = wx.createCanvas();
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
//requestAnimationFrame
var num = 0
loop()
function loop(){
    num++
    requestAnimationFrame(function(){
            ctx.clearRect(0,0,canvas.width,canvas.height)
            ctx.fillRect(0,num,100,100)
            loop()
    })
}

//碰撞检测
var canvas = wx.createCanvas();
var ctx = canvas.getContext("2d");

var img = wx.createImage();
var firstX = 0;
var firstY = 0;
var imgW = 100;
var imgH = 100;
var isShow = false;

img.src = "./source/2.jpg";
img.onload = function() {
  ctx.drawImage(img, firstX, firstY, imgW, imgH);
};

wx.onTouchStart(function(e) {
  var touch = e.changedTouches[0];
  var clientX = touch.clientX;
  var clienty = touch.clientY;
  if (
    firstX < clientX &&
    clientX < firstX + imgW &&
    (firstY < clienty && clienty < firstY + imgH)
  ) {
    isShow = true;
  }
});

wx.onTouchMove(function(e) {
  if (isShow) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); //清除画布
    var touch = e.changedTouches[0];
    var clientX = touch.clientX;
    var clienty = touch.clientY;
    if((clientX-imgW/2)<0){
        firstX =0
    }else if((clientX-imgW/2)>(canvas.width-imgW)){
        firstX = canvas.width-imgW
    }else{
        firstX = clientX-imgW/2
    }

    if((clienty-imgH/2)<0){
        firstY =0
    }else if((clienty-imgH/2)>(canvas.height-imgH)){
        firstY =(canvas.height-imgH)
    }else{
        firstY = clienty-imgH/2
    }
    ctx.drawImage(img,firstX,firstY,imgW,imgH);
  }
});
wx.onTouchEnd(function(){
    isShow = false
})