W

William Tedjosaputro

9 Projects Created

Back to Showcase

Student Information

đŸĢ SD Kristen Petra 10
⭐ 35400 points earned

Statistics

9
Projects
10
Views
11
Interactions
35400
Points
flapy bird
Scratch
5

flapy bird

Wah, mantap! 😄 Jadi konsep gamenya: 🕹ī¸ Judul: Flapy Jump đŸŽ¯ Tujuan: Jangan kena pipa, kalau kenaimport pygame, sys, random pygame.init() lebar, tinggi = 400, 600 layar = pygame.display.set_mode((lebar, tinggi)) clock = pygame.time.Clock() font = pygame.font.SysFont(None, 48) # Warna biru = (135, 206, 235) hijau = (0, 200, 0) kuning = (255, 255, 0) # Karakter burung = pygame.Rect(100, tinggi//2, 34, 24) gravitasi = 0 pipa_list = [] score = 0 def buat_pipa(): tinggi_pipa = random.randint(150, 450) bawah = pygame.Rect(lebar, tinggi_pipa, 52, tinggi - tinggi_pipa) atas = pygame.Rect(lebar, tinggi_pipa - 150 - 320, 52, 320) return atas, bawah def gerak_pipa(pipa_list): for pipa in pipa_list: pipa.centerx -= 3 return [p for p in pipa_list if p.right > 0] def tampil_score(): teks = font.render(str(score), True, (0, 0, 0)) layar.blit(teks, (lebar//2 - teks.get_width()//2, 50)) pipa_timer = pygame.USEREVENT + 1 pygame.time.set_timer(pipa_timer, 1400) # Loop utama jalan = True while jalan: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() if event.type == pygame.KEYDOWN: if event.key == pygame.K_SPACE: gravitasi = -7 if event.type == pipa_timer: pipa_list.extend(buat_pipa()) # Fisika burung gravitasi += 0.4 burung.y += gravitasi # Gerak pipa pipa_list = gerak_pipa(pipa_list) # Deteksi tabrakan for p in pipa_list: if burung.colliderect(p): pygame.quit() sys.exit() if burung.top <= 0 or burung.bottom >= tinggi: pygame.quit() sys.exit() # Skor for p in pipa_list: if p.centerx == burung.centerx: score += 1 # Gambar layar.fill(biru) pygame.draw.rect(layar, kuning, burung) for p in pipa_list: pygame.draw.rect(layar, hijau, p) tampil_score() pygame.display.update() clock.tick(60) kalahpygame.init() lebar, tinggi = 400, 600 layar = pygame.display.set_mode((lebar, tinggi)) clock = pygame.time.Clock() font = pygame.font.SysFont(None, 48) biru = (135, 206, 235) hijau = (0, 200, 0) kuning = (255, 255, 0) burung = pygame.Rect(100, tinggi//2, 34, 24) gravitasi = 0 pipa_list = [] score = 0 # ====== HIGH SCORE SYSTEM ====== HIGH_SCORE_FILE = "highscore.txt" def load_high_score(): if os.path.exists(HIGH_SCORE_FILE): with open(HIGH_SCORE_FILE, "r") as f: try: return int(f.read()) except: return 0 return 0 def save_high_score(skor): with open(HIGH_SCORE_FILE, "w") as f: f.write(str(skor)) high_score = load_high_score() # ====== GAME FUNCTIONS ====== def buat_pipa(): tinggi_pipa = random.randint(150, 450) bawah = pygame.Rect(lebar, tinggi_pipa, 52, tinggi - tinggi_pipa) atas = pygame.Rect(lebar, tinggi_pipa - 150 - 320, 52, 320) return atas, bawah def gerak_pipa(pipa_list): for pipa in pipa_list: pipa.centerx -= 3 return [p for p in pipa_list if p.right > 0] def tampil_score(): teks = font.render(f"{score}", True, (0, 0, 0)) layar.blit(teks, (lebar//2 - teks.get_width()//2, 50)) hs_teks = pygame.font.SysFont(None, 28).render(f"High Score: {high_score}", True, (0, 0, 0)) layar.blit(hs_teks, (10, 10)) # ====== GAME LOOP ====== pipa_timer = pygame.USEREVENT + 1 pygame.time.set_timer(pipa_timer, 1400) while True: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() if event.type == pygame.KEYDOWN: if event.key == pygame.K_SPACE: gravitasi = -7 if event.type == pipa_timer: pipa_list.extend(buat_pipa()) gravitasi += 0.4 burung.y += gravitasi pipa_list = gerak_pipa(pipa_list) for p in pipa_list: if burung.colliderect(p): if score > high_score: save_high_score(score) pygame.quit() sys.exit() if burung.top <= 0 or burung.bottom >= tinggi: if score > high_score: save_high_score(score) pygame.quit() sys.exit() # Tambah skor for p in pipa_list: if p.centerx == burung.centerx: score += 1 layar.fill(biru) pygame.draw.rect(layar, kuning, burung) for p in pipa_list: pygame.draw.rect(layar, hijau, p) tampil_score() pygame.display.update() clock.tick(60) 📝 Catatan: Skor tertinggi disimpan di file highscore.txt, jadi tidak hilang meskipun kamu keluar dari game. 🌐 Versi HTML + JavaScript — dengan High Score Simpan sebagai flapy_jump.html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flapy Jump</title> <style> body { margin: 0; overflow: hidden; background: skyblue; } canvas { display: block; margin: auto; background: #87ceeb; } </style> </head> <body> <canvas id="game" width="400" height="600"></canvas> <script> const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); let birdY = 300, velocity = 0, gravity = 0.4; let pipes = []; let score = 0, highScore = localStorage.getItem('highScore') || 0; let frame = 0; function jump() { velocity = -7; } document.addEventListener('keydown', e => { if (e.code === 'Space') jump(); }); function reset() { if (score > highScore) { highScore = score; localStorage.setItem('highScore', highScore); } birdY = 300; velocity = 0; pipes = []; score = 0; frame = 0; } function draw() { ctx.fillStyle = '#87ceeb'; ctx.fillRect(0, 0, 400, 600); // Burung ctx.fillStyle = 'yellow'; ctx.fillRect(100, birdY, 30, 24); // Pipa if (frame % 90 === 0) { const topHeight = Math.random() * 200 + 100; pipes.push({x: 400, top: topHeight, bottom: topHeight + 150}); } for (let p of pipes) { p.x -= 3; ctx.fillStyle = 'green'; ctx.fillRect(p.x, 0, 50, p.top); ctx.fillRect(p.x, p.bottom, 50, 600 - p.bottom); if (100 + 30 > p.x && 100 < p.x + 50 && (birdY < p.top || birdY + 24 > p.bottom)) { alert('đŸ’Ĩ Kena pipa!\nSkor kamu: ' + score + '\nHigh Score: ' + highScore); reset(); return; } } pipes = pipes.filter(p => p.x + 50 > 0); velocity += gravity; birdY += velocity; if (birdY < 0 || birdY > 600) { alert('đŸ’Ĩ Kamu jatuh!\nSkor kamu: ' + score + '\nHigh Score: ' + highScore); reset(); return; } if (frame % 90 === 0) score++; ctx.fillStyle = 'black'; ctx.font = '36px Arial'; ctx.fillText(score, 190, 50); ctx.font = '20px Arial'; ctx.fillText("High Score: " + highScore, 10, 30); frame++; requestAnimationFrame(draw); } draw(); </script> </body> </html> 🏆 Misi: Kalahkan high score kalian! 🔘 Kontrol: Tekan spasi buat lompat

View
pong game 2 player
Scratch
2

pong game 2 player

🎮 Aturan Main: Ada dua pemain: đŸŸĨ Pemain Merah (kanan) — gerak pakai panah atas âŦ†ī¸ dan bawah âŦ‡ī¸ đŸŸĻ Pemain Biru (kiri) — gerak pakai W (naik) dan S (turun) Tujuan: kenakan bola ke sisi lawan. Setiap kali lawan gagal menahan bola, kamu dapat 1 poin. Pertama yang mencapai 10 poin menang! 🏆 Kalau Player 2 (biru) yang duluan dapat 10 poin, maka kamu kalah đŸ˜ĸ!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport"<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pong 2 Player + Suara 🔊</title> <style> * { box-sizing: border-box; } body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; } canvas { background: #111; border: 3px solid #fff; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <script> // ==== SETUP DASAR ==== const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const paddleHeight = 100, paddleWidth = 15; let player1Y = canvas.height / 2 - paddleHeight / 2; let player2Y = canvas.height / 2 - paddleHeight / 2; let player1Score = 0, player2Score = 0; let ballX = canvas.width / 2, ballY = canvas.height / 2; let ballSpeedX = 5, ballSpeedY = 3; // ==== SUARA ==== const soundBounce = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg"); const soundScore = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg"); const soundWin = new Audio("https://actions.google.com/sounds/v1/cartoon/slide_whistle_to_drum_hit.ogg"); function drawRect(x, y, w, h, color) { ctx.fillStyle = color; ctx.fillRect(x, y, w, h); } function drawCircle(x, y, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2, false); ctx.fill(); } function drawText(text, x, y, color) { ctx.fillStyle = color; ctx.font = "32px Arial"; ctx.fillText(text, x, y); } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 2); } function draw() { drawRect(0, 0, canvas.width, canvas.height, "#111"); drawRect(0, player1Y, paddleWidth, paddleHeight, "blue"); drawRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight, "red"); drawCircle(ballX, ballY, 10, "white"); drawText(player1Score, canvas.width / 4, 50, "cyan"); drawText(player2Score, (canvas.width * 3) / 4, 50, "red"); } function move() { ballX += ballSpeedX; ballY += ballSpeedY; // pantulan atas/bawah if (ballY < 0 || ballY > canvas.height) { ballSpeedY = -ballSpeedY; soundBounce.currentTime = 0; soundBounce.play(); } // pantulan pemain biru if ( ballX < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight ) { ballSpeedX = -ballSpeedX; soundBounce.currentTime = 0; soundBounce.play(); } // pantulan pemain merah if ( ballX > canvas.width - paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight ) { ballSpeedX = -ballSpeedX; soundBounce.currentTime = 0; soundBounce.play(); } // goal kiri/kanan if (ballX < 0) { player2Score++; soundScore.currentTime = 0; soundScore.play(); resetBall(); } if (ballX > canvas.width) { player1Score++; soundScore.currentTime = 0; soundScore.play(); resetBall(); } // cek menang if (player1Score >= 10 || player2Score >= 10) { soundWin.play(); setTimeout(() => { let winner = player1Score >= 10 ? "đŸŸĻ Player Biru MENANG! 🏆" : "đŸŸĨ Player Merah MENANG! 🏆"; alert(winner); document.location.reload(); }, 200); } } function gameLoop() { move(); draw(); requestAnimationFrame(gameLoop); } // kontrol pemain document.addEventListener("keydown", function (e) { switch (e.key) { case "w": case "W": player1Y -= 30; break; case "s": case "S": player1Y += 30; break; case "ArrowUp": player2Y -= 30; break; case "ArrowDown": player2Y += 30; break; } // batasi paddle agar tidak keluar layar player1Y = Math.max(0, Math.min(canvas.height - paddleHeight, player1Y)); player2Y = Math.max(0, Math.min(canvas.height - paddleHeight, player2Y)); }); gameLoop(); </script> </body><!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pong 2 Player + Suara + Ledakan đŸ’Ĩ</title> <style> * { box-sizing: border-box; } body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; } canvas { background: #111; border: 3px solid #fff; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <script> // === Setup dasar === const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const paddleHeight = 100, paddleWidth = 15; let player1Y = canvas.height / 2 - paddleHeight / 2; let player2Y = canvas.height / 2 - paddleHeight / 2; let player1Score = 0, player2Score = 0; let ballX = canvas.width / 2, ballY = canvas.height / 2; let ballSpeedX = 5, ballSpeedY = 3; // === Suara === const soundBounce = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg"); const soundScore = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg"); const soundWin = new Audio("https://actions.google.com/sounds/v1/cartoon/slide_whistle_to_drum_hit.ogg"); // === Efek Ledakan === let explosions = []; function createExplosion(x, y, color) { for (let i = 0; i < 15; i++) { explosions.push({ x, y, radius: 3 + Math.random() * 3, color, alpha: 1, dx: (Math.random() - 0.5) * 8, dy: (Math.random() - 0.5) * 8 }); } } function drawExplosion() { for (let i = explosions.length - 1; i >= 0; i--) { const p = explosions[i]; ctx.beginPath(); ctx.fillStyle = `rgba(${p.color}, ${p.alpha})`; ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fill(); p.x += p.dx; p.y += p.dy; p.alpha -= 0.03; if (p.alpha <= 0) explosions.splice(i, 1); } } function drawRect(x, y, w, h, color) { ctx.fillStyle = color; ctx.fillRect(x, y, w, h); } function drawCircle(x, y, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2, false); ctx.fill(); } function drawText(text, x, y, color) { ctx.fillStyle = color; ctx.font = "32px Arial"; ctx.fillText(text, x, y); } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 2); } function draw() { drawRect(0, 0, canvas.width, canvas.height, "#111"); drawRect(0, player1Y, paddleWidth, paddleHeight, "blue"); drawRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight, "red"); drawCircle(ballX, ballY, 10, "white"); drawText(player1Score, canvas.width / 4, 50, "cyan"); drawText(player2Score, (canvas.width * 3) / 4, 50, "red"); drawExplosion(); } function move() { ballX += ballSpeedX; ballY += ballSpeedY; // Pantulan atas/bawah if (ballY < 0 || ballY > canvas.height) { ballSpeedY = -ballSpeedY; soundBounce.currentTime = 0; soundBounce.play(); } // Pantulan pemain biru if (ballX < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) { ballSpeedX = -ballSpeedX; soundBounce.currentTime = 0; soundBounce.play(); } // Pantulan pemain merah if (ballX > canvas.width - paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) { ballSpeedX = -ballSpeedX; soundBounce.currentTime = 0; soundBounce.play(); } // Gol kiri (merah dapat poin) if (ballX < 0) { player2Score++; createExplosion(ballX + 30, ballY, "255, 0, 0"); soundScore.currentTime = 0; soundScore.play(); resetBall(); } // Gol kanan (biru dapat poin) if (ballX > canvas.width) { player1Score++; createExplosion(ballX - 30, ballY, "0, 150, 255"); soundScore.currentTime = 0; soundScore.play(); resetBall(); } // Cek kemenangan if (player1Score >= 10 || player2Score >= 10) { soundWin.play(); setTimeout(() => { let winner = player1Score >= 10 ? "đŸŸĻ Player Biru MENANG! 🏆" : "đŸŸĨ Player Merah MENANG! 🏆"; alert(winner); document.location.reload(); }, 300); } } function gameLoop() { move(); draw(); requestAnimationFrame(gameLoop); } // Kontrol pemain document.addEventListener("keydown", function (e) { switch (e.key) { case "w": case "W": player1Y -= 30; break; case "s": case "S": player1Y += 30; break; case "ArrowUp": player2Y -= 30; break; case "ArrowDown": player2Y += 30; break; } // Batasi paddle supaya tetap di layar player1Y = Math.max(0, Math.min(canvas.height - paddleHeight, player1Y)); player2Y = Math.max(0, Math.min(canvas.height - paddleHeight, player2Y)); }); gameLoop(); </script> </body> </html> </html> content="width=device-width, initial-scale=1.0" /> <title>Pong 2 Player</title> <style> * { box-sizing: border-box; } body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; } canvas { background: #111; border: 3px solid #fff; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const paddleHeight = 100, paddleWidth = 15; let player1Y = canvas.height / 2 - paddleHeight / 2; let player2Y = canvas.height / 2 - paddleHeight / 2; let player1Score = 0, player2Score = 0; let ballX = canvas.width / 2, ballY = canvas.height / 2; let ballSpeedX = 5, ballSpeedY = 3; function drawRect(x, y, w, h, color) { ctx.fillStyle = color; ctx.fillRect(x, y, w, h); } function drawCircle(x, y, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2, false); ctx.fill(); } function drawText(text, x, y, color) { ctx.fillStyle = color; ctx.font = "32px Arial"; ctx.fillText(text, x, y); } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 2); } function draw() { // background drawRect(0, 0, canvas.width, canvas.height, "#111"); // paddles drawRect(0, player1Y, paddleWidth, paddleHeight, "blue"); drawRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight, "red"); // ball drawCircle(ballX, ballY, 10, "white"); // score drawText(player1Score, canvas.width / 4, 50, "cyan"); drawText(player2Score, (canvas.width * 3) / 4, 50, "red"); } function move() { ballX += ballSpeedX; ballY += ballSpeedY; // bounce top & bottom if (ballY < 0 || ballY > canvas.height) { ballSpeedY = -ballSpeedY; } // collision with player 1 (blue) if ( ballX < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight ) { ballSpeedX = -ballSpeedX; } // collision with player 2 (red) if ( ballX > canvas.width - paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight ) { ballSpeedX = -ballSpeedX; } // left & right goals if (ballX < 0) { player2Score++; resetBall(); } if (ballX > canvas.width) { player1Score++; resetBall(); } // check win if (player1Score >= 10 || player2Score >= 10) { let winner = player1Score >= 10 ? "đŸŸĻ Player Biru MENANG! 🏆" : "đŸŸĨ Player Merah MENANG! 🏆"; alert(winner); document.location.reload(); } } function gameLoop() { move(); draw(); requestAnimationFrame(gameLoop); } // kontrol pemain document.addEventListener("keydown", function (e) { switch (e.key) { case "w": case "W": player1Y -= 30; break; case "s": case "S": player1Y += 30; break; case "ArrowUp": player2Y -= 30; break; case "ArrowDown": player2Y += 30; break; } // batasi paddle agar tidak keluar layar player1Y = Math.max(0, Math.min(canvas.height - paddleHeight, player1Y)); player2Y = Math.max(0, Math.min(canvas.height - paddleHeight, player2Y)); }); gameLoop(); </script> </body> </html> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pong Neon 2 Player ⚡</title> <style> * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at center, #000010, #000); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } canvas { border: 3px solid #0ff; box-shadow: 0 0 20px #0ff; background: transparent; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <script> // === Setup dasar === const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const paddleHeight = 100, paddleWidth = 15; let player1Y = canvas.height / 2 - paddleHeight / 2; let player2Y = canvas.height / 2 - paddleHeight / 2; let player1Score = 0, player2Score = 0; let ballX = canvas.width / 2, ballY = canvas.height / 2; let ballSpeedX = 5, ballSpeedY = 3; // === Suara === const sBounce = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg"); const sScore = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg"); const sWin = new Audio("https://actions.google.com/sounds/v1/cartoon/slide_whistle_to_drum_hit.ogg"); // === Bintang latar belakang === let stars = Array.from({length: 80}, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, r: Math.random() * 2, s: 0.5 + Math.random() * 1.5 })); function drawStars() { ctx.fillStyle = "rgba(0,0,0,0.3)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "#0ff"; stars.forEach(star => { ctx.beginPath(); ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2); ctx.fill(); star.y += star.s; if (star.y > canvas.height) { star.y = 0; star.x = Math.random() * canvas.width; } }); } // === Ledakan === let explosions = []; function createExplosion(x, y, color) { for (let i = 0; i < 15; i++) { explosions.push({ x, y, r: 3 + Math.random() * 3, color, alpha: 1, dx: (Math.random() - 0.5) * 8, dy: (Math.random() - 0.5) * 8 }); } } function drawExplosion() { for (let i = explosions.length - 1; i >= 0; i--) { const p = explosions[i]; ctx.beginPath(); ctx.fillStyle = `rgba(${p.color}, ${p.alpha})`; ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); p.x += p.dx; p.y += p.dy; p.alpha -= 0.03; if (p.alpha <= 0) explosions.splice(i, 1); } } // === Fungsi gambar dasar === function drawRect(x, y, w, h, color, glow) { ctx.shadowColor = glow; ctx.shadowBlur = 20; ctx.fillStyle = color; ctx.fillRect(x, y, w, h); ctx.shadowBlur = 0; } function drawCircle(x, y, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } function drawText(text, x, y, color) { ctx.fillStyle = color; ctx.font = "32px Orbitron, Arial"; ctx.fillText(text, x, y); } // === Reset bola === function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 2); } // === Gambar === function draw() { drawStars(); drawRect(0, player1Y, paddleWidth, paddleHeight, "#0ff", "#0ff"); drawRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight, "#f00", "#f00"); drawCircle(ballX, ballY, 10, "white"); drawText(player1Score, canvas.width / 4, 50, "#0ff"); drawText(player2Score, (canvas.width * 3) / 4, 50, "#f00"); drawExplosion(); } // === Logika gerak === function move() { ballX += ballSpeedX; ballY += ballSpeedY; if (ballY < 0 || ballY > canvas.height) { ballSpeedY = -ballSpeedY; sBounce.currentTime = 0; sBounce.play(); } if (ballX < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) { ballSpeedX = -ballSpeedX; sBounce.currentTime = 0; sBounce.play(); } if (ballX > canvas.width - paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) { ballSpeedX = -ballSpeedX; sBounce.currentTime = 0; sBounce.play(); } // Gol kiri/kanan if (ballX < 0) { player2Score++; createExplosion(ballX + 30, ballY, "255,0,0"); sScore.play(); resetBall(); } if (ballX > canvas.width) { player1Score++; createExplosion(ballX - 30, ballY, "0,255,255"); sScore.play(); resetBall(); } // Menang if (player1Score >= 10 || player2Score >= 10) { sWin.play(); setTimeout(() => { alert(player1Score >= 10 ? "đŸŸĻ Player Biru MENANG! 🏆" : "đŸŸĨ Player Merah MENANG! 🏆"); document.location.reload(); }, 300); } } function loop() { move(); draw(); requestAnimationFrame(loop); } // === Kontrol === document.addEventListener("keydown", e => { switch (e.key) { case "w": case "W": player1Y -= 30; break; case "s": case "S": player1Y += 30; break; case "ArrowUp": player2Y -= 30; break; case "ArrowDown": player2Y += 30; break; } player1Y = Math.max(0, Math.min(canvas.height - paddleHeight, player1Y)); player2Y = Math.max(0, Math.min(canvas.height - paddleHeight, player2Y)); });<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pong Neon vs AI ⚡</title> <style> body { margin: 0; background: radial-gradient(circle at center, #000010, #000); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } canvas { border: 3px solid #0ff; box-shadow: 0 0 20px #0ff; background: transparent; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const paddleHeight = 100, paddleWidth = 15; let playerY = canvas.height / 2 - paddleHeight / 2; let aiY = canvas.height / 2 - paddleHeight / 2; let playerScore = 0, aiScore = 0; let ballX = canvas.width / 2, ballY = canvas.height / 2; let ballSpeedX = 5, ballSpeedY = 3; // Suara const sBounce = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg"); const sScore = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg"); const sWin = new Audio("https://actions.google.com/sounds/v1/cartoon/slide_whistle_to_drum_hit.ogg"); // Bintang let stars = Array.from({length: 80}, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, r: Math.random() * 2, s: 0.5 + Math.random() * 1.5 })); function drawStars() { ctx.fillStyle = "rgba(0,0,0,0.3)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "#0ff"; stars.forEach(star => { ctx.beginPath(); ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2); ctx.fill(); star.y += star.s; if (star.y > canvas.height) { star.y = 0; star.x = Math.random() * canvas.width; } }); } // Ledakan let explosions = []; function createExplosion(x, y, color) { for (let i = 0; i < 15; i++) { explosions.push({ x, y, r: 3 + Math.random() * 3, color, alpha: 1, dx: (Math.random() - 0.5) * 8, dy: (Math.random() - 0.5) * 8 }); } } function drawExplosion() { for (let i = explosions.length - 1; i >= 0; i--) { const p = explosions[i]; ctx.beginPath(); ctx.fillStyle = `rgba(${p.color},${p.alpha})`; ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); p.x += p.dx; p.y += p.dy; p.alpha -= 0.03; if (p.alpha <= 0) explosions.splice(i, 1); } } // Gambar function drawRect(x, y, w, h, color, glow) { ctx.shadowColor = glow; ctx.shadowBlur = 20; ctx.fillStyle = color; ctx.fillRect(x, y, w, h); ctx.shadowBlur = 0; } function drawCircle(x, y, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } function drawText(text, x, y, color) { ctx.fillStyle = color; ctx.font = "32px Arial"; ctx.fillText(text, x, y); } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 2); } // Gerak dan logika function move() { ballX += ballSpeedX; ballY += ballSpeedY; // AI gerak let aiCenter = aiY + paddleHeight / 2; if (aiCenter < ballY - 30) aiY += 5; else if (aiCenter > ballY + 30) aiY -= 5; // Pantulan if (ballY < 0 || ballY > canvas.height) { ballSpeedY = -ballSpeedY; sBounce.play(); } if (ballX < paddleWidth && ballY > playerY && ballY < playerY + paddleHeight) { ballSpeedX = -ballSpeedX; sBounce.play(); } if (ballX > canvas.width - paddleWidth && ballY > aiY && ballY < aiY + paddleHeight) { ballSpeedX = -ballSpeedX; sBounce.play(); } // Gol if (ballX < 0) { aiScore++; createExplosion(ballX + 30, ballY, "255,0,0"); sScore.play(); resetBall(); } if (ballX > canvas.width) { playerScore++; createExplosion(ballX - 30, ballY, "0,255,255"); sScore.play(); resetBall(); } // Menang if (playerScore >= 10 || aiScore >= 10) { sWin.play(); setTimeout(() => { alert(playerScore >= 10 ? "🏆 Kamu MENANG!" : "đŸ˜ĸ AI MENANG!"); document.location.reload(); }, 300); } } // Gambar frame function draw() { drawStars(); drawRect(0, playerY, paddleWidth, paddleHeight, "#0ff", "#0ff"); drawRect(canvas.width - paddleWidth, aiY, paddleWidth, paddleHeight, "#f00", "#f00"); drawCircle(ballX, ballY, 10, "white"); drawText(playerScore, canvas.width / 4, 50, "#0ff"); drawText(aiScore, (canvas.width * 3) / 4, 50, "#f00"); drawExplosion(); } function loop() { move(); draw(); requestAnimationFrame(loop); } // Kontrol document.addEventListener("keydown", e => { if (e.key === "w" || e.key === "W") playerY -= 30; if (e.key === "s" || e.key === "S") playerY += 30; playerY = Math.max(0, Math.min(canvas.height - paddleHeight, playerY)); }); loop(); </script> </body> loop(); </script> </body> </html>

View
rock paper scissors
Scratch
0

rock paper scissors

Oke! 😄 Jadi kamu mau gabungan versi teks + gambar/emoji — seru banget! Aturannya tetap: Skor kamu dan bot mulai dari 0. Siapa yang duluan mencapai 5 poin menang. Kalau bot duluan 5 → kamu kalah. Kalau kamu duluan 5 → kamu menang 🎉 Pilihan kamu bisa dengan kata atau emoji berikut: đŸĒ¨ = Rock (Batu) 📄 = Paper (Kertas) ✂ī¸ = Scissors (Gunting) Skor awal: Kamu: 0 | Bot: 0 Sekarang giliran kamu — pilih: đŸĒ¨ Rock, 📄 Paper, atau ✂ī¸ Scissors?

View
ghost hunter
Scratch
0

ghost hunter

ke! Jadi kamu mau game Ghost Hunter dengan aturan seperti ini: Ada beberapa hantu muncul di layar. Kalau pemain menekan hantu yang tidak putih → kalah / game over. Kalau pemain menekan hantu putih → dapat skor +1. Tujuan: mendapatkan skor 10 untuk menang. Aku bisa bantu bikin versi sederhananya pakai HTML, CSS, dan JavaScript. Berikut contoh kodenya 👇 🎮 Ghost Hunter Game (versi sederhana)

View
maze runner
Scratch
1

maze runner

🌀 Maze Runner – Cara Main: Lari secepatnya dan cari jalan keluar dari labirin! Tapi hati-hati... Bahaya Mengintai! Kalau kena monster atau kupu-kupu = GAME OVER! Kontrol: Gerak pakai tombol arah (↑ ↓ ← →) Jelajahi maze dan hindari semua musuh! Tujuan: Temukan jalan keluar Hindari monster dan kupu-kupu Jangan tersesat terlalu lama! Seberapa cepat kamu bisa keluar dari maze tanpa tertangkap?

View
catch the fruit
Scratch
1

catch the fruit

🍓 Catch the Fruit – Cara Main: Tangkap buah segar dan hindari buah busuk! Jadilah penangkap buah terbaik! Kontrol: Gerak ke kiri: tekan panah kiri (←) Gerak ke kanan: tekan panah kanan (→) Aturan Main: Tangkap buah segar untuk menambah skor Kalau kena buah busuk = LANGSUNG KALAH! Tangkap sebanyak mungkin buah segar tanpa salah! Refleks cepat = skor tinggi! Awas... jangan tertipu bentuk buah busuk!

View
space war
Scratch
0

space war

Space War – Cara Main: Gerak ke kanan: tekan panah kanan (→) Gerak ke kiri: tekan panah kiri (←) Tekan Shield untuk aktifkan perisai selama 10 detik Aturan main: Kamu kalah kalau lives kamu habis (0) Kamu menang kalau lives alien habis (0) Bertarung di luar angkasa, hindari serangan, dan pakai shield dengan bijak!

View
starfish jump
Scratch
1

starfish jump

Tekan Spasi untuk melompat. Hindari menyentuh Starfish sebisa mungkin. Bertahan selama mungkin untuk mendapatkan skor tertinggi!

View
dino jump
Scratch
0

dino jump

🎮 Dino Jump – Cara Main: Bantu Dino melompat dan hindari landak tajam! Tekan Spasi untuk melompat Jangan sampai kena landak, nanti kalah! Capai skor 10 untuk menang! Uji refleksmu dan lihat seberapa jauh Dino bisa bertahan!

View