用JS和HTML打造文明时代游戏:从零开始的简单框架
<!DOCTYPE html>
<html>
<head>
<title>文明时代游戏</title>
<style>
#game-board {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.tile {
width: 100px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>文明时代游戏</h1>
<div id="game-board"></div>
<script src="game.js"></script>
</body>
</html>
<p>// 创建游戏地图
const gameBoard = document.getElementById('game-board');
const boardSize = 4; // 游戏地图的大小(4x4)</p>
<p>function createGameBoard() {
for (let i = 0; i < boardSize * boardSize; i++) {
const tile = document.createElement('div');
tile.className = 'tile';
gameBoard.appendChild(tile);
}
}</p>
<p>// 初始化游戏
function initGame() {
createGameBoard();
}</p>
<p>// 开始游戏
initGame();</p>
原文地址: http://www.cveoy.top/t/topic/pUGC 著作权归作者所有。请勿转载和采集!