- Canvas API:
HTML5 предоставляет элементи связанный с ним API, который позволяет рисовать графику и анимацию. Вот базовый пример использования Canvas API для создания простого игрового цикла:
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
function gameLoop() {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw game objects, update positions, etc.
requestAnimationFrame(gameLoop);
}
// Start the game loop
gameLoop();
</script>
- Ввод с клавиатуры.
Чтобы обрабатывать ввод с клавиатуры в игре, вы можете использовать прослушиватели событий JavaScript. Вот пример перемещения персонажа игрока с помощью клавиш со стрелками:
<script>
var playerX = 0;
var playerY = 0;
function movePlayer(direction) {
if (direction === 'left') {
playerX -= 10;
} else if (direction === 'right') {
playerX += 10;
} else if (direction === 'up') {
playerY -= 10;
} else if (direction === 'down') {
playerY += 10;
}
// Update player's position on the canvas
// ...
}
document.addEventListener('keydown', function (event) {
if (event.key === 'ArrowLeft') {
movePlayer('left');
} else if (event.key === 'ArrowRight') {
movePlayer('right');
} else if (event.key === 'ArrowUp') {
movePlayer('up');
} else if (event.key === 'ArrowDown') {
movePlayer('down');
}
});
</script>
- Мультиплеер с WebSockets:
Если вы хотите создать многопользовательскую игру, вы можете использовать WebSockets для обеспечения связи в реальном времени между игровыми клиентами и сервером. Вот упрощенный пример:
<script>
var socket = new WebSocket('wss://your-game-server.com');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Player connected');
});
// Listen for messages
socket.addEventListener('message', function (event) {
var message = event.data;
// Handle incoming messages from the server
// ...
});
// Send player input to the server
function sendPlayerInput(input) {
socket.send(JSON.stringify(input));
}
</script>
Это всего лишь несколько примеров того, как можно реализовать онлайн-игры в HTML. Существует множество других методов и библиотек, доступных в зависимости от сложности и требований вашей игры.