Question

我想用电子游戏，但似乎行不通。
操作刷新后，控制台什么也不会返回，并且在画布上没有任何内容。

gc是画布的上下文

文件树：
-资产
---图像
----- chess-xxx.svg
-脚本
--- controller.js
---视图
----- chess.js
----- renderer.js

代码如下：

chess.js

function chess(gc) {

    var getChessSet = () => {
        //chess names
        var chess = ['bishop', 'king', 'knight', 'pawn', 'queen', 'rook'];
        chessSet = {};
        chess.forEach((value, index, array) => {
            var img = new Image();
            img.src = './assets/images/chess-' + value + '.svg'
            chessSet[value] = img;
        });
        return chessSet;
    }

    var chessImagesE = getChessSet();

    this.refresh = () => {
        gc.drawImage(chessImagesE['rook'], 0, 0);
    }
}

module.exports = chess;

controller.js

const width = document.getElementById('gameArea').width,
    height = document.getElementById('gameArea').width;

(function resize() {
    document.getElementById('gameArea').style.width = width;
    document.getElementById('gameArea').style.height = height;
}());

const renderer = require('./view/renderer.js');
const service = require('./service/service.js');
const playerControl = require('./service/playerControl.js');
const AIControl = require('./service/AIControl.js');

var gameArea = document.getElementById('gameArea');
var gameAreaGC = gameArea.getContext('2d');

var gameRenderer = new renderer(gameAreaGC, width, height);
var gameService = new service(gameRenderer.refresh);

gameRenderer.refresh();

document.querySelector("#gameArea").addEventListener("click", (e) => {
    gameService.mouseClicked(e.offsetX, e.offsetY);
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Chess</title>
</head>

<body>

    <div id="container">        
        <div id="gameAreaContainer">
            <canvas id="gameArea" width="800" height="800" ></canvas>
        </div>
    </div>

    <nav id="menu">

    </nav>

    <script>
        require('./scripts/controller.js');
    </script>
</body>

</html>

renderer.js：

const board = require('./board.js');
const chess = require('./chess.js');

const colorTheme909 = {
    boardLight: "#F2F2F2",
    boardDark: "#828282",
    chessS: "#45d9fd",
    chessE: "#ee2560"
}

module.exports = function renderer(gc, width, height) {

    var boardRenderer = new board(gc, width, height, colorTheme909);
    var chessRenderer = new chess(gc);

    this.refresh = () => {
        boardRenderer.refresh();
        chessRenderer.refresh();
    }
};

无法在画布上绘制SVG

0 个答案: