Я хочу построить шахматную игру с электроном, но, похоже, это не работает.консоль ничего не возвращает и на холсте ничего не отображается после запуска функции refresh.gc - это контекст файла дерева canvas
:-Активы---изображений----- шахматная xxx.svg-script--- 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();
}
};