图像未显示，但显然已加载（Javascript游戏在Wordpress上托管）

问题描述 投票：0回答：1

所以这是交易。我创建了此Sonic主题的“ Brick Breaker”风格的游戏，希望将其托管在Wordpress网站上。最初，该游戏包含8个JS文件，一个CSS文件和一个HTML文件，但出于wordpress的目的，我将所有内容都放入一个文件中。

我的第一个问题是未加载JavaScript，但是图像在页面的一角显示为静态。经过一些重新排列（基本上我的脚本必须按一定顺序加载），我才能使JavaScript正常工作。

现在我遇到了最奇怪的问题--- PNG图像（Sonic和Rings）没有显示给用户，但是在游戏启动时很明显地正在加载它们。我怎么知道我知道这是因为，当我将操纵杆向左移动并让它运行并最终结束游戏时，屏幕右下角的UI会向下计数。

[基本上，图像只是不显示在画布上---好像它们不可见？

是的，我已经尝试过将显示类型从“ none”更改（无论如何都应该使用draw函数将它们绘制到画布上，所以这不是解决方案）。

这是我的代码：

 <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sonic's Ring Grabber (Still In Dev)</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <style>
 #gameScreen {
   border: 1px double black;

}

img {
  display: none;
}

</style>
   <canvas id="gameScreen" width=800 height=600></canvas>
   <img href='sftp://[email protected]/clickandbuilds/BehaviorsSpace/sonicballgame/assets/SpinballSonicJP.png' width="10%" id="sonicBall"/>
   <img href='sftp://[email protected]/clickandbuilds/BehaviorsSpace/sonicballgame/assets/sonicring2.png' id="rings"/>
  <script>

class Ring {
    constructor(game, position) {

        this.image = document.getElementById('rings');
        this.markedForDeletion = false;
        this.game = game;
        this.position = position;
        this.width = 40;
        this.height = 40;


    }
    update() {
        if (detectCollision(this.game.ball, this)) {
            this.markedForDeletion = true;
        }

    }
    draw(ctx) {
        ctx.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);

    }
}
  class Ball {
    constructor(game) {
        this.image = document.getElementById('sonicBall');

        this.gameWidth = game.gameWidth;
        this.gameHeight = game.gameHeight;
        this.size = 60;
        this.reset();
        this.game = game;
    }

    reset() {
        this.speed = {
            x: 2,
            y: 2
        };
        this.position = {
            x: 250,
            y: 400,
        };
    }
    draw(ctx) {
        ctx.drawImage(this.image, this.position.x, this.position.y, this.size, this.size);

    }
    update(deltaTime) {

        this.position.x += this.speed.x;
        this.position.y += this.speed.y;

        //wall on left and right
        if (this.position.x + this.size > this.gameWidth || this.position.x < 0) {
            this.speed.x = -this.speed.x;
        }

        // wall on top and bottom
        if (this.position.y < 0) {
            this.speed.y = -this.speed.y;
        }
        if (this.position.y + this.size > this.gameHeight) {
            this.game.tries--;
            this.reset();
        }


        //check collision with paddle

        if (detectCollision(this, this.game.paddle)) {

            this.speed.y = -this.speed.y;
            this.position.y = this.game.paddle.position.y - this.size;
        }
    }
}
class Paddle {
    constructor(game) {
        this.width = 150;
        this.height = 20;
        this.maxSpeed = 5;
        this.speed = 0;
        this.position = {
            x: game.gameWidth / 2 - this.width / 2,
            y: game.gameHeight - this.height - 10,
        };
    }

    moveLeft() {
        this.speed = -this.maxSpeed;
    }
    moveRight() {
        this.speed = +this.maxSpeed;
    }

    stop() {
        this.speed = 0;
    }
    draw(ctx) {
        ctx.fillStyle = "green";
        ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }

    update(deltaTime) {

        this.position.x += this.speed;

        if (this.position.x < 0) this.position.x = 0;
        if (this.position.x > 650) this.position.x = 650;

    }
}
class InputHandler {
    constructor(paddle, game) {
        document.addEventListener('keydown', event => {
            switch (event.keyCode) {
                case 37:
                    paddle.moveLeft();
                    break;
                case 39:
                    paddle.moveRight();
                    break;
                case 13:
                    game.togglePause();
                    break;
                case 32:
                    game.toggleStart();
                    break;
                case 89:
                game.toggleRestart();
                break;
            }
        });
        document.addEventListener('keyup', event => {
            switch (event.keyCode) {
                case 37:
                    if (paddle.speed < 0)
                        paddle.stop();
                    break;
                case 39:
                    if (paddle.speed > 0)
                        paddle.stop();
                    break;
            }
        });
    }
}
function buildLevel(game, level) {
    let rings = [];

    level.forEach((row, rowIndex) => {
        row.forEach((ring, ringIndex) => {
            if (ring === 1) {
                let position = {
                    x: 82 * ringIndex,
                    y: 40 + 35 * rowIndex
                }
                rings.push(new Ring(game, position));
            }
        });
    });

    return rings;
}


const level1 = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

const level2 = [
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

const level3 = [
    [1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

function detectCollision(ball, gameObject) {
  let leftOfBall = ball.position.x;
  let rightOfBall = ball.position.x + ball.size;
  let topOfBall = ball.position.y;
  let bottomOfBall = ball.position.y + ball.size;

  let leftOfObject = gameObject.position.x;
  let rightOfObject = gameObject.position.x + gameObject.width;
  let topOfObject = gameObject.position.y;
  let bottomOfObject = gameObject.position.y + gameObject.height;

  if (leftOfBall < rightOfObject &&
    rightOfBall > leftOfObject &&
    topOfBall < bottomOfObject &&
    bottomOfBall > topOfObject) {
    return true;
  } else {
    return false;
  }
}
const GAMESTATE = {
    PAUSED: 0,
    RUNNING: 1,
    MENU: 2,
    GAMEOVER: 3
}

class Game {
    constructor(gameWidth, gameHeight) {
        this.gameWidth = gameWidth;
        this.gameHeight = gameHeight;
        this.gamestate = GAMESTATE.MENU;
        this.ball = new Ball(this);
        this.paddle = new Paddle(this);
        this.rings = [];
        this.gameObjects = [];
        this.tries = 3;
        this.levels = [level1, level2, level3]
        this.currentLevel = 0;
        new InputHandler(this.paddle, this);
    }

    start() {

        this.rings = buildLevel(this, this.levels[this.currentLevel]);
        this.gameObjects = [this.ball, this.paddle];

    }

    update(deltaTime) {

        if (this.tries === 0) this.gamestate = GAMESTATE.GAMEOVER;
        if (this.gamestate === GAMESTATE.PAUSED || this.gamestate === GAMESTATE.MENU || this.gamestate === GAMESTATE.GAMEOVER) 
        if (this.rings.length === 0) {
           this.currentLevel++;
           this.ball.reset();
           this.start();
        }
        [...this.gameObjects, ...this.rings].forEach(object => object.update(deltaTime));
        this.gameObjects.forEach((object) => object.update(deltaTime));
        this.rings = this.rings.filter(object => !object.markedForDeletion);
    }

    draw(ctx) {

        [...this.gameObjects, ...this.rings].forEach(object => object.draw(ctx));
        this.gameObjects.forEach(object => object.draw(ctx));
        if (this.gamestate == GAMESTATE.PAUSED) {
            ctx.rect(0, 0, this.gameWidth, this.gameHeight);
            ctx.fillStyle = "rgba(0,0,0,0)";
            ctx.fill();

            ctx.font = "30px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "center";
            ctx.fillText("GAME PAUSED", this.gameWidth / 2, this.gameHeight / 2);
        }
        if (this.gamestate == GAMESTATE.MENU) {
            ctx.rect(0, 0, this.gameWidth, this.gameHeight);
            ctx.fillStyle = "rgba(0,0,0)";
            ctx.fill();

            ctx.font = "30px Arial";
            ctx.fillStyle = "white";
            ctx.textAlign = "center";
            ctx.fillText("TO START, PRESS SPACEBAR", this.gameWidth / 2, this.gameHeight / 2);
            ctx.fillText("WHILE PLAYING, PRESS ENTER TO PAUSE", this.gameWidth / 2, this.gameHeight / 1.5);
        }
        if (this.gamestate == GAMESTATE.GAMEOVER) {
            ctx.rect(0, 0, this.gameWidth, this.gameHeight);
            ctx.fillStyle = "rgba(0,0,0)";
            ctx.fill();
            ctx.font = "30px Arial";
            ctx.fillStyle = "white";
            ctx.textAlign = "center";
            ctx.fillText("GAME OVER", this.gameWidth / 2, this.gameHeight / 2);
            ctx.fillText("PRESS Y TO TRY AGAIN", this.gameWidth / 2, this.gameHeight / 1.5);
        }
        if (this.gamestate == GAMESTATE.RUNNING) {
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "right";
            ctx.fillText("LIVES: " + this.tries, this.gameWidth, this.gameHeight);
        }
    }

    togglePause() {
        if (this.gamestate == GAMESTATE.PAUSED) {
            this.gamestate = GAMESTATE.RUNNING;
        } else {
            this.gamestate = GAMESTATE.PAUSED;
        }
    }

    toggleStart() {
        if (this.gamestate == GAMESTATE.MENU) {
            this.gamestate = GAMESTATE.RUNNING;
        this.rings = [];
        this.tries = 3;
        this.levels = [level1, level2, level3]
        this.currentLevel = 0;
        new InputHandler(this.paddle, this);
        }
    }
    toggleRestart() {
        if (this.gamestate == GAMESTATE.GAMEOVER) {
        this.gamestate = GAMESTATE.MENU;
        this.ball = new Ball(this);
        this.paddle = new Paddle(this);
        this.rings = [];
        this.gameObjects = [];
        this.tries = 3;
        this.levels = [level1, level2, level3]
        this.currentLevel = 0;
        new InputHandler(this.paddle, this);
        }
    }
}
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext('2d');
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

let game = new Game(GAME_WIDTH, GAME_HEIGHT);
game.start();


let lastTime = 0;

//images



function gameLoop(timeStamp) {
    let deltaTime = timeStamp - lastTime;
    lastTime = timeStamp;
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    game.update(deltaTime);
    game.draw(ctx);

    requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

</script>
    </body>
</html>

任何人都不知道这里会发生什么？

所以这是交易。我创建了此Sonic主题的“ Brick Breaker”风格的游戏，希望将其托管在Wordpress网站上。最初，该游戏具有8个JS文件，一个CSS文件和一个HTML文件，但对于...

javascript wordpress 2d-games
1个回答
0
投票

图像标签应使用src属性而不是href属性。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.