Lorem ipsum dolor sit
Bug Catcher: Crypto Server – Money Programming
/* Gaya Tampilan Dasar */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #1e1e2f;
color: #ffffff;
text-align: center;
}
/* Navigasi / Menu Atas */
header {
background-color: #2a2a40;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
header a {
color: #00ffcc;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
margin: 0 15px;
transition: color 0.3s;
}
header a:hover {
color: #ff00ff;
}
/* Area Game Utama */
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
h2 { margin-bottom: 5px; color: #00ffcc; }
p { margin-top: 0; color: #b3b3cc; }
#startBtn {
padding: 10px 25px;
font-size: 16px;
font-weight: bold;
background-color: #00ffcc;
color: #1e1e2f;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 15px;
transition: background 0.3s;
}
#startBtn:hover {
background-color: #00ccaa;
}
/* Kanvas Game */
canvas {
background-color: #2a2a40;
border: 2px solid #00ffcc;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
cursor: none; /* Menyembunyikan kursor agar fokus ke keranjang */
}
/* Footer */
footer {
background-color: #151522;
color: #8888a0;
padding: 15px;
font-size: 0.9em;
border-top: 1px solid #2a2a40;
}
Bug Catcher: AI Server
Geser mouse untuk menangkap Crypto ($) & hindari Bug (X)!
const canvas = document.getElementById(“gameCanvas”);
const ctx = canvas.getContext(“2d”);
const startBtn = document.getElementById(“startBtn”);
// Variabel Game
let isPlaying = false;
let score = 0;
let animationId;
// Objek Server (Pemain)
const player = {
width: 80,
height: 20,
x: canvas.width / 2 – 40,
y: canvas.height – 30,
color: “#00ffcc”
};
// Array untuk barang yang jatuh
let items = [];
// Setup Web Audio API (Harus diinisialisasi setelah interaksi user)
let audioCtx;
function playSound(type) {
if (!audioCtx) return;
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
if (type === ‘coin’) {
oscillator.type = ‘sine’;
oscillator.frequency.setValueAtTime(800, audioCtx.currentTime); // Nada tinggi
oscillator.frequency.exponentialRampToValueAtTime(1200, audioCtx.currentTime + 0.1);
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 0.1);
} else if (type === ‘bug’) {
oscillator.type = ‘sawtooth’;
oscillator.frequency.setValueAtTime(150, audioCtx.currentTime); // Nada rendah/error
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 0.3);
}
}
// Kontrol Mouse
canvas.addEventListener(“mousemove”, (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX – rect.left;
player.x = mouseX – player.width / 2;
// Batasi agar tidak keluar kanvas
if (player.x canvas.width) player.x = canvas.width – player.width;
});
// Spawn Barang (Koin atau Bug)
function spawnItem() {
if (!isPlaying) return;
const isBug = Math.random() < 0.3; // 30% peluang muncul bug
items.push({
x: Math.random() * (canvas.width – 20),
y: 0,
width: 20,
height: 20,
speed: Math.random() * 2 + 2,
type: isBug ? 'bug' : 'coin',
color: isBug ? '#ff3366' : '#33cc33',
label: isBug ? 'X' : '$'
});
setTimeout(spawnItem, Math.random() * 1000 + 500);
}
// Loop Utama Game
function update() {
if (!isPlaying) return;
// Bersihkan kanvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Gambar Pemain (Server)
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillStyle = "#1e1e2f";
ctx.font = "12px Arial";
ctx.fillText("SERVER", player.x + 15, player.y + 14);
// Gambar Barang Jatuh
for (let i = 0; i < items.length; i++) {
let item = items[i];
item.y += item.speed;
// Gambar item
ctx.fillStyle = item.color;
ctx.beginPath();
ctx.arc(item.x + 10, item.y + 10, 10, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#fff";
ctx.font = "14px Arial";
ctx.fillText(item.label, item.x + 5, item.y + 15);
// Deteksi Tabrakan
if (item.x player.x &&
item.y player.y) {
if (item.type === ‘coin’) {
score += 10;
playSound(‘coin’);
} else {
score -= 20;
playSound(‘bug’);
}
items.splice(i, 1);
i–;
}
// Hapus item jika lewat batas bawah
else if (item.y > canvas.height) {
items.splice(i, 1);
i–;
}
}
// Gambar Skor
ctx.fillStyle = “#ffffff”;
ctx.font = “20px Arial”;
ctx.fillText(“Profit: $” + score, 10, 30);
animationId = requestAnimationFrame(update);
}
// Tombol Mulai Game
startBtn.addEventListener(“click”, () => {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioCtx.state === ‘suspended’) {
audioCtx.resume();
}
if (!isPlaying) {
isPlaying = true;
score = 0;
items = [];
startBtn.style.display = “none”;
spawnItem();
update();
}
});
amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.