CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One-Tap Jumper</title>
<style>
.one-tap-jumper3571-body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.one-tap-jumper3571-game-container {
display: flex;
flex-direction: column;
align-items: center;
}
.one-tap-jumper3571-game-area {
width: 300px;
height: 150px;
background-color: #87CEEB;
position: relative;
overflow: hidden;
border: 2px solid #333;
border-radius: 10px;
}
.one-tap-jumper3571-player {
width: 20px;
height: 20px;
background-color: #FF6347;
position: absolute;
bottom: 20px;
right: 20px;
border-radius: 50%;
transition: transform 0.2s;
}
.one-tap-jumper3571-obstacle {
width: 20px;
height: 20px;
background-color: #4CAF50;
position: absolute;
bottom: 20px;
left: -20px;
border-radius: 5px;
}
.one-tap-jumper3571-ground {
width: 100%;
height: 20px;
background-color: #8B4513;
position: absolute;
bottom: 0;
}
.one-tap-jumper3571-background {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
animation: slide 20s linear infinite reverse;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.one-tap-jumper3571-controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
.one-tap-jumper3571-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.one-tap-jumper3571-button:hover {
background-color: #45a049;
}
.one-tap-jumper3571-score, .one-tap-jumper3571-high-score {
font-size: 18px;
margin-top: 10px;
}
.one-tap-jumper3571-game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #FF6347;
display: none;
}
.one-tap-jumper3571-info {
max-width: 300px;
text-align: center;
margin-top: 20px;
}
@media (min-width: 768px) {
.one-tap-jumper3571-game-container {
flex-direction: row;
align-items: flex-start;
}
.one-tap-jumper3571-info {
margin-left: 20px;
text-align: left;
}
}
</style>
</head>
<body class="one-tap-jumper3571-body">
<div class="one-tap-jumper3571-game-container">
<div>
<div class="one-tap-jumper3571-game-area">
<div class="one-tap-jumper3571-background"></div>
<div class="one-tap-jumper3571-player"></div>
<div class="one-tap-jumper3571-obstacle"></div>
<div class="one-tap-jumper3571-ground"></div>
<div class="one-tap-jumper3571-game-over">Game Over</div>
</div>
<div class="one-tap-jumper3571-score">Score: <span id="score">0</span></div>
<div class="one-tap-jumper3571-high-score">High Score: <span id="highScore">0</span></div>
<div class="one-tap-jumper3571-controls">
<button class="one-tap-jumper3571-button" id="startButton">Start</button>
<button class="one-tap-jumper3571-button" id="newGameButton">New Game</button>
</div>
</div>
<div class="one-tap-jumper3571-info">
<h1>One-Tap Jumper</h1>
<p>A simple one-tap game where you jump over obstacles.</p>
<h2>How to play:</h2>
<ul>
<li>Tap or click anywhere to make the player jump</li>
<li>Avoid obstacles by jumping over them</li>
<li>Each obstacle you pass increases your score</li>
<li>The game gets faster as you progress</li>
<li>The game ends if you hit an obstacle</li>
</ul>
</div>
</div>
<script>
const player = document.querySelector('.one-tap-jumper3571-player');
const obstacle = document.querySelector('.one-tap-jumper3571-obstacle');
const gameArea = document.querySelector('.one-tap-jumper3571-game-area');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('highScore');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const gameOverElement = document.querySelector('.one-tap-jumper3571-game-over');
let isJumping = false;
let score = 0;
let highScore = localStorage.getItem('highScore') || 0;
let gameLoop;
let obstacleInterval;
let isGameRunning = false;
let gameSpeed = 5;
highScoreElement.textContent = highScore;
function jump() {
if (!isJumping && isGameRunning) {
isJumping = true;
let jumpHeight = 0;
let jumpUp = true;
const jumpInterval = setInterval(() => {
if (jumpUp) {
jumpHeight += 5;
if (jumpHeight >= 60) {
jumpUp = false;
}
} else {
jumpHeight -= 5;
if (jumpHeight <= 0) {
clearInterval(jumpInterval);
isJumping = false;
jumpHeight = 0;
}
}
player.style.transform = `translateY(-${jumpHeight}px)`;
}, 20);
}
}
function moveObstacle() {
let obstaclePosition = -20;
obstacleInterval = setInterval(() => {
if (obstaclePosition > 320) {
obstaclePosition = -20;
score++;
scoreElement.textContent = score;
if (score % 5 === 0) {
gameSpeed += 0.5;
}
}
obstaclePosition += gameSpeed;
obstacle.style.left = `${obstaclePosition}px`;
const playerRect = player.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();
if (
playerRect.left < obstacleRect.right &&
playerRect.right > obstacleRect.left &&
playerRect.bottom > obstacleRect.top
) {
gameOver();
}
}, 20);
}
function gameOver() {
clearInterval(obstacleInterval);
cancelAnimationFrame(gameLoop);
isGameRunning = false;
gameOverElement.style.display = 'block';
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore);
highScoreElement.textContent = highScore;
}
}
function startGame() {
if (!isGameRunning) {
isGameRunning = true;
score = 0;
gameSpeed = 5;
scoreElement.textContent = score;
gameOverElement.style.display = 'none';
obstacle.style.left = '-20px';
moveObstacle();
gameLoop = requestAnimationFrame(updateGame);
}
}
function updateGame() {
if (isGameRunning) {
gameLoop = requestAnimationFrame(updateGame);
}
}
function resetGame() {
clearInterval(obstacleInterval);
cancelAnimationFrame(gameLoop);
isGameRunning = false;
score = 0;
gameSpeed = 5;
scoreElement.textContent = score;
obstacle.style.left = '-20px';
gameOverElement.style.display = 'none';
player.style.transform = 'translateY(0)';
}
gameArea.addEventListener('click', jump);
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', resetGame);
// Touch events for mobile
gameArea.addEventListener('touchstart', (e) => {
e.preventDefault();
jump();
});
// Keyboard controls
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' || e.code === 'ArrowUp') {
jump();
}
});
</script>
</body>
</html>