Create Your Own HTML RPG Game: Simple Tutorial and Code
<!DOCTYPE html>
<html>
<head>
<title>RPG Game</title>
<style>
html, body {
font-family: sans-serif;
font-size: 16px;
}
#game-container {
width: 800px;
margin: auto;
}
.game-controls {
text-align: center;
}
.game-controls input {
margin: 0 10px;
}
.game-status {
font-size: 20px;
font-weight: bold;
color: #f00;
}
.game-map {
border: 2px solid #000;
width: 800px;
height: 400px;
background-color: #ccc;
}
.player {
position: absolute;
width: 32px;
height: 32px;
background-image: url('player.png');
}
</style>
</head>
<body>
<div id='game-container'>
<div class='game-controls'>
<input type='button' id='up' value='Up' />
<input type='button' id='down' value='Down' />
<input type='button' id='left' value='Left' />
<input type='button' id='right' value='Right' />
</div>
<div class='game-status'></div>
<div class='game-map'>
<div class='player'></div>
</div>
</div>
<script>
// Get game elements
const container = document.getElementById('game-container');
const status = document.querySelector('.game-status');
const map = document.querySelector('.game-map');
const player = document.querySelector('.player');
<pre><code>// Set starting position
let playerPosition = {
x: 0,
y: 0
};
// Get control buttons
const upButton = document.getElementById('up');
const downButton = document.getElementById('down');
const leftButton = document.getElementById('left');
const rightButton = document.getElementById('right');
// Set player movement
upButton.addEventListener('click', moveUp);
downButton.addEventListener('click', moveDown);
leftButton.addEventListener('click', moveLeft);
rightButton.addEventListener('click', moveRight);
// Move player up
function moveUp() {
if (playerPosition.y > 0) {
playerPosition.y--;
player.style.top = playerPosition.y * 32 + 'px';
status.innerText = 'Player moves to (' + playerPosition.x + ', ' + playerPosition.y + ')';
}
}
// Move player down
function moveDown() {
if (playerPosition.y < 11) {
playerPosition.y++;
player.style.top = playerPosition.y * 32 + 'px';
status.innerText = 'Player moves to (' + playerPosition.x + ', ' + playerPosition.y + ')';
}
}
// Move player left
function moveLeft() {
if (playerPosition.x > 0) {
playerPosition.x--;
player.style.left = playerPosition.x * 32 + 'px';
status.innerText = 'Player moves to (' + playerPosition.x + ', ' + playerPosition.y + ')';
}
}
// Move player right
function moveRight() {
if (playerPosition.x < 24) {
playerPosition.x++;
player.style.left = playerPosition.x * 32 + 'px';
status.innerText = 'Player moves to (' + playerPosition.x + ', ' + playerPosition.y + ')';
}
}
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnvH 著作权归作者所有。请勿转载和采集!