ROAD-RAGE VIDEO GAME
IF THIS IS TO BIG FOR YOUR SCREEN ZOOM OUT IN YOUR BROWSER AND REFRESH :)

Score: 0
![]()
![]()
![]()
|
STILL WORKING OUT THE BUGS, MAYBE YOU CAN HELP?
GRAB THIS CODE AND ALL THE FILES AND RUN OFF LIKE YOU JUST STOLE THEM :)
<center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROAD-RAGE Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#gameCanvas {
border: 2px solid white;
background-image: url('ROAD.PNG');
background-size: cover;
position: relative;
width: 248px;
height: 1226px;
}
.car {
position: absolute;
width: 109px;
height: 223px;
}
#driver {
width: 109px;
height: 223px;
position: absolute;
right: 0px; /* Align to the right */
bottom: 200px; /* Start position */
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
}
#controls {
position: absolute;
bottom: 10px;
left: 10px;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div id="gameCanvas">
<img src="DRIVER.PNG" id="driver" alt="Driver">
<div id="score">Score: 0</div>
<div id="controls">
<button onclick="startGame()">PLAY GAME</button>
<button onclick="pauseGame()">PAUSE GAME</button>
<button onclick="newGame()">NEW GAME</button>
</div>
</div>
<audio id="backgroundMusic" loop>
<source src="bgmusic.mp3" type="audio/mpeg">
</audio>
<audio id="crashSound">
<source src="crash.mp3" type="audio/mpeg">
</audio>
<audio id="sirenSound">
<source src="siren.mp3" type="audio/mpeg">
</audio>
<script>
const driver = document.getElementById('driver');
const scoreDisplay = document.getElementById('score');
let score = 0;
let gameInterval;
let isGamePaused = false;
let isGameOver = false; // Flag to track game over state
const cars = ['CAR1.PNG', 'CAR2.PNG', 'CAR3.PNG'];
const obstacles = ['GRANNY.PNG', 'POLICE.PNG'];
let carElements = [];
let obstacleElements = [];
const gameCanvas = document.getElementById('gameCanvas');
const driverWidth = 109;
const driverHeight = 223;
function startGame() {
if (isGamePaused) {
isGamePaused = false;
gameLoop();
} else {
score = 0;
scoreDisplay.innerText = `Score: ${score}`;
createCars();
createObstacles();
document.getElementById('backgroundMusic').play();
gameLoop();
}
}
function pauseGame() {
isGamePaused = true;
clearInterval(gameInterval);
document.getElementById('backgroundMusic').pause();
}
function newGame() {
clearInterval(gameInterval);
isGameOver = false; // Reset game over state
score = 0;
scoreDisplay.innerText = `Score: ${score}`;
resetGame();
}
function createCars() {
while (carElements.length < 3) {
const car = document.createElement('img');
car.src = cars[Math.floor(Math.random() * cars.length)];
car.className = 'car';
car.style.left = '0px'; // Align to the left
car.style.top = `${Math.random() * (gameCanvas.clientHeight - 223)}px`;
// Check for overlap with existing cars
const overlapping = carElements.some(existingCar => {
return isOverlapping(car, existingCar);
});
if (!overlapping) {
gameCanvas.appendChild(car);
carElements.push(car);
}
}
setTimeout(createCars, 2000); // Increase delay between car generations
}
function createObstacles() {
while (obstacleElements.length < 2) {
const obstacle = document.createElement('img');
obstacle.src = obstacles[Math.floor(Math.random() * obstacles.length)];
obstacle.className = 'car';
obstacle.style.right = '0px'; // Align to the right
obstacle.style.top = `${Math.random() * (gameCanvas.clientHeight - 223) + (gameCanvas.clientHeight - 223)}px`;
// Check for overlap with existing obstacles and prevent granny from overlapping with police
const overlapping = obstacleElements.some(existingObstacle => {
return isOverlapping(obstacle, existingObstacle);
});
if (obstacle.src.includes('GRANNY.PNG')) {
const policeObstacle = obstacleElements.find(ob => ob.src.includes('POLICE.PNG'));
if (policeObstacle && isOverlapping(obstacle, policeObstacle)) {
continue; // Skip adding granny if it overlaps with police
}
}
if (!overlapping) {
gameCanvas.appendChild(obstacle);
obstacleElements.push(obstacle);
}
}
setTimeout(createObstacles, 3000); // Increase delay between obstacle generations
}
function isOverlapping(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
function gameLoop() {
gameInterval = setInterval(() => {
if (!isGamePaused && !isGameOver) {
moveCars();
moveObstacles();
checkCollisions();
}
}, 100);
}
function moveCars() {
carElements.forEach(car => {
let top = parseInt(car.style.top);
top += 5; // Move down
if (top > gameCanvas.clientHeight) {
top = -223; // Reset position
score++;
scoreDisplay.innerText = `Score: ${score}`;
// Check for win condition
if (score >= 20) {
alert('Congratulations! You have won the game!');
alert('You won a prize!'); // Prize message
window.location.href = "https://www.shazizz.net/prize.html"; // Redirect to prize page
}
}
car.style.top = `${top}px`;
});
}
function moveObstacles() {
obstacleElements.forEach(obstacle => {
let top = parseInt(obstacle.style.top);
top -= 5; // Move up
if (top < -223) {
top = gameCanvas.clientHeight; // Reset position
}
obstacle.style.top = `${top}px`;
});
}
function checkCollisions() {
const driverRect = driver.getBoundingClientRect();
carElements.forEach(car => {
const carRect = car.getBoundingClientRect();
if (isColliding(driverRect, carRect)) {
driver.src = 'CRASH.PNG'; // Change driver image
car.src = 'CRASH.PNG'; // Change car image
document.getElementById('crashSound').play(); // Play crash sound
isGameOver = true; // Set game over state
clearInterval(gameInterval); // Stop the game loop
setTimeout(() => {
alert('Crashed into a car!');
newGame();
}, 1000); // Delay alert for crash
}
});
obstacleElements.forEach(obstacle => {
const obstacleRect = obstacle.getBoundingClientRect();
if (isColliding(driverRect, obstacleRect)) {
if (obstacle.src.includes('POLICE.PNG')) {
document.getElementById('sirenSound').play(); // Play siren sound
isGameOver = true; // Set game over state
clearInterval(gameInterval); // Stop the game loop
setTimeout(() => {
alert('You are going to jail!');
newGame();
}, 1000); // Delay alert for police
}
}
});
}
function isColliding(rect1, rect2) {
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
function resetGame() {
carElements.forEach(car => car.remove());
obstacleElements.forEach(obstacle => obstacle.remove());
carElements = [];
obstacleElements = [];
driver.style.bottom = '200px'; // Reset driver position
driver.style.right = '0px'; // Reset driver position
driver.src = 'DRIVER.PNG'; // Reset driver image
isGamePaused = false;
isGameOver = false; // Reset game over state
}
document.addEventListener('keydown', (event) => {
const left = parseInt(driver.style.left) || (parseInt(gameCanvas.clientWidth) - 109);
const bottom = parseInt(driver.style.bottom);
switch (event.key) {
case 'ArrowLeft':
driver.style.left = `${Math.max(0, left - 10)}px`;
break;
case 'ArrowRight':
driver.style.left = `${Math.min(248 - driverWidth, left + 10)}px`;
break;
case 'ArrowUp':
driver.style.bottom = `${Math.min(1226 - driverHeight, bottom + 10)}px`;
// Move driver back to bottom if it reaches the top
if (bottom >= 1226 - driverHeight) {
driver.style.bottom = '20px';
}
break;
case 'ArrowDown':
driver.style.bottom = `${Math.max(0, bottom - 10)}px`;
break;
case 'Delete': // Reset and reload the page if Delete key is pressed
location.reload();
break;
}
});
</script>
</body>
</html>
</center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROAD-RAGE Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#gameCanvas {
border: 2px solid white;
background-image: url('ROAD.PNG');
background-size: cover;
position: relative;
width: 248px;
height: 1226px;
}
.car {
position: absolute;
width: 109px;
height: 223px;
}
#driver {
width: 109px;
height: 223px;
position: absolute;
right: 0px; /* Align to the right */
bottom: 200px; /* Start position */
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
}
#controls {
position: absolute;
bottom: 10px;
left: 10px;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div id="gameCanvas">
<img src="DRIVER.PNG" id="driver" alt="Driver">
<div id="score">Score: 0</div>
<div id="controls">
<button onclick="startGame()">PLAY GAME</button>
<button onclick="pauseGame()">PAUSE GAME</button>
<button onclick="newGame()">NEW GAME</button>
</div>
</div>
<audio id="backgroundMusic" loop>
<source src="bgmusic.mp3" type="audio/mpeg">
</audio>
<audio id="crashSound">
<source src="crash.mp3" type="audio/mpeg">
</audio>
<audio id="sirenSound">
<source src="siren.mp3" type="audio/mpeg">
</audio>
<script>
const driver = document.getElementById('driver');
const scoreDisplay = document.getElementById('score');
let score = 0;
let gameInterval;
let isGamePaused = false;
let isGameOver = false; // Flag to track game over state
const cars = ['CAR1.PNG', 'CAR2.PNG', 'CAR3.PNG'];
const obstacles = ['GRANNY.PNG', 'POLICE.PNG'];
let carElements = [];
let obstacleElements = [];
const gameCanvas = document.getElementById('gameCanvas');
const driverWidth = 109;
const driverHeight = 223;
function startGame() {
if (isGamePaused) {
isGamePaused = false;
gameLoop();
} else {
score = 0;
scoreDisplay.innerText = `Score: ${score}`;
createCars();
createObstacles();
document.getElementById('backgroundMusic').play();
gameLoop();
}
}
function pauseGame() {
isGamePaused = true;
clearInterval(gameInterval);
document.getElementById('backgroundMusic').pause();
}
function newGame() {
clearInterval(gameInterval);
isGameOver = false; // Reset game over state
score = 0;
scoreDisplay.innerText = `Score: ${score}`;
resetGame();
}
function createCars() {
while (carElements.length < 3) {
const car = document.createElement('img');
car.src = cars[Math.floor(Math.random() * cars.length)];
car.className = 'car';
car.style.left = '0px'; // Align to the left
car.style.top = `${Math.random() * (gameCanvas.clientHeight - 223)}px`;
// Check for overlap with existing cars
const overlapping = carElements.some(existingCar => {
return isOverlapping(car, existingCar);
});
if (!overlapping) {
gameCanvas.appendChild(car);
carElements.push(car);
}
}
setTimeout(createCars, 2000); // Increase delay between car generations
}
function createObstacles() {
while (obstacleElements.length < 2) {
const obstacle = document.createElement('img');
obstacle.src = obstacles[Math.floor(Math.random() * obstacles.length)];
obstacle.className = 'car';
obstacle.style.right = '0px'; // Align to the right
obstacle.style.top = `${Math.random() * (gameCanvas.clientHeight - 223) + (gameCanvas.clientHeight - 223)}px`;
// Check for overlap with existing obstacles and prevent granny from overlapping with police
const overlapping = obstacleElements.some(existingObstacle => {
return isOverlapping(obstacle, existingObstacle);
});
if (obstacle.src.includes('GRANNY.PNG')) {
const policeObstacle = obstacleElements.find(ob => ob.src.includes('POLICE.PNG'));
if (policeObstacle && isOverlapping(obstacle, policeObstacle)) {
continue; // Skip adding granny if it overlaps with police
}
}
if (!overlapping) {
gameCanvas.appendChild(obstacle);
obstacleElements.push(obstacle);
}
}
setTimeout(createObstacles, 3000); // Increase delay between obstacle generations
}
function isOverlapping(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
function gameLoop() {
gameInterval = setInterval(() => {
if (!isGamePaused && !isGameOver) {
moveCars();
moveObstacles();
checkCollisions();
}
}, 100);
}
function moveCars() {
carElements.forEach(car => {
let top = parseInt(car.style.top);
top += 5; // Move down
if (top > gameCanvas.clientHeight) {
top = -223; // Reset position
score++;
scoreDisplay.innerText = `Score: ${score}`;
// Check for win condition
if (score >= 20) {
alert('Congratulations! You have won the game!');
alert('You won a prize!'); // Prize message
window.location.href = "https://www.shazizz.net/prize.html"; // Redirect to prize page
}
}
car.style.top = `${top}px`;
});
}
function moveObstacles() {
obstacleElements.forEach(obstacle => {
let top = parseInt(obstacle.style.top);
top -= 5; // Move up
if (top < -223) {
top = gameCanvas.clientHeight; // Reset position
}
obstacle.style.top = `${top}px`;
});
}
function checkCollisions() {
const driverRect = driver.getBoundingClientRect();
carElements.forEach(car => {
const carRect = car.getBoundingClientRect();
if (isColliding(driverRect, carRect)) {
driver.src = 'CRASH.PNG'; // Change driver image
car.src = 'CRASH.PNG'; // Change car image
document.getElementById('crashSound').play(); // Play crash sound
isGameOver = true; // Set game over state
clearInterval(gameInterval); // Stop the game loop
setTimeout(() => {
alert('Crashed into a car!');
newGame();
}, 1000); // Delay alert for crash
}
});
obstacleElements.forEach(obstacle => {
const obstacleRect = obstacle.getBoundingClientRect();
if (isColliding(driverRect, obstacleRect)) {
if (obstacle.src.includes('POLICE.PNG')) {
document.getElementById('sirenSound').play(); // Play siren sound
isGameOver = true; // Set game over state
clearInterval(gameInterval); // Stop the game loop
setTimeout(() => {
alert('You are going to jail!');
newGame();
}, 1000); // Delay alert for police
}
}
});
}
function isColliding(rect1, rect2) {
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
function resetGame() {
carElements.forEach(car => car.remove());
obstacleElements.forEach(obstacle => obstacle.remove());
carElements = [];
obstacleElements = [];
driver.style.bottom = '200px'; // Reset driver position
driver.style.right = '0px'; // Reset driver position
driver.src = 'DRIVER.PNG'; // Reset driver image
isGamePaused = false;
isGameOver = false; // Reset game over state
}
document.addEventListener('keydown', (event) => {
const left = parseInt(driver.style.left) || (parseInt(gameCanvas.clientWidth) - 109);
const bottom = parseInt(driver.style.bottom);
switch (event.key) {
case 'ArrowLeft':
driver.style.left = `${Math.max(0, left - 10)}px`;
break;
case 'ArrowRight':
driver.style.left = `${Math.min(248 - driverWidth, left + 10)}px`;
break;
case 'ArrowUp':
driver.style.bottom = `${Math.min(1226 - driverHeight, bottom + 10)}px`;
// Move driver back to bottom if it reaches the top
if (bottom >= 1226 - driverHeight) {
driver.style.bottom = '20px';
}
break;
case 'ArrowDown':
driver.style.bottom = `${Math.max(0, bottom - 10)}px`;
break;
case 'Delete': // Reset and reload the page if Delete key is pressed
location.reload();
break;
}
});
</script>
</body>
</html>
</center>