Your a snake and need to eat fruit to grow longer if you eat yourself you lose, and you can also post on Facebook's game

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

No:10969

101

←

Prev Next

→

Your a snake and need to eat fruit to grow longer ..ALL
Developer User4715｜Date and time 23/8/6 9:44:30
Build time 53.338 sec｜Game capacity 6.334KB｜

Script

Berikut adalah contoh game Snake yang telah saya implementasikan dalam satu file HTML. Game ini dapat dimainkan melalui smartphone dengan menggunakan pictograms. Saat ini permainan Snake sudah dimulai.

Game Snake ini dibuat dengan memanfaatkan elemen canvas pada HTML dan menggunakan JavaScript untuk menggambar, menggerakkan, dan mengendalikan permainan Snake. Setiap kali permainan dimulai, snake akan muncul di posisi pojok kiri atas canvas. Anda dapat menggerakkan ular dengan menyentuh dan menggesek layar smartphone Anda. Untuk makan buah, ular hanya perlu menyentuhnya. Jika ular menabrak batas layar permainan atau menabrak dirinya sendiri, maka permainan akan berakhir. Setelah permainan berakhir, akan muncul pesan dengan skor Anda. Anda juga dapat mengimplementasikan fitur untuk membagikan skor ke Facebook dengan memanfaatkan API Facebook.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Game Snake</title>
  <style>
    canvas {
      background-color: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="snakeCanvas" width="400" height="400"></canvas>

// Inisialisasi ukuran grid, panjang awal ular, dan kecepatan permainan
    const gridSize = 20;
    const snakeSize = 1;
    const gameSpeed = 150;

// Inisialisasi posisi awal kepala ular
    let snakeX = 0;
    let snakeY = 0;

// Inisialisasi array untuk menggambar bagian ular
    const snake = [];

// Inisialisasi variabel untuk mengendalikan arah ular
    let dx = gridSize;
    let dy = 0;

// Inisialisasi posisi dan ukuran buah
    let fruitX = 0;
    let fruitY = 0;
    const fruitSize = gridSize;

// Inisialisasi skor
    let score = 0;

// Fungsi untuk memulai permainan
    function startGame() {
      // Membuat posisi awal buah
      generateFruitPosition();

// Atur interval untuk menggerakkan ular dan menggambar permainan
      setInterval(updateGameArea, gameSpeed);
    }

// Fungsi untuk menggambar ular, buah, dan grid
    function drawGameArea() {
      // Bersihkan area permainan sebelum menggambar frame baru
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Gambar ular
      ctx.fillStyle = "#00ff00";
      for (let i = 0; i < snake.length; i++) {
        ctx.fillRect(snake[i].x, snake[i].y, gridSize, gridSize);
      }

// Gambar buah
      ctx.fillStyle = "#ff0000";
      ctx.fillRect(fruitX, fruitY, fruitSize, fruitSize);

// Gambar grid
      ctx.strokeStyle = "#ffffff";
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
      }

for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
      }
    }

// Fungsi untuk menggerakkan ular dan memeriksa kondisi permainan
    function updateGameArea() {
      // Periksa jika ular menabrak batas layar
      if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height) {
        gameOver();
        return;
      }

// Periksa jika ular menabrak dirinya sendiri
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === snakeX && snake[i].y === snakeY) {
          gameOver();
          return;
        }
      }

// Periksa jika ular memakan buah
      if (snakeX === fruitX && snakeY === fruitY) {
        score++;
        // Tambah panjang ular
        for (let i = 0; i < snakeSize; i++) {
          snake.unshift({ x: snakeX, y: snakeY });
        }
        // Membuat posisi baru untuk buah
        generateFruitPosition();
      } else {
        // Hapus elemen ular terakhir jika tidak makan buah
        snake.pop();
      }

// Pindahkan posisi ular
      snakeX += dx;
      snakeY += dy;

// Tambahkan elemen ular baru pada posisi kepala yang baru
      snake.unshift({ x: snakeX, y: snakeY });

// Gambar permainan
      drawGameArea();
    }

// Fungsi untuk menghasilkan posisi baru untuk buah
    function generateFruitPosition() {
      const maxColumns = Math.floor(canvas.width / gridSize);
      const maxRows = Math.floor(canvas.height / gridSize);

fruitX = Math.floor(Math.random() * maxColumns) * gridSize;
      fruitY = Math.floor(Math.random() * maxRows) * gridSize;
    }

// Fungsi game over
    function gameOver() {
      // Hentikan permainan
      clearInterval(updateGameArea);

// Tampilkan skor
      alert("Game Over!\nSkor Anda: " + score);

// Kirim skor ke Facebook (opsional)
      // Pembuatan fungsi untuk posting ke Facebook menggunakan API Facebook
      function postToFacebook(score) {
        // Implementasikan kode untuk posting ke Facebook di sini (dihapus sebagai contoh).
        // Pastikan pengguna telah masuk ke akun Facebook sebelumnya.
        // Dapat digunakan SDK Facebook untuk mempermudah integrasi.
      }

postToFacebook(score);
    }

// Fungsi untuk mengendalikan pergerakan ular melalui sentuhan
    function controlSnake(event) {
      event.preventDefault();

const touch = event.changedTouches[0];
      const horizontalChange = touch.pageX - touch.target.offsetLeft;
      const verticalChange = touch.pageY - touch.target.offsetTop;

if (Math.abs(horizontalChange) > Math.abs(verticalChange)) {
        // Pergerakan horizontal
        if (horizontalChange > 0) {
          // Bergerak ke kanan
          dx = gridSize;
          dy = 0;
        } else {
          // Bergerak ke kiri
          dx = -gridSize;
          dy = 0;
        }
      } else {
        // Pergerakan vertikal
        if (verticalChange > 0) {
          // Bergerak ke bawah
          dx = 0;
          dy = gridSize;
        } else {
          // Bergerak ke atas
          dx = 0;
          dy = -gridSize;
        }
      }
    }

// Mulai permainan saat pengguna menyentuh canvas
    canvas.addEventListener("touchstart", startGame, false);
    // Mengontrol pergerakan ular saat pengguna menyentuh canvas
    canvas.addEventListener("touchmove", controlSnake, false);
  </script>
</body>
</html>
```

Setelah permainan berakhir, akan muncul pesan dengan skor Anda. Anda juga dapat mengimplementasikan fitur untuk membagikan skor ke Facebook dengan memanfaatkan API Facebook.