rpv game 2d

1

Stats

94 visits, 119 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 7 Oct, 2024.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple 2D Game</title>

<style>

canvas {

background: #eee;

display: block;

margin: 0 auto;

}

body {

text-align: center;

}

</style>

</head>

<body>

<h1>Avoid the Obstacles!</h1>

<canvas id="gameCanvas" width="400" height="600"></canvas>

<script>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// Player properties

const player = {

width: 30,

height: 30,

x: canvas.width / 2 - 15,

y: canvas.height - 50,

speed: 5,

dx: 0

};

// Obstacle properties

const obstacles = [];

const obstacleSpeed = 3;

const obstacleFrequency = 1000;

let lastObstacleTime = 0;

// Game state

let isGameOver = false;

// Draw the player

function drawPlayer() {

ctx.fillStyle = 'blue';

ctx.fillRect(player.x, player.y, player.width, player.height);

}

// Draw the obstacles

function drawObstacles() {

ctx.fillStyle = 'red';

obstacles.forEach(obstacle => {

ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

});

}

// Move the player

function movePlayer() {

player.x += player.dx;

// Boundary check

if (player.x < 0) {

player.x = 0;

} else if (player.x + player.width > canvas.width) {

player.x = canvas.width - player.width;

}

}

// Create new obstacles

function createObstacle() {

const obstacleWidth = Math.random() * 40 + 20;

const x = Math.random() * (canvas.width - obstacleWidth);

const newObstacle = {

x: x,

y: 0,

width: obstacleWidth,

height: 20

};

obstacles.push(newObstacle);

}

// Move the obstacles

function moveObstacles() {

obstacles.forEach(obstacle => {

obstacle.y += obstacleSpeed;

});

// Remove obstacles that have fallen off the screen

obstacles.forEach((obstacle, index) => {

if (obstacle.y > canvas.height) {

obstacles.splice(index, 1);

}

});

}

// Check for collision

function checkCollision() {

obstacles.forEach(obstacle => {

if (

player.x < obstacle.x + obstacle.width &&

player.x + player.width > obstacle.x &&

player.y < obstacle.y + obstacle.height &&

player.y + player.height > obstacle.y

) {

isGameOver = true;

}

});

}

// Clear the canvas

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

// Game loop

function gameLoop(timestamp) {

if (isGameOver) {

ctx.font = '40px Arial';

ctx.fillStyle = 'black';

ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height / 2);

return;

}

clearCanvas();

drawPlayer();

drawObstacles();

movePlayer();

moveObstacles();

checkCollision();

// Create new obstacles based on time

if (timestamp - lastObstacleTime > obstacleFrequency) {

createObstacle();

lastObstacleTime = timestamp;

}

requestAnimationFrame(gameLoop);

}

// Keydown event

function keyDown(e) {

if (e.key === 'ArrowRight') {

player.dx = player.speed;

} else if (e.key === 'ArrowLeft') {

player.dx = -player.speed;

}

}

// Keyup event

function keyUp(e) {

if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {

player.dx = 0;

}

}

// Event listeners

document.addEventListener('keydown', keyDown);

document.addEventListener('keyup', keyUp);

// Start the game loop

requestAnimationFrame(gameLoop);

</script>

</body>

</html>

Disabled Comments have been disabled by the owner.