Contoh Panduan Membuat Game HTML Menggunakan CSS dan JavaScript part 2

🎮 Game Mini Part 2: Gambar Karakter & Suara Lompat

Berikut adalah lanjutan dari tutorial membuat game mini sebelumnya. Pada bagian ini, kita melakukan peningkatan dengan mengganti karakter kotak menjadi gambar karakter dan menambahkan efek suara saat karakter melompat. Kalian dapat memahamai tutorial ini jika membaca postingan bagian pertama dengan judul yang sama.

Tutorial ini tetap sederhana dan bisa langsung dicoba di browser, cocok untuk kamu yang ingin belajar membuat game tanpa library tambahan!

Baca Juga: Contoh Panduan Membuat Game HTML Menggunakan CSS dan JavaScript part 1

🔍 Penjelasan Singkat:

• ✅ Karakter diganti menggunakan elemen Image() dan ditampilkan dengan ctx.drawImage().
• ✅ Suara lompat ditambahkan menggunakan objek Audio() dan diputar saat karakter melompat.
• ✅ Script tetap ringan dan mudah dipahami untuk pemula.

Saya sederhanakan saja agar bisa kalian copy paste. Berikut sumber kode gamenya: 

<h2>🎮 Game Mini Part 2: Gambar Karakter & Suara Lompat</h2>

<canvas id="gameCanvas" width="400" height="300"></canvas>

<div class="controls">

  <button onclick="moveLeft()">⬅️</button>

  <button onclick="jump()">🔘</button>

  <button onclick="moveRight()">➡️</button>

</div>

<style>

  canvas {

    border: 2px solid #333;

    background: #eef;

    display: block;

    margin: 20px auto;

  }

  .controls {

    text-align: center;

    margin-top: 10px;

  }

  button {

    font-size: 24px;

    padding: 10px 20px;

    margin: 5px;

    touch-action: manipulation;

  }

</style>

<script>

  const canvas = document.getElementById('gameCanvas');

  const ctx = canvas.getContext('2d');

  const playerImage = new Image();

  playerImage.src = 'https://opengameart.org/sites/default/files/Green-Cap-Character-16x18.png';

  const jumpSound = new Audio('https://www.fesliyanstudios.com/play-mp3/387');

  const player = {

    x: 50,

    y: 240,

    width: 30,

    height: 30,

    vy: 0,

    gravity: 1,

    jumpForce: -15,

    jumping: false

  };

  const groundY = 240;

  function drawPlayer() {

    ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);

  }

  function update() {

    player.vy += player.gravity;

    player.y += player.vy;

    if (player.y > groundY) {

      player.y = groundY;

      player.vy = 0;

      player.jumping = false;

    }

  }

  function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawPlayer();

  }

  function gameLoop() {

    update();

    draw();

    requestAnimationFrame(gameLoop);

  }

  function moveLeft() {

    player.x -= 10;

  }

  function moveRight() {

    player.x += 10;

  }

  function jump() {

    if (!player.jumping) {

      player.vy = player.jumpForce;

      player.jumping = true;

      jumpSound.currentTime = 0;

      jumpSound.play();

    }

  }

  gameLoop();

</script>

Catatan jika kalian ingin menerapkan game di halaman blog, kalian juga harus memodifikasi elemen template melalui HTML, menulis kode kode melalui opsi tampilan HTML, karena ada tambahan untuk menyesuaikan beberapa parameter penulisannya, jika kalian menginginkan tutorialnya saya akan buatkan melalui halaman blog ini.

Untuk memahami tutorial ini baca dari psotingan bagian pertama.

Di tutorial selanjutnya, kita akan menambahkan rintangan atau tantangan agar gamenya lebih menantang dan menarik!

Selamat mencoba, dan jangan lupa bereksperimen dengan gambar atau suara kamu sendiri! 🎨🔊