Question

我正在尝试用javascript制作无限滚动游戏。

以下代码按预期方式工作（此处无法正常工作，因为无法上传图像）：

ContentService.createTextOutput()

class Vec {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
}

class Rect {
  constructor(src) {
    this.pos = new Vec;
    this.vel = new Vec;
    this.image = new Image();
    this.image.src = src;
  }
  get left() {
    return this.pos.x;
  }
  get right() {
    return this.pos.x + this.image.width;
  }
  get top() {
    return this.pos.y;
  }
  get bottom() {
    return this.pos.y + this.image.height;
  }
}

class Player extends Rect {
  constructor() {
    super("images/frog-still.png");
    this.pos.x = 100;
    this.pos.y = HEIGHT - GROUND_Y - this.image.height;
  }
}

class Enemy extends Rect {
  constructor() {
    super("images/spike.png");
    this.image.width = this.image.width / 4;
    this.image.height = this.image.height / 4;
    this.pos.x = WIDTH;
    this.pos.y = HEIGHT - GROUND_Y - this.image.height;
  }
}

// setup
const ctx = document.getElementById("canvas").getContext("2d");

let isOver = false;

const WIDTH = 600;
const HEIGHT = 400;
const GROUND_Y = 50;

const player = new Player;

let enemies = [];
const MAX_ENEMY = 3;

let isJumping = false;
const JUMP_STRENGTH = -450;
const GRAVITY = 25;

document.addEventListener("keydown", (e) => {
  if (e.keyCode === 38 && isJumping === false) {
    isJumping = true;
    player.vel.y = JUMP_STRENGTH;
  }
}, false);

let lastUpdate = 0;
let random = Math.floor((Math.random() * 2501) + 1000);

function update(dt, now) {
  // update player
  player.vel.y += GRAVITY;
  player.pos.y += player.vel.y * dt;

  if (player.bottom >= HEIGHT - GROUND_Y) {
    isJumping = false;
    player.pos.y = HEIGHT - GROUND_Y - player.image.height;
    player.vel.y = 0;
  }

  // create enemy
  if (now - lastUpdate > random) {
    lastUpdate = now;
    random = Math.floor((Math.random() * 2501) + 1000);
    enemies.push(new Enemy);
  }

  for (let i = 0; i < enemies.length; i++) {
    // update enemy
    enemies[i].vel.x = -300 - (now / 500);
    enemies[i].pos.x += enemies[i].vel.x * dt;

    if (player.right > enemies[i].left && player.left < enemies[i].right && player.bottom > enemies[i].top)
      isOver = true;

    if (enemies[i].right < 0)
      enemies.splice(i, 1);
  }
}

function draw() {
  // draw background
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);

  // draw ground
  ctx.fillStyle = "#0f0";
  ctx.fillRect(0, HEIGHT - GROUND_Y, WIDTH, GROUND_Y);

  // draw player    
  ctx.drawImage(player.image, player.pos.x, player.pos.y, player.image.width, player.image.height);
  // draw enemy
  ctx.fillStyle = "#f00";
  for (let i = 0; i < enemies.length; i++) {
    ctx.drawImage(enemies[i].image, enemies[i].pos.x, enemies[i].pos.y, enemies[i].image.width, enemies[i].image.height);
  }
}

// game loop
const TIMESTEP = 1 / 60;
let accumulator = 0;
let lastRender = 0;

function loop(timestamp) {
  accumulator += (timestamp - lastRender) / 1000;
  lastRender = timestamp;
  while (accumulator >= TIMESTEP) {
    update(TIMESTEP, timestamp);
    accumulator -= TIMESTEP;
  }
  draw();

  if (!isOver)
    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

但是，添加时

<!DOCTYPE html> <html> <head> <title>Jump_Over_It</title> <link href="css/default.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script src="js/main.js"></script> </body> </html>

进入Player类（就像我对Enemy类所做的那样），玩家消失了。如果我做this.image.width = this.image.width / 2; this.image.height = this.image.height / 2;，它说图像宽度和图像高度等于0。为什么会发生这种情况？

如何解决此问题？

Answer 1

我不知道为什么，但是当未渲染图像时，width和height为0。因此，我创建了{{1 }}和beforeRender()。在Player之前调用此方法，并更新图形设置。

我知道这不是您要找的答案，但这是我的最佳选择。

Enemy

ctx.drawImage

为什么我的图像宽度和高度等于0？

1 个答案: