用 JavaScript 和 HTML 创建简单的维多利亚 3 风格游戏
<!DOCTYPE html>
<html>
<head>
<title>维多利亚 3 游戏 - 用 JavaScript 和 HTML 创建</title>
<style>
#game-container {
width: 800px;
height: 600px;
border: 1px solid black;
position: relative;
}
.player {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<h1>用 JavaScript 和 HTML 创建简单的维多利亚 3 风格游戏</h1>
<div id="game-container">
<div id="player" class="player"></div>
</div>
<script>
// 获取游戏容器和玩家元素
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
// 初始化玩家的位置
let playerX = 0;
let playerY = 0;
// 监听键盘事件
document.addEventListener('keydown', (event) => {
// 根据按键调整玩家的位置
switch(event.key) {
case 'ArrowUp':
playerY -= 10;
break;
case 'ArrowDown':
playerY += 10;
break;
case 'ArrowLeft':
playerX -= 10;
break;
case 'ArrowRight':
playerX += 10;
break;
}
// 更新玩家的位置
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
});
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/pUGo 著作权归作者所有。请勿转载和采集!