Connect Four风格的游戏我从头开始做。我的第一个小JavaScript项目，所以请对我宽容。
当点击"开始"按钮时，应用程序应该显示游戏板，并将按钮的显示更改为"无"，但以上情况都没有发生。我很确定，为了实现这一点，我已经附加了正确的eventListener和函数，以及显示游戏板的代码。
我创建了一个名为"Game"的类构造函数来保存游戏对象和附加的必要文件。
我还附上了HTML和CSS。
/**
* Listens for click on `#begin-game` and calls startGame() on game object
*/
const game = new Game();
document.getElementById('begin-game').addEventListener('click', function() {
game.startGame();
this.style.display = 'none';
document.getElementById('play-area').style.opacity = '1';
});#begin-game {
width: 200px;
background-color: #645a7e;
border-radius: 8px;
color: #fff;
padding: 25px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 200px;
z-index: 200;
cursor: pointer;
border: none;
font-family: 'Wendy One', sans-serif;
font-size: 25px;
}<html>
<head>
<meta charset = "UTF-8">
<title>Four in a Row with Treehouse</title>
<link href="https://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "css/style.css" />
</head>
<body>
<!--
Start Game Button
When a player clicks this button, the game will begin
-->
<button id = "begin-game">
Start
</button>
<!--
#game-scene: container for entire play area
#play-area: container for the board
.stand-container: the board's vertical support stands
-->
<div id = "game-scene">
<div id = "play-area">
<div class = "stand-container left">
<div class = "stand-leg">
</div>
<div class = "stand-foot">
</div>
<div class = "stand-attachment left">
</div>
</div>
<!--
#game-over will eventually display a game over message to the players
-->
<div id = "game-over">
</div>
<!--
#game-board-underlay: container for HTML tokens
-->
<div id = "game-board-underlay">
<div id = "token" data-column = "0">
</div>
</div>
<!--
SVGs were used to create the board and the "holes" for the Spaces
-->
<svg id = "game-board">
<defs>
<!--
#mask: container for Space SVGs
-->
<mask id="mask" x="0" y="0" width="548" height="472">
<rect x = "0" y = "0" height = "472" width = "548" fill = "white">
</mask>
</defs>
<rect id = "board-back" x="0" y="0" width="548" height="472" mask="url(#mask)" fill-opacity = "1" fill = "#5FCF80"/>
</svg>
<!--
.stand-container: the board's vertical support stands
-->
<div class = "stand-container right">
<div class = "stand-leg">
</div>
<div class = "stand-foot">
</div>
<div class = "stand-attachment right">
</div>
</div>
<div style = "clear:both"></div>
</div>
</div>
<!--
.table: so the board doesn't look like it's floating
-->
<div class = "table">
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src = "js/Game.js"></script>
<script src = "js/Board.js"></script>
<script src = "js/Space.js"></script>
<script src = "js/Player.js"></script>
<script src = "js/Token.js"></script>
<script src = "js/app.js"></script>class Game {
constructor() {
this.board = Board;
this.players = this.createPlayers;
this.ready = ready;
}
/**
* Return active player.
* @return {object} player - The active player.
*/
get activePlayer(){
return this.players.find(player => player.active);
}
/**
* Creates two player objects
* @return {Array} An array of two Player objects.
*/
createPlayers() {
const players = [new Player('Player 1', 1, '#e15258', true),
new Player('Player 2', 2, '#e59a13')]
return players;
}
/**
* Initializes game.
*/
startGame(){
this.board.drawHTMLBoard();
this.activePlayer.activeToken.drawHTMLToken();
this.ready = true;
}
}您的eventListner被触发。查看关注列表的片段https://codesandbox.io/s/javascript-0gwxj
请确保HTML文件中的其余导入加载正确，并且不会引发错误。
我可以通过添加board和ready-to构造函数来运行它，因为它们没有定义。
class Game {
constructor(Board, ready) {
this.board = Board;
this.players = this.createPlayers;
this.ready = ready;
}
/**
* Return active player.
* @return {object} player - The active player.
*/
get activePlayer(){
return this.players.find(player => player.active);
}
/**
* Creates two player objects
* @return {Array} An array of two Player objects.
*/
createPlayers() {
const players = [new Player('Player 1', 1, '#e15258', true),
new Player('Player 2', 2, '#e59a13')]
return players;
}
/**
* Initializes game.
*/
startGame(){
alert('here');
this.board.drawHTMLBoard();
this.activePlayer.activeToken.drawHTMLToken();
this.ready = true;
}
}
/**
* Listens for click on `#begin-game` and calls startGame() on game object
*/
const game = new Game("","");
document.getElementById('begin-game').addEventListener('click', function() {
alert('here');
game.startGame();
this.style.display = 'none';
document.getElementById('play-area').style.opacity = '1';
});