114 lines
3.3 KiB
PHP
114 lines
3.3 KiB
PHP
<div id="target_world_map">
|
|
<h1>World</h1>
|
|
<p>Use WASD keys to move the character</p>
|
|
<p>Current location: <?= location('x') ?>, <?= location('y') ?></p>
|
|
|
|
<canvas id="canvas"></canvas>
|
|
|
|
<form hx-post="/move" hx-target="target_world_map" hx-swap="outerHTML" id="form_move">
|
|
<?= csrf_field() ?>
|
|
<input type="hidden" name="direction" value="">
|
|
</form>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let char_x = <?= location('x') ?>;
|
|
let char_y = <?= location('y') ?>;
|
|
|
|
// Configuration
|
|
const TILE_SIZE = 40; // Fixed size for each tile
|
|
|
|
// Sample tile map (0 = empty, 1 = filled)
|
|
const tileMap = [
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
];
|
|
|
|
// Turn the value at the player's coordinates to be 1 in the map array
|
|
tileMap[char_y][char_x] = 1;
|
|
|
|
const tileColors = {
|
|
0: '#fff', // Empty tile
|
|
1: '#333' // Wall tile
|
|
};
|
|
|
|
function resizeCanvas() {
|
|
// Calculate the actual dimensions needed for the map
|
|
const mapWidth = tileMap[0].length * TILE_SIZE;
|
|
const mapHeight = tileMap.length * TILE_SIZE;
|
|
|
|
// Get the container's width
|
|
const containerWidth = canvas.parentElement.clientWidth;
|
|
|
|
// Calculate the scale factor to fit the map width to the container
|
|
const scale = Math.min(1, containerWidth / mapWidth);
|
|
|
|
// Set canvas size using the scale factor
|
|
canvas.width = mapWidth * scale;
|
|
canvas.height = mapHeight * scale;
|
|
|
|
// Scale the context to maintain tile dimensions
|
|
ctx.scale(scale, scale);
|
|
|
|
// Render the map after resize
|
|
renderMap();
|
|
}
|
|
|
|
function renderMap() {
|
|
// Clear the canvas
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw each tile
|
|
for (let row = 0; row < tileMap.length; row++) {
|
|
for (let col = 0; col < tileMap[row].length; col++) {
|
|
const tileType = tileMap[row][col];
|
|
const x = col * TILE_SIZE;
|
|
const y = row * TILE_SIZE;
|
|
|
|
ctx.fillStyle = tileColors[tileType];
|
|
ctx.fillRect(x, y, TILE_SIZE, TILE_SIZE);
|
|
|
|
// Draw tile borders
|
|
ctx.strokeStyle = '#999';
|
|
ctx.strokeRect(x, y, TILE_SIZE, TILE_SIZE);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initial setup
|
|
resizeCanvas();
|
|
|
|
// Handle window resizing
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
// On WASD key press, send a POST request to move the character using the form
|
|
window.addEventListener('keydown', (e) => {
|
|
if (!['w', 'a', 's', 'd'].includes(e.key)) return;
|
|
|
|
el = document.querySelector('input[name="direction"]');
|
|
|
|
// update the direction input to be 0-3 based on the key pressed
|
|
// 0 = up, 1 = down, 2 = left, 3 = right
|
|
el.value = {
|
|
'w': 0,
|
|
's': 1,
|
|
'a': 2,
|
|
'd': 3
|
|
}[e.key];
|
|
|
|
htmx.trigger(document.getElementById('form_move'), 'submit');
|
|
});
|
|
</script>
|
|
</div>
|