Question

我正在制作一个在足球场上进行的比赛，你可以作为一名足球运动员四处走动。该字段将绘制，但玩家不会在屏幕上绘制，我不知道为什么，也不会在控制台中返回错误。也许它与命名空间有关？

var canvas = document.getElementById("cvs"),
    context = canvas.getContext("2d"),
    GAME = GAME || {},
    fps = 10,
    drawInterval,
    playersImg = new Image(),
    keysDown = {};

playersImg.src = "source/img/players.png";

canvas.width = 800,
canvas.height = 400;

// Disable blurring when images get resized
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

// The game namespace
GAME = {
    gen: {
        x: canvas.width,
        y: canvas.height
    },
    player: {
        x: canvas.width /2,
        y: canvas.height /2,
        X: 13
    },
    players: {
        messi: [75, 25],
        ronaldo: [50, 50],
        balotelli: [25, 75]
    },
    team1: {
        goals: 0
    },
    team2: {
        goals: 0
    },
    func: {
        // Draws the soccer field
        drawField: function (x, y) {
            // Drawing grass
            context.beginPath();
            context.rect(0, 0, x, y);
            context.fillStyle = "#526F35";
            context.fill();
            context.closePath();

            // Drawing middle white circles
            context.beginPath();
            context.arc(x / 2, y / 2, 50, 0, 2 * Math.PI, false);
            context.moveTo(x / 2, y / 2);
            context.arc(x / 2, y / 2, 5, 0, 2 * Math.PI, false);

            // Drawing all the white lines
            context.moveTo(800, 100);
            context.lineTo(725, 100);
            context.lineTo(725, 300);
            context.lineTo(800, 300);
            context.moveTo(0, 100);
            context.lineTo(75, 100);
            context.lineTo(75, 300);
            context.lineTo(0, 300);
            context.moveTo(x / 2, 0);
            context.lineTo(x / 2, y);

            // How all the lines and circles are styled
            context.lineWidth = 5;
            context.strokeStyle = "#ffffff";
            context.stroke();
            context.closePath();
        },
        drawPlayer: function (x, y, posX, posY) {
            context.drawImage(playersImg, x, y, 6, 8, posX, posY, 24, 32);
        },
        checkInput: function (e) {
            if (keysDown[e] === 65) {
                GAME.player.x = GAME.player.x - GAME.players.messi[0];
                game.player.X = 7;
                console.log("left");
            } else if (keysDown[e] === 68) {
                GAME.player.x = GAME.player.x + GAME.players.messi[0];
                game.player.X = 0;
                console.log("right");
            } else if (keysDown[e] === 83) {
                GAME.player.y = GAME.player.y + GAME.players.messi[0];
                console.log("down");
            } else if (keysDown[e] === 87) {
                GAME.player.y = GAME.player.y - GAME.players.messi[0];
                console.log("up");
            } else {
                GAME.player.X = 13;
                console.log();
            }
        },
        startDraw: function () {
            GAME.func.stopDraw();
            drawInterval = setInterval(GAME.func.draw, fps);
        },
        stopDraw: function () {
            clearInterval(drawInterval);
        },
        draw: function () {
            context.clearRect(0,0, GAME.gen.x, GAME.gen.y);
            GAME.func.drawField(GAME.gen.x, GAME.gen.y);
            GAME.func.drawPlayer(GAME.player.X, GAME.player.x, GAME.player.y);
        }
    }
};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
    GAME.func.checkInput(e);
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

如果重要的话我有win7 64位和chrome。

Answer 1

您对drawPlayer的调用看起来不正确，参数计数错误。

GAME.func.drawPlayer(GAME.player.X, GAME.player.x, GAME.player.y)

VS

drawPlayer: function (x, y, posX, posY)

HTML5 Canvas不会将我的图像绘制到屏幕上（没有错误）

1 个答案: