위챗 미니 게임 canvas 캔버스 그림 드래그

초보자가 공부하여 필기로 삼다.고수의 많은 가르침도 부탁드립니다. 감사합니다.

var canvas = wx.createCanvas()
var context = canvas.getContext('2d')
var bgm = wx.createImage()
var hero = wx.createImage()
var x = canvas.width / 2 - 40
var y = canvas.height - 80
//hero    
bgm.src = 'images/bgm.jpg'
hero.src = 'images/hero.png'
//console.log(x, y)
bgm.onload = function () {
  context.drawImage(bgm, 0, 0)
  //      ，      
}
hero.onload = function () {
context.drawImage(hero, x, y, 80, 80)
//      ，  hero  
}
wx.onTouchMove(function (e) {
  var nx = e.touches[0].clientX - 40
  var ny = e.touches[0].clientY - 40

  //         
  if (nx > x - 40 && nx < x + 40 && ny > y - 40 && ny < y + 40) {
    //              

    context.clearRect(0, 0, canvas.width, canvas.height)
    //    
    context.drawImage(bgm, 0, 0)
    context.drawImage(hero, nx, ny, 80, 80)
    //      
    x = nx
    y = ny
    //    x,y  


  }
  else {
    console.log("     ，    ", x, y, nx, ny)
  }

})