Javascript Canvas 游戏

Question

我的 Canvas 游戏有问题。我试着让它跳起来，但我遇到了一些麻烦。一切正常，但如果我从底部触摸一个物体，它会将我抛向该物体。

LastColison 可能有问题。有人能帮我吗 ？ GIF Image link .

function Block(x, y) {
  var size = 80
  GameObject.call(this, x*size, y*size, size)
  this.img = document.getElementById("block")
  this.class = "block"
}

// Dedi vlastnosti z GameObject
Block.prototype = Object.create(GameObject.prototype)

Block.prototype.draw = function() {
  ctx.fillStyle = "green"
  ctx.drawImage(this.img,this.x,this.y,this.size,this.size)
}

function Player(x, y) {
  var size = 120
  this.dx = Math.random() * 50 - 25
  this.dy = Math.random() * 50 - 25
  GameObject.call(this, x*size, y*size, size)
  // this.player = document.getElementById("player")
  this.img = [document.getElementById("player"),document.getElementById("ball_r"),document.getElementById("ball_l"),document.getElementById("ball_j")]
  this.player = this.img[0]
  this.class = "player"

}

// Dedi vlastnosti z GameObject
Player.prototype = Object.create(GameObject.prototype)

Player.prototype.move = function() {
    var x = this.x
    var y = this.y
    //ak dam this.y = y -5 môžem  pohnuť  aj  so  stlačenou  sipkou  dole 
   this.player = this.img[0]
    // Posun
      if ( keys[37] ) 
      {
          if(level == 0){
              x -= 4;
          }
          if (level == 1) {
              x -= 8;
          }
          this.player = this.img[2];
          this.y = y;
      }

      if ( keys[39]) 
      {
          if (level == 0) {
              x += 4;
          }
          if (level == 1) {
              x += 8;
          }
          this.player = this.img[1];
      }
      if ( keys[38] ) 
      { this.player = this.img[3], this.dy = -10;  }



// ak  nedam  else  if  mozem  ouzzivat naraz viac  tlacidiel  takze  upravit  potom

    // Test novej pozicie

    var collision = false

    for (i in scene) {
     var obj = scene[i]
     if (obj.class == "cloud") { continue; }
     if (obj.class == "ladder") { continue; }

     if (obj.class == "touched") { continue; }
     if (obj.class == "dirt") { this.x = x; this.y = y }
     if (obj.class == "block") { this.x = x; this.y = y }
     if (obj.class == "enemy") { this.x = x; this.y = y}
      var test = x +30 >= obj.x + obj.size  || x + this.size  - 40<= obj.x /* kolide right*/|| y >= obj.y + obj.size /*kolizia up*/|| y + 40 + this.size <= obj.y /*kolizia  bottom*/


          if (!test) {

            collision = true;
            var touch = 0;
            if (obj.class == "enemy") {
                touch = 1;
                if (touch == 1) {

                    health -= 20; console.log(health);
                    this.x = x - 250;
                    if (klik % 2 == 0){
                    var hit = new Audio('snd/Hit_Hurt15.wav')
                    hit.play()
                }
                }
                if (health == 0) { health = 0; console.log("GAMEOVER");scene = []}
            }
            if (obj.class == "coin") {
                score += 10; obj.class = "touched";
                if (klik % 2 == 0) {
                    var hrahra = new Audio('snd/pickcoin.wav')
                    hrahra.play()
                }
            }
            else { touch = 0; }
            if (obj.class == "touched") {}
            break;
          }
    }

    if (score >= 200 && score <= 200) {
        if (klik % 2 == 0) {
            var levelup = new Audio('snd/Powerup9.wav')
            levelup.loop = false;
            levelup.play()
        }
        level = 1;
        health = 100;
        score += 1;
    }



        // Ladder
     // if(collision){score += 1,scene.pop() }
    // Posun bez kolizie
    if (!collision) {
      this.x = x
      this.y = y + this.dy  
      this.dy += 0.3;



    }    

    **else {

        if (obj.class == this.LastColl) {
            this.dy = 0;
            this.y = obj.y -160
        }

    this.dy = 0;
    this.LastColl = obj.class
    }** 
}

Player.prototype.draw = function() {
  ctx.fillStyle = "blue"
  ctx.beginPath()
  ctx.drawImage(this.player,this.x, this.y, 110,160)
  ctx.shadowColor = "rgba( 0, 0, 0, 0.3 )";
  ctx.shadowOffsetX = -10;
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 3;
  ctx.drawImage(this.player,this.x,this.y,110,160)
  ctx.closePath()
  ctx.fill()
}

Answer 1

我目前无法访问您提供的 GIF。但据我所知，这些行是你的问题:

if (!collision) {
  this.x = x
  this.y = y + this.dy  
  this.dy += 0.3;
}    

**else {

    if (obj.class == this.LastColl) {
        this.dy = 0;
        this.y = obj.y -160
    }

这一行 - this.y = obj.y -160 看起来你是在告诉它在 Canvas 上向上移动 -160 像素。

这是否回答了您的问题？

也请注意 - 我建议在每个语句的末尾使用分号。有时不要使用它们，有时不要使用它们 - 这会给您带来问题并且是不好的做法:)