Click here for free DL of the app version that can save data.

No:23240

Game sepak bola sederhana
Developer User10767｜Date and time 23/10/29 8:05:52
Build time 60.085 sec｜Game capacity 2.978KB｜

Script

Game Sepak Bola Sederhana

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Game Sepak Bola Sederhana</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

#field {
      height: 400px;
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      background-color: #00ff00;
      position: relative;
    }

#ball {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      background-color: #000;
      position: absolute;
    }

#player {
      height: 80px;
      width: 30px;
      background-color: #000;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <h1>Game Sepak Bola Sederhana</h1>
  <div id="field">
    <div id="ball"></div>
    <div id="player"></div>
  </div>

// Inisialisasi posisi awal bola dan pemain
    let ballX = 0;
    let ballY = 200;
    let playerX = 270;

// Fungsi untuk mengupdate posisi bola dan pemain
    function update() {
      // Memperbarui posisi bola
      ball.style.left = ballX + "px";
      ball.style.top = ballY + "px";

// Memperbarui posisi pemain
      player.style.left = playerX + "px";
    }

// Fungsi untuk menggerakkan pemain ke kiri
    function moveLeft() {
      playerX -= 10;
    }

// Fungsi untuk menggerakkan pemain ke kanan
    function moveRight() {
      playerX += 10;
    }

// Fungsi untuk mendapatkan keycode tombol yang ditekan
    function handleKeyDown(event) {
      const keyCode = event.keyCode;

// Arrow left
      if (keyCode === 37) {
        moveLeft();
      }
      
      // Arrow right
      if (keyCode === 39) {
        moveRight();
      }
    }

// Mendeteksi input tombol dari keyboard
    document.addEventListener("keydown", handleKeyDown);

// Fungsi untuk menjalankan game
    function gameLoop() {
      // Mengupdate posisi bola dan pemain
      update();

// Mendapatkan lebar area bermain
      const fieldWidth = field.clientWidth;

// Mengubah arah bola ketika mencapai batas area bermain
      if (ballX >= fieldWidth - 30 || ballX <= 0) {
        ballX = fieldWidth - 30;
      }

// Menggerakkan bola secara otomatis
      ballX += 5;

// Mengecek jika pemain berhasil menendang bola
      const ballPosition = ball.getBoundingClientRect();
      const playerPosition = player.getBoundingClientRect();

if (
        ballPosition.bottom >= playerPosition.top && 
        ballPosition.right >= playerPosition.left && 
        ballPosition.left <= playerPosition.right
      ) {
        ballY = playerPosition.top - 30;
      }

// Memanggil fungsi gameLoop secara rekursif untuk terus menjalankan game
      requestAnimationFrame(gameLoop);
    }

// Memulai game
    gameLoop();
  </script>
</body>
</html>