Untitled
unknown
plain_text
10 months ago
25 kB
14
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpongeBob vs Weezer Dodge Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(180deg, #87CEEB 0%, #4682B4 100%);
overflow: hidden;
height: 100vh;
}
.game-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.ocean-floor {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(180deg, #F4A460 0%, #D2691E 100%);
border-top: 3px solid #8B4513;
}
.spongebob {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 80px;
background: #FFFF00;
border: 3px solid #000;
border-radius: 10px;
transition: left 0.05s ease-out, bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10;
}
.spongebob.jumping {
bottom: 220px;
}
.spongebob::before {
content: '👀';
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
}
.spongebob::after {
content: '😊';
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
}
.weezer {
position: absolute;
width: 50px;
height: 50px;
background: #0066CC;
border: 2px solid #000;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
animation: fall linear;
}
.obstacle {
position: absolute;
width: 40px;
height: 60px;
background: #8B4513;
border: 2px solid #654321;
border-radius: 5px;
bottom: 100px;
animation: slide-left linear;
}
.obstacle::before {
content: '🪨';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
@keyframes fall {
from {
top: -60px;
}
to {
top: 100vh;
}
}
@keyframes slide-left {
from {
right: -60px;
}
to {
right: 100vw;
}
}
.game-ui {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
z-index: 100;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.9);
color: white;
padding: 40px;
border-radius: 20px;
text-align: center;
display: none;
z-index: 1000;
}
.restart-btn {
background: #FFFF00;
color: #000;
border: none;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
margin-top: 20px;
font-family: 'Comic Sans MS', cursive;
}
.restart-btn:hover {
background: #FFD700;
transform: scale(1.05);
}
.instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
text-align: center;
font-size: 16px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.bubble {
position: absolute;
background: rgba(255,255,255,0.3);
border-radius: 50%;
animation: bubble-float 3s infinite ease-in-out;
}
@keyframes bubble-float {
0% { transform: translateY(0) scale(1); opacity: 0.7; }
50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
100% { transform: translateY(-40px) scale(0.9); opacity: 0; }
}
.powerup {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(45deg, #FFD700, #FFA500);
border: 3px solid #FF6B35;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
animation: fall linear, powerup-glow 1s infinite alternate;
z-index: 5;
}
.powerup.heart {
background: linear-gradient(45deg, #FF69B4, #FF1493);
border: 3px solid #DC143C;
animation: fall linear, heart-glow 1s infinite alternate;
}
@keyframes powerup-glow {
0% { box-shadow: 0 0 10px #FFD700; }
100% { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500; }
}
@keyframes heart-glow {
0% { box-shadow: 0 0 10px #FF69B4; }
100% { box-shadow: 0 0 20px #FF69B4, 0 0 30px #FF1493; }
}
.spongebob.immune {
animation: immune-flash 0.3s infinite alternate;
box-shadow: 0 0 15px #00FFFF, 0 0 25px #00FFFF;
}
@keyframes immune-flash {
0% { opacity: 1; }
100% { opacity: 0.7; }
}
.level-notification {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(45deg, #FFD700, #FFA500);
color: #000;
padding: 30px 50px;
border-radius: 20px;
font-size: 32px;
font-weight: bold;
text-align: center;
border: 4px solid #FF6B35;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
z-index: 2000;
display: none;
animation: level-popup 2s ease-out;
}
@keyframes level-popup {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
20% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="game-container">
<div class="ocean-floor"></div>
<div class="spongebob" id="spongebob"></div>
<div class="game-ui">
<div>Level: <span id="level">1</span></div>
<div>Score: <span id="score">0</span></div>
<div>Lives: <span id="lives">3</span></div>
</div>
<div class="game-over" id="gameOver">
<h2>Game Over!</h2>
<p>The Weezer got SpongeBob!</p>
<p>Level Reached: <span id="finalLevel">1</span></p>
<p>Final Score: <span id="finalScore">0</span></p>
<button class="restart-btn" onclick="restartGame()">Play Again</button>
</div>
<div class="level-notification" id="levelNotification">
<div>🎉 LEVEL UP! 🎉</div>
<div style="font-size: 24px; margin-top: 10px;">Level <span id="newLevelNumber">2</span></div>
</div>
<div class="instructions">
Use ← → arrow keys to move SpongeBob and ↑ arrow key to jump and dodge the falling Weezer!
</div>
</div>
<script>
let gameState = {
score: 0,
lives: 5,
level: 1,
gameRunning: true,
spongeBobPosition: 50, // percentage from left
weezers: [],
obstacles: [],
powerups: [],
gameSpeed: 0.7,
isJumping: false,
levelProgress: 0,
scoreToNextLevel: 700,
isImmune: false,
immuneEndTime: 0
};
const spongebob = document.getElementById('spongebob');
const scoreElement = document.getElementById('score');
const livesElement = document.getElementById('lives');
const levelElement = document.getElementById('level');
const gameOverScreen = document.getElementById('gameOver');
const finalScoreElement = document.getElementById('finalScore');
const finalLevelElement = document.getElementById('finalLevel');
const levelNotification = document.getElementById('levelNotification');
const newLevelNumber = document.getElementById('newLevelNumber');
// Create bubbles for atmosphere
function createBubble() {
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.style.left = Math.random() * 100 + '%';
bubble.style.bottom = '100px';
bubble.style.width = bubble.style.height = (Math.random() * 20 + 10) + 'px';
document.querySelector('.game-container').appendChild(bubble);
setTimeout(() => {
if (bubble.parentNode) {
bubble.parentNode.removeChild(bubble);
}
}, 3000);
}
// Create bubbles periodically
setInterval(createBubble, 2000);
// Handle keyboard input with smooth movement
const keys = {
left: false,
right: false
};
document.addEventListener('keydown', (e) => {
if (!gameState.gameRunning) return;
e.preventDefault(); // Prevent default browser behavior
if (e.key === 'ArrowLeft') {
keys.left = true;
} else if (e.key === 'ArrowRight') {
keys.right = true;
} else if (e.key === 'ArrowUp' && !gameState.isJumping) {
jump();
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowLeft') {
keys.left = false;
} else if (e.key === 'ArrowRight') {
keys.right = false;
}
});
function handleMovement() {
if (!gameState.gameRunning) return;
if (keys.left) {
gameState.spongeBobPosition = Math.max(5, gameState.spongeBobPosition - 0.375);
updateSpongeBobPosition();
}
if (keys.right) {
gameState.spongeBobPosition = Math.min(95, gameState.spongeBobPosition + 0.375);
updateSpongeBobPosition();
}
}
function updateSpongeBobPosition() {
spongebob.style.left = gameState.spongeBobPosition + '%';
}
function jump() {
if (gameState.isJumping) return;
gameState.isJumping = true;
spongebob.classList.add('jumping');
// Land after 800ms (0.8 seconds) for the jump animation
setTimeout(() => {
spongebob.classList.remove('jumping');
}, 800);
// Allow jumping again after 1200ms (1.2 seconds total cooldown)
setTimeout(() => {
gameState.isJumping = false;
}, 1200);
}
function createWeezer() {
if (!gameState.gameRunning) return;
const weezer = document.createElement('div');
weezer.className = 'weezer';
weezer.textContent = 'W';
weezer.style.left = Math.random() * 90 + 5 + '%';
weezer.style.animationDuration = (3 - gameState.gameSpeed * 0.5) + 's';
document.querySelector('.game-container').appendChild(weezer);
gameState.weezers.push(weezer);
// Remove weezer when animation completes
setTimeout(() => {
if (weezer.parentNode) {
weezer.parentNode.removeChild(weezer);
gameState.weezers = gameState.weezers.filter(w => w !== weezer);
// Increase score for surviving
gameState.score += 10;
checkLevelUp();
updateUI();
}
}, (3 - gameState.gameSpeed * 0.5) * 1000);
}
function createObstacle() {
if (!gameState.gameRunning) return;
const obstacle = document.createElement('div');
obstacle.className = 'obstacle';
obstacle.style.animationDuration = (4 - gameState.gameSpeed * 0.3) + 's';
document.querySelector('.game-container').appendChild(obstacle);
gameState.obstacles.push(obstacle);
// Remove obstacle when animation completes
setTimeout(() => {
if (obstacle.parentNode) {
obstacle.parentNode.removeChild(obstacle);
gameState.obstacles = gameState.obstacles.filter(o => o !== obstacle);
// Increase score for surviving
gameState.score += 15;
checkLevelUp();
updateUI();
}
}, (4 - gameState.gameSpeed * 0.3) * 1000);
}
function createPowerup() {
if (!gameState.gameRunning) return;
const powerup = document.createElement('div');
// 50% chance for shield, 50% chance for heart
const isHeart = Math.random() < 0.5;
if (isHeart) {
powerup.className = 'powerup heart';
powerup.textContent = '❤️';
powerup.dataset.type = 'heart';
} else {
powerup.className = 'powerup';
powerup.textContent = '🛡️';
powerup.dataset.type = 'shield';
}
powerup.style.left = Math.random() * 90 + 5 + '%';
powerup.style.animationDuration = (4 - gameState.gameSpeed * 0.2) + 's';
document.querySelector('.game-container').appendChild(powerup);
gameState.powerups.push(powerup);
// Remove powerup when animation completes
setTimeout(() => {
if (powerup.parentNode) {
powerup.parentNode.removeChild(powerup);
gameState.powerups = gameState.powerups.filter(p => p !== powerup);
}
}, (4 - gameState.gameSpeed * 0.2) * 1000);
}
function checkCollisions() {
if (!gameState.gameRunning) return;
const spongeBobRect = spongebob.getBoundingClientRect();
// Check immunity status
if (gameState.isImmune && Date.now() > gameState.immuneEndTime) {
gameState.isImmune = false;
spongebob.classList.remove('immune');
}
// Check collisions with power-ups
gameState.powerups.forEach(powerup => {
const powerupRect = powerup.getBoundingClientRect();
if (spongeBobRect.left < powerupRect.right &&
spongeBobRect.right > powerupRect.left &&
spongeBobRect.top < powerupRect.bottom &&
spongeBobRect.bottom > powerupRect.top) {
if (powerup.dataset.type === 'heart') {
// Add one life (max 10 lives)
gameState.lives = Math.min(10, gameState.lives + 1);
gameState.score += 75; // Higher bonus for heart
} else {
// Activate immunity shield
gameState.isImmune = true;
gameState.immuneEndTime = Date.now() + 5000; // 5 seconds
spongebob.classList.add('immune');
gameState.score += 50;
}
// Remove powerup
powerup.parentNode.removeChild(powerup);
gameState.powerups = gameState.powerups.filter(p => p !== powerup);
updateUI();
}
});
// Check collisions with falling Weezers (only if not immune)
if (!gameState.isImmune) {
gameState.weezers.forEach(weezer => {
const weezerRect = weezer.getBoundingClientRect();
if (spongeBobRect.left < weezerRect.right &&
spongeBobRect.right > weezerRect.left &&
spongeBobRect.top < weezerRect.bottom &&
spongeBobRect.bottom > weezerRect.top) {
handleCollision();
weezer.parentNode.removeChild(weezer);
gameState.weezers = gameState.weezers.filter(w => w !== weezer);
}
});
// Check collisions with ground obstacles (only when not jumping and not immune)
if (!gameState.isJumping) {
gameState.obstacles.forEach(obstacle => {
const obstacleRect = obstacle.getBoundingClientRect();
if (spongeBobRect.left < obstacleRect.right &&
spongeBobRect.right > obstacleRect.left &&
spongeBobRect.top < obstacleRect.bottom &&
spongeBobRect.bottom > obstacleRect.top) {
handleCollision();
obstacle.parentNode.removeChild(obstacle);
gameState.obstacles = gameState.obstacles.filter(o => o !== obstacle);
}
});
}
}
}
function handleCollision() {
gameState.lives--;
updateUI();
// Flash effect
spongebob.style.background = '#FF6B6B';
setTimeout(() => {
spongebob.style.background = '#FFFF00';
}, 200);
if (gameState.lives <= 0) {
endGame();
}
}
function checkLevelUp() {
if (gameState.score >= gameState.scoreToNextLevel) {
gameState.level++;
gameState.scoreToNextLevel += 700; // Every level requires 700 points
gameState.gameSpeed = Math.min(2, 0.7 + (gameState.level - 1) * 0.2); // Slower progression
// Show level notification
newLevelNumber.textContent = gameState.level;
levelNotification.style.display = 'block';
// Hide notification after 2 seconds
setTimeout(() => {
levelNotification.style.display = 'none';
}, 2000);
// Flash level up effect
levelElement.style.color = '#FFD700';
levelElement.style.fontSize = '28px';
setTimeout(() => {
levelElement.style.color = 'white';
levelElement.style.fontSize = '24px';
}, 500);
}
}
function updateUI() {
scoreElement.textContent = gameState.score;
livesElement.textContent = gameState.lives;
levelElement.textContent = gameState.level;
}
function endGame() {
gameState.gameRunning = false;
finalScoreElement.textContent = gameState.score;
finalLevelElement.textContent = gameState.level;
gameOverScreen.style.display = 'block';
// Clear all weezers, obstacles, and power-ups
gameState.weezers.forEach(weezer => {
if (weezer.parentNode) {
weezer.parentNode.removeChild(weezer);
}
});
gameState.obstacles.forEach(obstacle => {
if (obstacle.parentNode) {
obstacle.parentNode.removeChild(obstacle);
}
});
gameState.powerups.forEach(powerup => {
if (powerup.parentNode) {
powerup.parentNode.removeChild(powerup);
}
});
gameState.weezers = [];
gameState.obstacles = [];
gameState.powerups = [];
}
function restartGame() {
gameState = {
score: 0,
lives: 5,
level: 1,
gameRunning: true,
spongeBobPosition: 50,
weezers: [],
obstacles: [],
powerups: [],
gameSpeed: 0.7,
isJumping: false,
levelProgress: 0,
scoreToNextLevel: 700,
isImmune: false,
immuneEndTime: 0
};
spongebob.classList.remove('jumping', 'immune');
gameOverScreen.style.display = 'none';
updateUI();
updateSpongeBobPosition();
startGameLoop();
}
function startGameLoop() {
if (!gameState.gameRunning) return;
// Handle smooth movement
handleMovement();
// Increase difficulty over time
if (gameState.score > 0 && gameState.score % 100 === 0) {
gameState.gameSpeed = Math.min(2.5, gameState.gameSpeed + 0.1);
}
// Create weezers at random intervals (more frequent at higher levels)
const weezerSpawnRate = 0.012 + (gameState.level * 0.004) + gameState.gameSpeed * 0.005;
if (Math.random() < weezerSpawnRate) {
createWeezer();
}
// Create obstacles at random intervals (more frequent at higher levels)
const obstacleSpawnRate = 0.008 + (gameState.level * 0.003) + gameState.gameSpeed * 0.003;
if (Math.random() < obstacleSpawnRate) {
createObstacle();
}
// Create power-ups at random intervals (decreasing by 8% each level)
const basePowerupRate = gameState.level === 1 ? 0.012 : 0.004; // Much higher rate for level 1
const levelReduction = (gameState.level - 1) * 0.08; // 8% reduction per level
const powerupSpawnRate = Math.max(0.0005, basePowerupRate - (basePowerupRate * levelReduction));
if (Math.random() < powerupSpawnRate) {
createPowerup();
}
checkCollisions();
requestAnimationFrame(startGameLoop);
}
// Initialize game
updateUI();
updateSpongeBobPosition();
startGameLoop();
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9801872a201089ec',t:'MTc1ODAzNzkxNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Editor is loading...
Leave a Comment