Membuat Game Snake dengan HTML dan Javascript keren

    Membuat Game Snake Dengan HTML  dan Javascript – Selamat datang Becak code di tutorial cara membuat game dengan html terbaru. seperti pada judul tutorial ini, kita akan membahas secara lengkap tentang cara membuat game sederhana dengan HTML5.

Pastinya dengan menggunakan tag dari html5, yaitu tag <canvas>. dan menggunakan bantuan jQuery untuk membuat makanan, pergerakan si ular dan sebagainya.


Membuat Game Snake Dengan HTML5 dan Javascript

Langsung saja kita mulai membuat game snake dengan HTML5 dan JQuery. pertanyaannya, apa saja nih yang kita butuhkan ?

karena di sini kita menggunakan bantuan Javascript juga, maka kita perlu download dulu jQuerynya. atau bisa menggunakan link online jquery untuk di hubungkan dengan file html/php kita.

Buat Sebuah Struktur Folder Seperti Berikut ini:













Step By Step Tutorial Game Snake

Pertama, buat sebuah file HTML atau  bisa juga file PHP terserah Brader. karena ini hanya sebagai contoh saja, maka saya menggunakan file HTML saja. Jadi disini saya membuat file dengan nama index.html .

index.html

<!doctype html>

<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Game Snake Becak Code</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1"
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
<!-- Becak Code | Programing and Internet Marketing -->
 <div id="main">
        <canvas id="canvas">
        </canvas>  
    </div>
    <span>Author <a href="https://becakcode.blogspot.com" target="_blank">Becak Code</a> ☺</span>
    <script src="js/config.js"></script>
    <script src="js/draw_component.js"></script>
 <script src="js/script.js"></script>
    </body>
</html>

Kemudian Buatlah sebuah Folder dengan nama css

lalu buat File css dengan nama style.css

style.css


@import url('https://fonts.googleapis.com/css?family=Exo+2');
body {
 background: #343436;
 color: #ffffff;
 text-align: center;
}
#main {
 box-shadow: inset 0px 0px 5px rgba(0,0,0,0.9);
 background: #1D1F20;
}
canvas {
 margin-top: 7px;
 margin-left: 7px;
}
a, a:hover{
 text-decoration: none;
 color: #ffffff;
}
a {
 transition: linear 0.2s;
}
a:hover {
 opacity: 0.8;
}
span {
 font-size: 13px;
 font-family: 'Exo 2', sans-serif;
}

Buat lagi Folder dengan Nama js

lalu buat File dengan nama config.js

config.js

var config = {
 'initialSnakeLength': 3,
 'blockLength': 19,
 'blockHeight': 19,
 'blockGap': 20,
 'foodWidth': 19,
 'foodHeight':19,
 'wallHitAdjust': 20,
 'speed': 150
}

Buat lagi File dengan nama draw_component.js

draw_component.js

function drawText(text, x, y, color) {
 canvasContext.fillStyle = color;
 canvasContext.fillText(text, x, y);
}

function drawRect(x, y, width, height, color) {
 canvasContext.fillStyle = color;
 canvasContext.fillRect(x, y, width, height);
}

dan terakhir buat file dengan nama script.js

script.js

var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
var startGame = false;
var foodX, foodY, eaten = true, direction = 'r', score = 0, gameOver = false, snakeBody = [];

window.onload = function() {
 window.addEventListener('mousedown', function() {
      startGame = true;
   });
 window.addEventListener('keydown', handleKeyPress);
 initialize();
}

function handleKeyPress(e) {

 if(e.keyCode == 37 && direction != 'r')

 {
 direction = 'l';
 }
 if(e.keyCode == 38 && direction != 'b')
 {
  direction = 't';
 }
 if(e.keyCode == 39 && direction != 'l')
 {
  direction = 'r'
 }
 if(e.keyCode == 40 && direction != 't')
 {
  direction = 'b';
 }
 if(e.keyCode == 13 && gameOver == true)
 {
  gameOver = false;
  score = 0;
  createInitialSnake();
 }
}
function initialize() {
 canvas.width = document.documentElement.clientWidth - 30;
 canvas.height = document.documentElement.clientHeight - 45;

 createInitialSnake();
 setInterval(function() {
  drawAll();
 }, config.speed);
}

function createInitialSnake()
 var x = 40, y = 40;
 for(var i = 0; i < config.initialSnakeLength; i ++)
 {
  snakeBody.push({x: x, y: y});
  x += 20;
 }
}



function drawAll() {
 drawRect(0, 0, canvas.width, canvas.height, '#1D1F20');
 drawText("Score: " + score, (canvas.width / 2) - 30, 20, '#ffffff');
 if(!startGame)
   {
     drawText('Controls: Left ← Right → Up ↑ Down ↓ ', (canvas.width / 2) - 110, canvas.height / 2 - 10, '#ffffff');
     drawText('Click on the screen to start game', (canvas.width / 2) - 100, canvas.height / 2 + 10, '#ffffff');
     return;
   }

 if(gameOver)
 {
  drawText('Game Over !!!', (canvas.width / 2) - 50, canvas.height / 2 - 10, '#ffffff');
  drawText('Tekan ENTER untuk Memulai Game Baru', (canvas.width / 2) - 100, canvas.height / 2 + 10, '#ffffff');
  return;
 }
 if(eaten)
 {
  createFood();
 }
 createSnake(); 

 drawRect(foodX * 20, foodY * 20, config.foodWidth, config.foodHeight, '#ff4436');
}

function createFood() {
 foodX = Math.floor(Math.random() * 40)
 foodY = Math.floor(Math.random() * 30)
 eaten = false;
}
function createSnake() {
 snakeBody.shift();
 move();
 if(didEat())
 {
  score += 1;
  move();
  createFood();
 }
 var lastBlock = snakeBody[snakeBody.length - 1];
 if(lastBlock.x > canvas.width - config.wallHitAdjust || lastBlock.x < 0 || lastBlock.y > canvas.height - config.wallHitAdjust || lastBlock.y < 0)
 {
  resetGame();
 }
 if(selfDestruct(lastBlock.x, lastBlock.y))
 {
  resetGame();
 }
 for(var i = 0; i < snakeBody.length; i ++)
 {
  console.log(`snakeX: ${snakeBody[i].x} snakeY: ${snakeBody[i].y} foodX: ${foodX} foodY: ${foodY}`);
  if(i == snakeBody.length - 1)
  {
   drawRect(snakeBody[i].x, snakeBody[i].y, config.blockLength, config.blockHeight, '#19bd9b'); 
  }
  else
  {
   drawRect(snakeBody[i].x, snakeBody[i].y, config.blockLength, config.blockHeight, '#ffffff');  
 }

 
 }
}


function move() {
 var lastBlock = snakeBody[snakeBody.length - 1];
 if(direction == 'l')
 {
  snakeBody.push({x: lastBlock.x - config.blockGap, y: lastBlock.y});
 }
 if(direction == 'r')
 {
  snakeBody.push({x: lastBlock.x + config.blockGap, y: lastBlock.y}); 
 }
 if(direction == 't')
 { 
  snakeBody.push({x: lastBlock.x, y: lastBlock.y - config.blockGap});
 }
 if(direction == 'b')
 {
  snakeBody.push({x: lastBlock.x, y: lastBlock.y + config.blockGap});
 }
}

function didEat() {
 var lastBlock = snakeBody[snakeBody.length - 1];
 return (lastBlock.x == foodX * 20 && lastBlock.y == foodY * 20)? true : false;
}

function selfDestruct(x, y) {
    for(var i = 0; i < snakeBody.length - 1; i++)
    
        if(snakeBody[i].x === x && snakeBody[i].y === y)
            return true;
    }
    return false;
}

function resetGame() {
 gameOver = true;
 snakeBody = [];
 direction = 'r';
}

Dan Hasillnya 


           Dan akhirnya game snake telah berhasil kita buat,Terima kasih telah berkunjung di blog kami.Temukan berbagai tutorial dan berita seputar dunia teknologi dan programing yang bermanfaat di becakcode.Tinggalkan pesan bila ada yang ingin di tanyakan.

Membuat Game Snake Sederhana dengan Menggunakan Javascript

Berikut Demo Game Snake Javascript Sederhana
Password = becakcode.com


Incoming search terms:

  • membuat game sederhana dengan php
  • script game sederhana
  • membuat game berbasis web
  • cara membuat game dengan javascript
  • cara membuat game dengan php
  • cara membuat game ular dengan javascript
  • membuat game dengan php
  • membuat game dengan php dan mysql
  • cara membuat game di html
  • becakcode html
  • membuat game sederhana dengan javascript


Assalamu'alaikum, perkenalkan nama saya Yosep alfatah bisa dipanggil Yosep, asal dari Banjar Jawa Barat. Saya mulai mengenal blog pada tahun 2016. Saya suka Belajar Hal baru dan Membagikannya.