Pernahkah kamu bermain Dino T-Rex di Google Chrome saat internet mati? Hari ini, kita akan membuat game serupa versi kita sendiri bernama Stickman Runner!
Game ini menggunakan HTML untuk kerangka layar game (Canvas), CSS untuk mempercantik tampilan bergaya arcade, dan JavaScript untuk menghidupkan animasi, gravitasi, kontrol lompatan, rintangan acak, hingga sistem skor
Iklan
Sebelum masuk ke kode utama, pastikan kamu memiliki teks editor seperti VS Code. Buat satu folder khusus dan beri nama file utamanya: index.html.
Seluruh kode (HTML, CSS, dan JavaScript) akan kita gabungkan dalam satu file agar mudah di-upload atau disematkan ke dalam postingan WordPress.
Maka kalian akan menghasilkan Game seperti yang ada di bawah ini
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickman Runner - Ekskul Coding SMP</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #ffffff;
}
.game-container {
text-align: center;
background: #0f0f1a;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border: 2px solid #e94560;
}
h1 {
font-size: 1.8rem;
margin-bottom: 10px;
color: #e94560;
letter-spacing: 1px;
}
canvas {
background: #0f0f23;
border: 3px solid #0f3460;
border-radius: 8px;
display: block;
margin: 0 auto 15px auto;
box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}
.instructions {
font-size: 0.9rem;
color: #a0a0a0;
background: #1a1a2e;
padding: 10px;
border-radius: 6px;
display: inline-block;
}
span.key {
background: #e94560;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="game-container">
<h1>🏃 Stickman Runner Ultimate</h1>
<canvas id="gameCanvas" width="700" height="250"></canvas>
<div class="instructions">
Tekan <span class="key">Spasi</span> atau <span class="key">Klik Layar</span> untuk Melompat (Bisa Double Jump!).
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// --- KONFIGURASI GAME & VARIABEL UTAMA ---
let score = 0;
let highScore = 0;
let gameSpeed = 4;
let isGameOver = false;
let frameCount = 0;
// Objek Stickman (Player)
const stickman = {
x: 60,
y: 170,
width: 30,
height: 55,
vy: 0, // Kecepatan vertikal
gravity: 0.6, // Tarikan gravitasi
jumpForce: -10, // Kekuatan lompatan
grounded: false,// Status di tanah
jumpsLeft: 2, // Sisa kuota lompatan (untuk Double Jump)
draw() {
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
// Kepala
ctx.beginPath();
ctx.arc(this.x + 15, this.y + 8, 9, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.stroke();
// Badan
ctx.beginPath();
ctx.moveTo(this.x + 15, this.y + 17);
ctx.lineTo(this.x + 15, this.y + 40);
ctx.stroke();
// Tangan
ctx.beginPath();
ctx.moveTo(this.x + 15, this.y + 22);
ctx.lineTo(this.x + 25, this.y + 32);
ctx.stroke();
// Kaki (Animasi lari sederhana berdasarkan frame)
let legOffset = Math.sin(frameCount * 0.2) * 8;
ctx.beginPath();
ctx.moveTo(this.x + 15, this.y + 40);
ctx.lineTo(this.x + 5 + legOffset, this.y + 55);
ctx.moveTo(this.x + 15, this.y + 40);
ctx.lineTo(this.x + 25 - legOffset, this.y + 55);
ctx.stroke();
},
update() {
// Terapkan gravitasi
this.vy += this.gravity;
this.y += this.vy;
// Batas lantai tanah (posisi Y = 170)
if (this.y > 170) {
this.y = 170;
this.vy = 0;
this.grounded = true;
this.jumpsLeft = 2; // Reset kuota lompat saat menyentuh tanah
}
},
jump() {
if (this.jumpsLeft > 0) {
this.vy = this.jumpForce;
this.grounded = false;
this.jumpsLeft--;
}
}
};
// Array untuk menyimpan daftar rintangan (kaktus/rintangan bawah & burung/atas)
let obstacles = [];
class Obstacle {
constructor() {
this.width = 20;
this.height = Math.random() > 0.5 ? 40 : 25; // Variasi tinggi rintangan
this.x = canvas.width;
this.y = 225 - this.height; // Pas di atas garis tanah (Y = 225)
this.color = '#e94560';
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
// Detail kecil kaktus
ctx.fillStyle = '#ff6b81';
ctx.fillRect(this.x + 4, this.y + 5, 4, 10);
}
update() {
this.x -= gameSpeed;
}
}
// --- KONTROL INPUT PEMAIN ---
window.addEventListener('keydown', function(e) {
if (e.code === 'Space' || e.code === 'ArrowUp') {
e.preventDefault(); // Mencegah layar scroll ke bawah
if (isGameOver) {
resetGame();
} else {
stickman.jump();
}
}
});
canvas.addEventListener('click', function() {
if (isGameOver) {
resetGame();
} else {
stickman.jump();
}
});
// --- FUNGSI RESET GAME ---
function resetGame() {
score = 0;
gameSpeed = 4;
obstacles = [];
isGameOver = false;
frameCount = 0;
loop();
}
// --- DETEKSI TABRAKAN (AABB Collision) ---
function checkCollision(rect1, rect2) {
// Berikan sedikit toleransi kotak (margin) agar game terasa adil
let margin = 5;
return (
rect1.x + margin < rect2.x + rect2.width &&
rect1.x + rect1.width - margin > rect2.x &&
rect1.y + margin < rect2.y + rect2.height &&
rect1.y + rect1.height - margin > rect2.y
);
}
// --- GAME LOOP UTAMA ---
function loop() {
if (isGameOver) return;
frameCount++;
// 1. Bersihkan layar setiap frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. Gambar Background & Tanah
ctx.fillStyle = '#0f0f23';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Garis Tanah
ctx.fillStyle = '#0f3460';
ctx.fillRect(0, 225, canvas.width, 25);
ctx.strokeStyle = '#e94560';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, 225);
ctx.lineTo(canvas.width, 225);
ctx.stroke();
// 3. Spawn Rintangan Secara Berkala (Semakin lama semakin cepat)
if (frameCount % Math.max(60, 120 - Math.floor(score / 5)) === 0) {
obstacles.push(new Obstacle());
}
// 4. Update & Gambar Rintangan
for (let i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].update();
obstacles[i].draw();
// Cek Tabrakan dengan Stickman
if (checkCollision(stickman, obstacles[i])) {
isGameOver = true;
}
// Hapus rintangan jika sudah keluar layar sebelah kiri
if (obstacles[i].x + obstacles[i].width < 0) {
obstacles.splice(i, 1);
score += 10; // Tambah skor jika berhasil melewati rintangan
// Tingkatkan kecepatan game secara bertahap
if (score % 50 === 0) {
gameSpeed += 0.5;
}
}
}
// 5. Update & Gambar Stickman
stickman.update();
stickman.draw();
// 6. Tampilkan Skor di Layar
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 16px sans-serif';
ctx.fillText(`Skor: ${score}`, 20, 30);
ctx.fillText(`Kecepatan: ${gameSpeed.toFixed(1)}x`, canvas.width - 130, 30);
// 7. Jika Game Over
if (isGameOver) {
if (score > highScore) {
highScore = score;
}
ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#e94560';
ctx.font = 'bold 30px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20);
ctx.fillStyle = '#ffffff';
ctx.font = '16px sans-serif';
ctx.fillText(`Skor Akhir: ${score} | High Score: ${highScore}`, canvas.width / 2, canvas.height / 2 + 15);
ctx.fillText('Tekan Spasi / Klik untuk Main Lagi', canvas.width / 2, canvas.height / 2 + 45);
ctx.textAlign = 'left'; // Reset alignment
return;
}
requestAnimationFrame(loop);
}
// Mulai game pertama kali
loop();
</script>
</body>
</html>🏃 Stickman Runner Ultimate
Tekan Spasi atau Klik Layar untuk Melompat (Bisa Double Jump!).
🎒 Panduan Praktis untuk Siswa: Memulai & Menguji Game
Sebelum mulai mengetik atau menyalin kode, pastikan komputer atau laptop kalian sudah menyiapkan aplikasi pendukung berikut ini agar proses ngoding berjalan lancar!
1. Aplikasi Apa yang Harus Dibuka?
- Teks Editor (Visual Studio Code / Notepad++ / Notepad): Aplikasi tempat kita menulis dan menyusun baris kode program. Di ekstrakurikuler kita, disarankan menggunakan VS Code.
- Browser Web (Google Chrome / Microsoft Edge / Firefox): Jendela penjelajah internet yang akan kita pakai untuk menjalankan, melihat hasil, dan memainkan game buatan kita.
2. Langkah Menyimpan File Project
- Buka aplikasi teks editor pilihanmu (misalnya VS Code).
- Buat dokumen baru, lalu salin (copy-paste) kode lengkap game Stickman Runner ke dalam editor tersebut.
- Simpan file dengan menekan tombol Ctrl + S (atau Cmd + S jika pakai Mac).
- Beri nama file:
index.html(Pastikan ekstensinya berakhiran .html, bukan .txt). Simpan di dalam satu folder khusus, contohnya folder Game-Stickman.
3. Cara Menguji Coba Game (Testing)
Setelah file berhasil disimpan, saatnya melihat apakah game buatanmu berfungsi dengan baik:
- Buka folder tempat kamu menyimpan file
index.htmltadi. - Klik dua kali (Double-click) pada file
index.htmltersebut. - File akan otomatis terbuka di browser web (Chrome/Edge).
- Uji kontrol permainan:
- Tekan tombol Spasi atau Panah Atas di keyboard untuk membuat stickman melompat. Coba tekan dua kali dengan cepat untuk melakukan Double Jump!
- Biarkan karakter menabrak rintangan kaktus untuk memastikan layar GAME OVER muncul dengan informasi skor akhir.
- Tekan spasi sekali lagi di layar Game Over untuk menguji apakah game bisa dimulai ulang dari awal.
