Question

-在javaScript-中我是编程新手，所以可能会出现非常愚蠢的错误。当我运行代码时，我只能看到游戏的背景，而不能看到玩家。没有错误，这是我的第一个游戏，所以我不知道如何调试它。代码（启动和加载功能在按钮上）-

HTML：

<!DOCTYPE HTML>
<HTML>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script type="text/javascript" src="player.js"></script>
</body>
</html>

javaScript

//player Image
let pReady = false;
let pImage = new Image();
pImage.onload = function () {
    pReady = true;
}
//virus image
let vImage = new Image();
vImage.onload = function () {
    pReady = true;
}

vImage.src = "img/virus.png";
pImage.src = "img/emoji-mask.png";
let then = 0;

//Game objects
let player = {
    speed: 80,
    x: 270,
    y: 290
};
let virus = {
    speed: 85,
    x: 2,
    y: 2
};

//move virus
function moveVirus() {
    if (virus.x <= player.x) {
        virus.x += 1;
    }
    else if (virus.y <= player.y) {
        virus.y += 1;
    }
    else if (virus.y >= player.y) {
        virus.y -= 1;
    }
    else if (virus.x >= player.x) {
        virus.x -= 1;
    }
}
setInterval(moveVirus, 20);

//keyboard
let keysDown = {};
addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
    e.preventDefault();
}, false);
addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
    e.preventDefault();
}    , false);
//move player
function update(modifier) {
    if (38 in keysDown) {
        player.y -= player.speed * modifier;
    }
    else if (40 in keysDown) {
        player.y += player.speed * modifier;
    }
    else if (37 in keysDown) {
        player.x -= player.speed * modifier;
    }
    else if (39 in keysDown) {
        player.x += player.speed * modifier;
    }
    //walls
    if (player.x <= 0) {
        player.x = 1;
    }
    if (player.y <= 0) {
        player.y = 1;
    }
    if (player.y + 45 >= 600) {
        player.y = 554;
    }
    if (player.x + 45 >= 600) {
        player.x = 554;
    }
}

/*function render(c) {
    c.clearRect(0, 0, 600, 600)
    if (pReady == true) {
        c.drawImage(pImage, player.x, player.y, 45, 45);
        c.drawImage(vImage, virus.x, virus.y, 50, 45);
    }

}*/

//screen
let ctx = null;
let blockW = 60;
let blockH = 60;
let mapW = 10;
let mapH = 10;
let now = Date.now();
let delta = now - then;

let gameMap = [
    0, 0, 0, 0, 1, 1, 0, 0, 0, 0,
    0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 0, 1, 1, 1, 1, 0, 1, 0,
    0, 1, 0, 1, 0, 0, 0, 0, 1, 0,
    0, 0, 0, 0, 0, 1, 1, 0, 1, 0,
    0, 1, 1, 1, 0, 1, 1, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
    0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];

window.onload = function () {
    ctx = document.getElementById("myCanvas").getContext('2d');

    update(delta / 1000);
    render(ctx);

    then = now;

    requestAnimationFrame(setImage);

    this.requestAnimationFrame(setImage);
    ctx.font = "bold 10 pt sans-serif";
};

function render(c) {
    c.clearRect(0, 0, 600, 600)
    if (pReady == true) {
        c.drawImage(pImage, player.x, player.y, 45, 45);
        c.drawImage(vImage, virus.x, virus.y, 50, 45);
    }

}

function setImage() {
    if (ctx == null) { return; }
    for (let y = 0; y < mapH; y++) {
        for (let x = 0; x < mapW; x++) {
            switch (gameMap[((y * mapW) + x)]) {
                case 0:
                    ctx.fillStyle = "dimgrey";
                    break;
                default:
                    ctx.fillStyle = "#00ff00";
            }
            ctx.fillRect(x * blockW, y * blockH, blockW, blockH);
        }
    }
    /*ctx.fillStyle = "green";
    ctx.fillText("Score: " + 20, 10);*/

}

//let w = window;
//requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame ||         
w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

function start() {
    console.log('starting');
    then = Date.now();
    setImage();
}

start();

尝试制作吃豆人游戏并导致游戏地图无法与玩家一起运行

0 个答案: