CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paul Vault Jump Extreme</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.paulvaultjumpextreme5291-body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #F0F4F8;
}
.paulvaultjumpextreme5291-game-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.paulvaultjumpextreme5291-canvas {
border: 2px solid #102A43;
background-color: #48CAE4;
}
.paulvaultjumpextreme5291-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.paulvaultjumpextreme5291-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #0077B6;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.paulvaultjumpextreme5291-button:hover {
background-color: #023E8A;
}
.paulvaultjumpextreme5291-description {
max-width: 300px;
color: #334E68;
}
@media (max-width: 768px) {
.paulvaultjumpextreme5291-game-container {
flex-direction: column;
align-items: center;
}
.paulvaultjumpextreme5291-canvas {
width: 100%;
max-width: 400px;
}
}
</style>
</head>
<body class="paulvaultjumpextreme5291-body">
<div class="paulvaultjumpextreme5291-game-container">
<canvas id="gameCanvas" class="paulvaultjumpextreme5291-canvas" width="800" height="400"></canvas>
<div class="paulvaultjumpextreme5291-controls">
<h1 style="color: #102A43;">Paul Vault Jump Extreme</h1>
<p class="paulvaultjumpextreme5291-description">Help Paul jump on falling obstacles and reach 10000 meters in this exciting vault jumping game!</p>
<h3 style="color: #334E68;">Instructions:</h3>
<ul style="color: #486581;">
<li>Press spacebar or swipe up to jump</li>
<li>Use arrow keys or swipe left/right to move</li>
<li>Land on normal obstacles to jump</li>
<li>Land on golden obstacles for super jumps</li>
<li>Reach 10000 meters to win!</li>
<li>Obstacles disappear only when they reach the ground</li>
</ul>
<button id="startButton" class="paulvaultjumpextreme5291-button">Start Game</button>
<button id="newGameButton" class="paulvaultjumpextreme5291-button">New Game</button>
<button id="pauseButton" class="paulvaultjumpextreme5291-button">Pause</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
let gameLoop;
let player;
let obstacles = [];
let isJumping = false;
let isGameRunning = false;
let isPaused = false;
let cameraY = 0;
let maxHeight = 0;
const NORMAL_JUMP_FORCE = -15;
const SUPER_JUMP_FORCE = -30;
const GROUND_LEVEL = canvas.height - 50;
const WINNING_HEIGHT = 10000;
class Player {
constructor() {
this.width = 30;
this.height = 30;
this.x = canvas.width / 2 - this.width / 2;
this.y = GROUND_LEVEL - this.height;
this.vy = 0;
this.vx = 0;
this.gravity = 0.5;
this.icon = '\uf554'; // Font Awesome running icon
}
draw() {
ctx.fillStyle = '#FF6B6B';
ctx.font = '30px FontAwesome';
ctx.fillText(this.icon, this.x, this.y + this.height - cameraY);
}
jump(force) {
if (!isJumping) {
this.vy = force;
isJumping = true;
}
}
update() {
this.vy += this.gravity;
this.y += this.vy;
this.x += this.vx;
if (this.y > GROUND_LEVEL - this.height) {
this.y = GROUND_LEVEL - this.height;
isJumping = false;
}
if (this.x < 0) this.x = 0;
if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;
// Adjust camera if player goes too high
if (this.y - cameraY < canvas.height / 3) {
cameraY = this.y - canvas.height / 3;
}
// Adjust camera if player falls below the view
if (this.y - cameraY > canvas.height * 2 / 3) {
cameraY = this.y - canvas.height * 2 / 3;
}
// Update max height
const currentHeight = Math.floor((GROUND_LEVEL - this.y) / this.height);
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
// Check for win condition
if (maxHeight >= WINNING_HEIGHT) {
winGame();
}
}
}
class Obstacle {
constructor(x, y, width, height, isSuperJump = false) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.isSuperJump = isSuperJump;
this.icon = isSuperJump ? '\uf5a2' : '\uf6d1'; // Star icon for super jump, cube for normal
this.fallingSpeed = Math.random() * 2 + 1;
}
draw() {
ctx.fillStyle = this.isSuperJump ? '#FFD700' : '#FF9F1C';
ctx.font = '30px FontAwesome';
ctx.fillText(this.icon, this.x, this.y + this.height - cameraY);
}
update() {
this.y += this.fallingSpeed;
}
}
function startGame() {
if (!isGameRunning) {
isGameRunning = true;
player = new Player();
obstacles = [];
cameraY = 0;
maxHeight = 0;
generateInitialObstacles();
gameLoop = setInterval(update, 1000 / 60);
startButton.textContent = 'Restart';
pauseButton.textContent = 'Pause';
isPaused = false;
}
}
function newGame() {
clearInterval(gameLoop);
isGameRunning = false;
startGame();
}
function generateInitialObstacles() {
for (let i = 0; i < 10; i++) {
const platformWidth = Math.random() * 100 + 50;
const platformX = Math.random() * (canvas.width - platformWidth);
const platformY = GROUND_LEVEL - 100 - i * 100;
obstacles.push(new Obstacle(platformX, platformY, platformWidth, 10, Math.random() < 0.2));
}
}
function togglePause() {
if (isGameRunning) {
isPaused = !isPaused;
if (isPaused) {
clearInterval(gameLoop);
pauseButton.textContent = 'Resume';
} else {
gameLoop = setInterval(update, 1000 / 60);
pauseButton.textContent = 'Pause';
}
}
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
ctx.fillStyle = '#48CAE4';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw ground
ctx.fillStyle = '#03045E';
ctx.fillRect(0, GROUND_LEVEL - cameraY, canvas.width, canvas.height);
// Update and draw obstacles
for (let i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].update();
obstacles[i].draw();
// Check for landing on obstacle
if (
player.y + player.height >= obstacles[i].y &&
player.y + player.height <= obstacles[i].y + obstacles[i].height &&
player.x < obstacles[i].x + obstacles[i].width &&
player.x + player.width > obstacles[i].x &&
player.vy > 0
) {
player.y = obstacles[i].y - player.height;
player.vy = 0;
isJumping = false;
if (obstacles[i].isSuperJump) {
player.jump(SUPER_JUMP_FORCE);
} else {
player.jump(NORMAL_JUMP_FORCE);
}
}
// Remove obstacles that reach the ground
if (obstacles[i].y >= GROUND_LEVEL) {
obstacles.splice(i, 1);
}
}
// Generate new obstacles
if (obstacles.length === 0 || obstacles[obstacles.length - 1].y - cameraY > 0) {
const platformWidth = Math.random() * 100 + 50;
const platformX = Math.random() * (canvas.width - platformWidth);
const platformY = obstacles.length === 0 ? cameraY - 100 : obstacles[obstacles.length - 1].y - 100;
obstacles.push(new Obstacle(platformX, platformY, platformWidth, 10, Math.random() < 0.2));
}
player.update();
player.draw();
// Draw height and max height
ctx.fillStyle = '#102A43';
ctx.font = '20px Arial';
const currentHeight = Math.floor((GROUND_LEVEL - player.y) / player.height);
ctx.fillText(`Height: ${currentHeight}m`, 10, 30);
ctx.fillText(`Max Height: ${maxHeight}m`, 10, 60);
}
function winGame() {
clearInterval(gameLoop);
isGameRunning = false;
ctx.fillStyle = '#102A43';
ctx.font = '40px Arial';
ctx.fillText('You Win!', canvas.width / 2 - 70, canvas.height / 2);
ctx.fillText('You reached 10000m!', canvas.width / 2 - 150, canvas.height / 2 + 50);
startButton.textContent = 'Start Game';
}
document.addEventListener('keydown', (e) => {
if (isGameRunning && !isPaused) {
switch (e.code) {
case 'Space':
player.jump(NORMAL_JUMP_FORCE);
break;
case 'ArrowLeft':
player.vx = -5;
break;
case 'ArrowRight':
player.vx = 5;
break;
}
}
});
document.addEventListener('keyup', (e) => {
if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
player.vx = 0;
}
});
let touchStartX, touchStartY;
canvas.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
});
canvas.addEventListener('touchend', (e) => {
if (isGameRunning && !isPaused) {
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const deltaX = touchEndX - touchStartX;
const deltaY = touchEndY - touchStartY;
if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
// Swipe up
player.jump(NORMAL_JUMP_FORCE);
} else if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX < 0) {
// Swipe left
player.vx = -5;
} else {
// Swipe right
player.vx = 5;
}
setTimeout(() => { player.vx = 0; }, 100); // Reset velocity after a short time
}
}
});
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', newGame);
pauseButton.addEventListener('click', togglePause);
</script>
</body>
</html>