Cara Membuat Game Circle Maze Dengan HTML5

Cara Membuat Game Circle Maze Dengan HTML5 - kita akan membuat game circle maze dengan HTML5 + Javascript + CSS3. Maze atau biasa di sebut labirin adalah game puzzle berbentuk jalan yang bercabang dan berliku - liku, untuk menyelesaikan game ini pemain harus mencapai pintu keluar dari maze. 

Untuk kali ini yang kita buat adalah circle maze yaitu maze yang berbentuk lingkaran, sebenarnya game maze kali ini tidak bisa di sebut maze juga ( bkakakakak ) karena lingkarannya akan bergerak berputar mengelilingi titik dan tidak berisi jalnan berliku tapi hanya tembok memutar yang menghalangi player mencapai titik tengah. Game ini bisa terbilang cukup sulit di mainkan karena membutuhkan timming yang tepat untuk bergerak.

Baca juga : Cara Membuat Game Tic Tac Toe Dengan HTML5

Dengan menggunakan CSS3 dan javascript kita membuat tembok - tembok yang digunakan dalam maze di dalam halaman HTML5, game kali ini juga dilengkapi dengan fitur suara ketika game berakhir, untuk lebih jelasnya langsung saja kita buat gamenya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

CSS

Buatlah dahulu sebuah folder dengan nama Circle_maze kemudian buatlah sebuah file CSS baru dengan nama style.css dengan isi script :

body {
    background-color: #000000;
}
.ring {
    position: absolute;
    left: 50%;
    top: 150px;
    transform-origin: 18px 200px;
    -webkit-transform-origin: 18px 200px;
}
h1{
 text-align:center;
 font-family: monospace;
 font-size: 170%;
 color: #fff;
 font-style: italic;
 text-decoration: none;
 font-weight: 100;
 margin: 5px;
}
.seg {
    position: absolute;
    width: 36px;
    height: 20px;
    background-color: #00FF00;
}
.hide {
    display: none;
}
.long {
    height: 60px;
}
#reset {
    position: absolute;
    left: 30%;
}
#win {
    position: absolute;
    left: 50%;
    top: 330px;
    width: 20px;
    height: 20px;
    border: 10px solid #FFAA00;
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 10px rgba(255, 0, 0, 1);
    border-radius: 50%;
}

Javascript

Untuk game kali ini kita membutuhkan jQuery jadi donwload terlebih dahulu file jQuerynya di sini : DOWNLOAD
Simpan dalam folder Circle_maze, buatlah sebuah file javascript dengan nama script.js dengan isi script :

var $segs;
var angle = 0;
var segments = 36;
var rings = 4;
var cnt;
var i;
var error_snd;
var angle = Array(rings);
var angleSpeed = Array(rings);
var done = false;

function setupSegments() {
    var wrap = document.getElementById("wrap");
    var scale = 1.3;
    var opac = 0.5;
    angleSpeed[0] = 3.0;
    angleSpeed[1] = -3.0;
    angleSpeed[2] = 2.5;
    angleSpeed[3] = -2.5;
    for (var r = 0; r < rings; r++) {
        angle[r] = 0;
        var ring = document.createElement("div");
        ring.className = "ring";
        var hide = false;
        for (var s = 0; s < segments; s++) {
            var segment = document.createElement("div");
            var cn = "seg";
            var change_p = hide ? 0.5 : 0.3;
            if (Math.random(1.0) < change_p) hide = !hide;
            if (hide) cn += " hide";
            if (Math.random(1.0) < 0.1) cn += " long";
            segment.className = cn;
            segment.title = ring;
            ring.insertBefore(segment, null);
        }
        $(ring).css("transform", "scale(" + scale + ")");
        ring.style.opacity = opac;
        opac += 0.15;
        scale *= 0.7;
        wrap.insertBefore(ring, null);
    }
}

function rep_ex() {
    for (var j = 0; j < rings; j++) {
        angle[j] += angleSpeed[j];
        if (angle[j] >= 360) angle[j] -= 360;
    }
    cnt = 0;
    $('.seg').each(function () {
        var index = Math.floor(cnt / segments);
        var a = angle[index] + (360 / segments) * cnt;
        $(this).css("transform", "rotate(" + a + "deg)");
        cnt++;
    });
    var a = (Math.PI * angle[0]) / 45.0;
    a = Math.sin(a) / 4 + 0.8;
    $('#win').css("transform", "scale(" + a + ")");
}

function init() {
    $('#wrap').html("");
    $('#reset').css("display", "none");
    $('#win').mouseenter(function () {
        fail(false);
    });
    setupSegments();
    error_snd = document.getElementById("fail");
    $('.seg').each(function () {
        $(this).css("transform-origin", "50% 200px");
        $(this).mouseenter(function () {
            fail(true)
        });
    });
    i = setInterval(rep_ex, 30);
    done = false;
}

function fail(play) {
    if (done) return;
    window.clearTimeout(i);
    if (play) error_snd.play();
    else alert("WIN!");
    $('#reset').css("display", "block");
    done = true;
}

$(document).ready(init);

Javascript ini yang nantinya membuat div elemen baru di dalam #wrap yang berbentuk tembok lingkaran dengan fungsi :

function setupSegments() 

Kemudian memutar lingkarannya dengan fitur CSS transform menggunakan fungsi :

function rep_ex()

Sound

Untuk suaranya anda dapat mengunduhnya di sini : DONWLOAD
Kemudian simpan dalam folder yang sama.

HTML

Buatlah sebuah file HTML baru dengan nama index.html di dalam folder yang sama dengan isi script :

<!DOCTYPE HTML>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css"/> 
  <script src="jquery-1.8.3.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <h1>Jin Toples Programming</h1>
  <h1>Game Circle Maze Dengan HTML5</h1>
  <button id="reset" onclick="init()">Reset</button>
  <div id="win"></div>
  <div id="wrap"></div>
  <audio id="fail" src="error.wav"></audio>
 </body>
</html>

Sekarang anda dapat mencobanya dengan cara membuka file index.html di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Author : Marco Barria

From : http://cssdeck.com/labs/maze-css-game

Modified by : Jin Toples

Game Circle Maze Dengan HTML5 anda sudah selesai, baca juga tutorial program HTML5 dan Javascript lainnya.