Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tariff Wars: Xi vs Trump</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap'); | |
| :root { | |
| --red-glow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000; | |
| --blue-glow: 0 0 20px #0066ff, 0 0 30px #0066ff, 0 0 40px #0066ff; | |
| --pink-glow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff; | |
| } | |
| body { | |
| font-family: 'Bungee', cursive; | |
| background-color: #000; | |
| overflow: hidden; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(255,0,0,0.2) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 20%, rgba(0,102,255,0.2) 0%, transparent 20%), | |
| linear-gradient(to bottom, #000000, #1a0033); | |
| } | |
| .game-container { | |
| position: relative; | |
| width: 900px; | |
| height: 600px; | |
| margin: 0 auto; | |
| background-color: #0a0a20; | |
| border: 8px solid #4cc9f0; | |
| box-shadow: | |
| 0 0 30px rgba(76, 201, 240, 0.7), | |
| inset 0 0 20px rgba(76, 201, 240, 0.5); | |
| transition: transform 0.1s; | |
| overflow: hidden; | |
| } | |
| .shake { | |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; | |
| } | |
| @keyframes shake { | |
| 0% { transform: translate(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0); } | |
| 20%, 40%, 60%, 80% { transform: translate(10px, 0); } | |
| 100% { transform: translate(0); } | |
| } | |
| .character { | |
| position: absolute; | |
| width: 150px; | |
| height: 180px; | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| transition: transform 0.1s; | |
| border-radius: 15px; | |
| object-fit: cover; | |
| z-index: 10; | |
| box-shadow: var(--red-glow); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .xi { | |
| background-image: url('https://english.www.gov.cn/images/202305/16/6462d090c6d03ffc77fd0662.jpeg'); | |
| left: 100px; | |
| bottom: 50px; | |
| border: 4px solid #ff0000; | |
| filter: drop-shadow(0 0 10px #ff0000); | |
| box-shadow: var(--red-glow); | |
| } | |
| .trump { | |
| background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Donald_Trump_official_portrait.jpg/220px-Donald_Trump_official_portrait.jpg'); | |
| right: 100px; | |
| bottom: 50px; | |
| border: 4px solid #0066ff; | |
| filter: drop-shadow(0 0 10px #0066ff); | |
| box-shadow: var(--blue-glow); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .bullet { | |
| position: absolute; | |
| width: 20px; | |
| height: 10px; | |
| background: linear-gradient(90deg, #ff00ff, #4cc9f0); | |
| border-radius: 10px; | |
| z-index: 5; | |
| box-shadow: 0 0 10px #ff00ff; | |
| animation: bulletGlow 0.5s infinite alternate; | |
| } | |
| @keyframes bulletGlow { | |
| from { box-shadow: 0 0 5px #ff00ff; } | |
| to { box-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff; } | |
| } | |
| .tariff-display { | |
| position: absolute; | |
| top: 20px; | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| color: white; | |
| font-size: 20px; | |
| text-shadow: 0 0 10px currentColor; | |
| z-index: 20; | |
| } | |
| .tariff-bar { | |
| width: 350px; | |
| height: 40px; | |
| background-color: rgba(0,0,0,0.7); | |
| border: 3px solid white; | |
| border-radius: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(255,255,255,0.5); | |
| } | |
| .tariff-fill { | |
| height: 100%; | |
| border-radius: 15px; | |
| transition: width 0.3s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #xi-tariff { | |
| background: linear-gradient(90deg, #ff0000, #ff6666); | |
| box-shadow: inset 0 0 20px rgba(255,0,0,0.7); | |
| } | |
| #trump-tariff { | |
| background: linear-gradient(90deg, #0066ff, #66a3ff); | |
| box-shadow: inset 0 0 20px rgba(0,102,255,0.7); | |
| } | |
| .tariff-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255,255,255,0.3) 0%, | |
| rgba(255,255,255,0) 50%, | |
| rgba(255,255,255,0.3) 100% | |
| ); | |
| animation: shine 2s infinite linear; | |
| } | |
| @keyframes shine { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .hit-effect { | |
| position: absolute; | |
| width: 150px; | |
| height: 150px; | |
| background-image: radial-gradient(circle, #ff00ff 0%, rgba(255,0,255,0) 70%); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 15; | |
| animation: | |
| pulse 0.5s forwards, | |
| expand 0.5s forwards; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.5); opacity: 1; } | |
| 100% { transform: scale(1.5); opacity: 0; } | |
| } | |
| @keyframes expand { | |
| 0% { filter: blur(5px); } | |
| 100% { filter: blur(20px); } | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 5; | |
| animation: particleMove 1s forwards; | |
| } | |
| @keyframes particleMove { | |
| 0% { transform: translate(0, 0); opacity: 1; } | |
| 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } | |
| } | |
| .game-over { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.9); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-size: 48px; | |
| text-transform: uppercase; | |
| display: none; | |
| z-index: 100; | |
| text-shadow: 0 0 20px currentColor; | |
| } | |
| .winner-glow { | |
| animation: winnerGlow 1s infinite alternate; | |
| } | |
| @keyframes winnerGlow { | |
| from { text-shadow: 0 0 10px currentColor; } | |
| to { text-shadow: 0 0 30px currentColor, 0 0 50px currentColor; } | |
| } | |
| .restart-btn { | |
| margin-top: 40px; | |
| padding: 15px 40px; | |
| background: linear-gradient(45deg, #ff00ff, #4cc9f0); | |
| border: none; | |
| color: white; | |
| font-family: 'Bungee', cursive; | |
| font-size: 24px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border-radius: 50px; | |
| box-shadow: 0 0 20px rgba(255,0,255,0.7); | |
| text-transform: uppercase; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .restart-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255,255,255,0.3) 0%, | |
| rgba(255,255,255,0) 60% | |
| ); | |
| transform: rotate(30deg); | |
| animation: btnShine 3s infinite; | |
| } | |
| @keyframes btnShine { | |
| 0% { transform: translateX(-100%) rotate(30deg); } | |
| 100% { transform: translateX(100%) rotate(30deg); } | |
| } | |
| .restart-btn:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 30px rgba(255,0,255,0.9); | |
| } | |
| .controls { | |
| position: absolute; | |
| bottom: 20px; | |
| width: 100%; | |
| text-align: center; | |
| color: white; | |
| font-size: 16px; | |
| text-shadow: 0 0 10px white; | |
| z-index: 20; | |
| background: rgba(0,0,0,0.7); | |
| padding: 10px; | |
| border-radius: 10px; | |
| border: 2px solid #4cc9f0; | |
| box-shadow: 0 0 20px rgba(76, 201, 240, 0.5); | |
| } | |
| .background-particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .background-particle { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| border-radius: 50%; | |
| background-color: rgba(255,255,255,0.5); | |
| animation: floatParticle 10s infinite linear; | |
| } | |
| @keyframes floatParticle { | |
| 0% { transform: translateY(0) translateX(0); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(-600px) translateX(100px); opacity: 0; } | |
| } | |
| .countdown { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 100px; | |
| color: white; | |
| text-shadow: 0 0 20px white; | |
| z-index: 50; | |
| opacity: 0; | |
| animation: countdown 1s steps(1) 3; | |
| } | |
| @keyframes countdown { | |
| 0% { content: "3"; opacity: 1; } | |
| 33% { content: "2"; opacity: 1; } | |
| 66% { content: "1"; opacity: 1; } | |
| 100% { content: "GO!"; opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center min-h-screen"> | |
| <h1 class="text-6xl text-white mb-8 text-center" style="text-shadow: 0 0 20px #ff00ff;"> | |
| <span class="text-red-500">TARIFF</span> <span class="text-blue-500">WARS</span> | |
| </h1> | |
| <div class="game-container" id="game-container"> | |
| <div class="background-particles" id="background-particles"></div> | |
| <div class="tariff-display"> | |
| <div class="text-left"> | |
| <div class="text-red-400">XI JINPING</div> | |
| <div class="tariff-bar"> | |
| <div class="tariff-fill" id="xi-tariff" style="width: 0%"></div> | |
| </div> | |
| <div id="xi-score" class="text-red-400">TARIFF: 0/200</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-blue-400">DONALD TRUMP</div> | |
| <div class="tariff-bar"> | |
| <div class="tariff-fill" id="trump-tariff" style="width: 0%"></div> | |
| </div> | |
| <div id="trump-score" class="text-blue-400">TARIFF: 0/200</div> | |
| </div> | |
| </div> | |
| <div class="character xi" id="xi"></div> | |
| <div class="character trump" id="trump"></div> | |
| <div class="game-over" id="game-over"> | |
| <div id="winner-text" class="winner-glow">WINNER!</div> | |
| <button class="restart-btn" id="restart-btn">FIGHT AGAIN</button> | |
| </div> | |
| <div class="controls"> | |
| PLAYER 1 (Xi): WASD to move, F to shoot | PLAYER 2 (Trump): Arrow keys to move, M to shoot | |
| </div> | |
| <div class="countdown" id="countdown"></div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const gameContainer = document.getElementById('game-container'); | |
| const xi = document.getElementById('xi'); | |
| const trump = document.getElementById('trump'); | |
| const xiScore = document.getElementById('xi-score'); | |
| const trumpScore = document.getElementById('trump-score'); | |
| const xiTariff = document.getElementById('xi-tariff'); | |
| const trumpTariff = document.getElementById('trump-tariff'); | |
| const gameOver = document.getElementById('game-over'); | |
| const winnerText = document.getElementById('winner-text'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const backgroundParticles = document.getElementById('background-particles'); | |
| const countdown = document.getElementById('countdown'); | |
| // Create background particles | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'background-particle'; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.animationDuration = `${5 + Math.random() * 10}s`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| particle.style.opacity = Math.random(); | |
| backgroundParticles.appendChild(particle); | |
| } | |
| let xiX = 100, xiY = 350; | |
| let trumpX = 650, trumpY = 350; | |
| let xiTariffValue = 0; | |
| let trumpTariffValue = 0; | |
| let gameActive = false; | |
| const bullets = []; | |
| const keys = { | |
| w: false, a: false, s: false, d: false, // Xi controls | |
| ArrowUp: false, ArrowLeft: false, ArrowDown: false, ArrowRight: false, // Trump controls | |
| f: false, m: false // Shoot controls | |
| }; | |
| // Start with countdown | |
| startCountdown(); | |
| function startCountdown() { | |
| let count = 3; | |
| countdown.textContent = count; | |
| countdown.style.opacity = 1; | |
| const countdownInterval = setInterval(() => { | |
| count--; | |
| if (count > 0) { | |
| countdown.textContent = count; | |
| } else if (count === 0) { | |
| countdown.textContent = "GO!"; | |
| } else { | |
| clearInterval(countdownInterval); | |
| countdown.style.opacity = 0; | |
| gameActive = true; | |
| gameLoop(); | |
| } | |
| }, 1000); | |
| } | |
| // Event listeners for keyboard | |
| document.addEventListener('keydown', (e) => { | |
| if (keys.hasOwnProperty(e.key)) { | |
| keys[e.key] = true; | |
| // Shooting | |
| if (e.key === 'f' && gameActive) { | |
| createBullet(xiX + 130, xiY + 90, 1); | |
| } | |
| if (e.key === 'm' && gameActive) { | |
| createBullet(trumpX - 10, trumpY + 90, -1); | |
| } | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| if (keys.hasOwnProperty(e.key)) { | |
| keys[e.key] = false; | |
| } | |
| }); | |
| // Create a bullet | |
| function createBullet(x, y, direction) { | |
| const bullet = document.createElement('div'); | |
| bullet.className = 'bullet'; | |
| bullet.style.left = `${x}px`; | |
| bullet.style.top = `${y}px`; | |
| bullet.dataset.direction = direction; | |
| gameContainer.appendChild(bullet); | |
| bullets.push(bullet); | |
| // Add shooting sound effect | |
| playSound('shoot'); | |
| } | |
| // Create particles explosion | |
| function createParticles(x, y, color) { | |
| for (let i = 0; i < 20; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = `${x}px`; | |
| particle.style.top = `${y}px`; | |
| particle.style.backgroundColor = color; | |
| // Random direction and distance | |
| const angle = Math.random() * Math.PI * 2; | |
| const distance = 50 + Math.random() * 100; | |
| const tx = Math.cos(angle) * distance; | |
| const ty = Math.sin(angle) * distance; | |
| particle.style.setProperty('--tx', `${tx}px`); | |
| particle.style.setProperty('--ty', `${ty}px`); | |
| gameContainer.appendChild(particle); | |
| // Remove particle after animation | |
| setTimeout(() => { | |
| particle.remove(); | |
| }, 1000); | |
| } | |
| } | |
| // Play sound effect | |
| function playSound(type) { | |
| const sounds = { | |
| shoot: { freq: 220, type: 'square', duration: 0.1 }, | |
| hit: { freq: 110, type: 'sawtooth', duration: 0.2 }, | |
| win: { freq: 440, type: 'sine', duration: 1 } | |
| }; | |
| if (sounds[type]) { | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| const oscillator = audioCtx.createOscillator(); | |
| const gainNode = audioCtx.createGain(); | |
| oscillator.type = sounds[type].type; | |
| oscillator.frequency.value = sounds[type].freq; | |
| oscillator.connect(gainNode); | |
| gainNode.connect(audioCtx.destination); | |
| gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime); | |
| gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + sounds[type].duration); | |
| oscillator.start(); | |
| oscillator.stop(audioCtx.currentTime + sounds[type].duration); | |
| } | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| if (!gameActive) return; | |
| // Move Xi | |
| if (keys.w && xiY > 50) xiY -= 7; | |
| if (keys.s && xiY < 350) xiY += 7; | |
| if (keys.a && xiX > 20) xiX -= 7; | |
| if (keys.d && xiX < 350) xiX += 7; | |
| // Move Trump | |
| if (keys.ArrowUp && trumpY > 50) trumpY -= 7; | |
| if (keys.ArrowDown && trumpY < 350) trumpY += 7; | |
| if (keys.ArrowLeft && trumpX > 400) trumpX -= 7; | |
| if (keys.ArrowRight && trumpX < 700) trumpX += 7; | |
| // Update positions | |
| xi.style.left = `${xiX}px`; | |
| xi.style.top = `${xiY}px`; | |
| trump.style.left = `${trumpX}px`; | |
| trump.style.top = `${trumpY}px`; | |
| // Move bullets and check collisions | |
| for (let i = bullets.length - 1; i >= 0; i--) { | |
| const bullet = bullets[i]; | |
| const direction = parseInt(bullet.dataset.direction); | |
| const currentLeft = parseInt(bullet.style.left); | |
| const newLeft = currentLeft + (15 * direction); | |
| bullet.style.left = `${newLeft}px`; | |
| // Check if bullet is out of bounds | |
| if (newLeft < 0 || newLeft > 900) { | |
| bullet.remove(); | |
| bullets.splice(i, 1); | |
| continue; | |
| } | |
| // Check collision with Trump (from Xi) | |
| if (direction === 1 && | |
| newLeft + 20 >= trumpX && | |
| newLeft <= trumpX + 150 && | |
| parseInt(bullet.style.top) + 10 >= trumpY && | |
| parseInt(bullet.style.top) <= trumpY + 180) { | |
| // Hit Trump | |
| createHitEffect(trumpX + 75, trumpY + 90, '#0066ff'); | |
| createParticles(trumpX + 75, trumpY + 90, '#0066ff'); | |
| bullet.remove(); | |
| bullets.splice(i, 1); | |
| trumpTariffValue += 10; | |
| trumpScore.textContent = `TARIFF: ${trumpTariffValue}/200`; | |
| trumpTariff.style.width = `${Math.min(trumpTariffValue / 2, 100)}%`; | |
| // Screen shake effect | |
| gameContainer.classList.add('shake'); | |
| setTimeout(() => { | |
| gameContainer.classList.remove('shake'); | |
| }, 500); | |
| // Hit sound | |
| playSound('hit'); | |
| // Check if Trump loses (reaches 200 tariff) | |
| if (trumpTariffValue >= 200) { | |
| endGame("XI JINPING WINS!", '#ff0000'); | |
| } | |
| } | |
| // Check collision with Xi (from Trump) | |
| if (direction === -1 && | |
| newLeft <= xiX + 150 && | |
| newLeft + 20 >= xiX && | |
| parseInt(bullet.style.top) + 10 >= xiY && | |
| parseInt(bullet.style.top) <= xiY + 180) { | |
| // Hit Xi | |
| createHitEffect(xiX + 75, xiY + 90, '#ff0000'); | |
| createParticles(xiX + 75, xiY + 90, '#ff0000'); | |
| bullet.remove(); | |
| bullets.splice(i, 1); | |
| xiTariffValue += 10; | |
| xiScore.textContent = `TARIFF: ${xiTariffValue}/200`; | |
| xiTariff.style.width = `${Math.min(xiTariffValue / 2, 100)}%`; | |
| // Screen shake effect | |
| gameContainer.classList.add('shake'); | |
| setTimeout(() => { | |
| gameContainer.classList.remove('shake'); | |
| }, 500); | |
| // Hit sound | |
| playSound('hit'); | |
| // Check if Xi loses (reaches 200 tariff) | |
| if (xiTariffValue >= 200) { | |
| endGame("DONALD TRUMP WINS!", '#0066ff'); | |
| } | |
| } | |
| } | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Create hit effect | |
| function createHitEffect(x, y, color) { | |
| const hit = document.createElement('div'); | |
| hit.className = 'hit-effect'; | |
| hit.style.left = `${x - 75}px`; | |
| hit.style.top = `${y - 75}px`; | |
| hit.style.backgroundImage = `radial-gradient(circle, ${color} 0%, rgba(0,0,0,0) 70%)`; | |
| gameContainer.appendChild(hit); | |
| setTimeout(() => { | |
| hit.remove(); | |
| }, 500); | |
| } | |
| // End the game | |
| function endGame(winner, color) { | |
| gameActive = false; | |
| winnerText.textContent = winner; | |
| winnerText.style.color = color; | |
| gameOver.style.display = 'flex'; | |
| // Win sound | |
| playSound('win'); | |
| // Confetti effect | |
| for (let i = 0; i < 100; i++) { | |
| createParticles( | |
| Math.random() * 900, | |
| Math.random() * 600, | |
| color | |
| ); | |
| } | |
| } | |
| // Restart game | |
| restartBtn.addEventListener('click', () => { | |
| // Remove all bullets | |
| bullets.forEach(bullet => bullet.remove()); | |
| bullets.length = 0; | |
| // Reset positions and scores | |
| xiX = 100; xiY = 350; | |
| trumpX = 650; trumpY = 350; | |
| xiTariffValue = 0; | |
| trumpTariffValue = 0; | |
| xi.style.left = `${xiX}px`; | |
| xi.style.top = `${xiY}px`; | |
| trump.style.left = `${trumpX}px`; | |
| trump.style.top = `${trumpY}px`; | |
| xiScore.textContent = `TARIFF: 0/200`; | |
| trumpScore.textContent = `TARIFF: 0/200`; | |
| xiTariff.style.width = `0%`; | |
| trumpTariff.style.width = `0%`; | |
| gameOver.style.display = 'none'; | |
| gameActive = false; | |
| // Start new countdown | |
| startCountdown(); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tingchenliang/tariff-war" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |