Tutorial Pemrograman

Cara Membuat Game 2 Cars dengan JavaScript

Ada banyak sekali game yang bisa dibuat dengan bahasa pemrograman CSS dan JavaScript. Salah satunya adalah game 2 cars. Lalu, bagaimana caranya membuat game 2 cars dengan bahasa pemrograman CSS dan JavaScript? Yuk langsung saja buka komputer kamu, dan ikuti beberapa langkah mudah di bawah ini.

1. Download dulu file plugin dan gambar pendukung. Letakkan file plugin dan gambar pendukung di folder yang sama dengan file index.html dan style.css.

2. Buka XAMPP Control Panel, serta aktifkan Apache.

3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<html>
    <head>
        <title>Membuat Game Two Cars dengan JavaScript</title>
        <link rel="stylesheet" href = "style.css"/>
    </head>
<body>
    <div class="container">
        <canvas id="canvas" height="600" width="600"></canvas>
    </div>
    <div id="board">
        <label id="highscore">Start Game</label>
        <br><br>
        <label id="score">Hindari Kotak.</label>    
        <br> <br> 
        <button class="btn" id="btnStart">Start</button>
    </div>	
    <script src="jquery-3.1.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Simpan kode HTML5 di atas di folder xampplite → htdocs → buat folder baru dengan nama TwoCars → simpan kode di atas dengan nama index.html.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/TwoCars.

5. Untuk membuat background game, buka kembali lembar baru di teks editor dan ketikkan kode CSS berikut ini.

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #b22222;
}

canvas {
    border-style: solid;
    border-width: 1px;
    background-color: #373737;    
}

.container {
    position: relative;
    height: 600px;
    width: 600px;
    margin: 0 auto;
    margin-top: 20px;
}

#board{
    position: absolute;
    left: 42%;
    top: 45%;
    text-align: center;
    width: 200px;
    height: 110px;
    background-color: black;
    opacity: 0.8;
    border-color: white;
   
    border-radius: 5px;
    padding: 10px;

}

#board label{
    color: white;
    font-family: sans-serif;
    font-size: 15px;
}

#highscore{
    font-size: 18px !important;
    color: yellow !important;
}

.btn{
    outline: none;
    border-style: none;  
    border-radius: 3px;
    background-color: #373737;
    padding: 10px;
    margin: 0 auto;
    cursor: pointer;
}

.btn:hover{
    background-color:gray;
}

Simpan kode CSS di atas di folder xampplite → htdocs → pilih folder TwoCars → simpan kode di atas dengan nama style.css.

6. Reload alamat website: http://localhost/ TwoCars. Berikut tampilan dari background game.

7. Untuk membuat dan menampilkan game 2 cars, buka kembali lembar baru di teks editor dan ketikkan kode JavaScript berikut ini.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gameStatus = false;
var highscore = 0;
var car1, car2, timer, objTimer,
    obstacles = [],
    score = 0;

function Car(type) {
    this.y = 3 * canvas.height / 4;
    this.type = type;
    this.status = 'playing';
    this.width = 30;
    this.height = 60;

    //set image
    var img = document.createElement('img');
    if (type === 'red') img.src = 'car_red.svg';
    else if (type === 'blue') img.src = 'car_blue.png';
    this.image = img;


    //place it in random lane
    var startX;
    if (type === 'blue') startX = 0;
    else startX = canvas.width / 2;
    var r = randBool();
    if (r) {
        this.x = startX;
        this.lane = 'left';
    } else {
        this.x = startX + canvas.width / 4;
        this.lane = 'right';
    }

    var offset = canvas.width / 8 - this.width / 2;
    this.x += offset;

    console.log('const ' + typeof (this.x));

}

Car.prototype.draw = function () {
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}

Car.prototype.swipePos = function () {
    var iX = this.x;
    var fX;
    var finalLane; //final position
    var offset = 0;

    if (this.lane === 'right') {
        fX = iX - canvas.width / 4;
        finalLane = 'left';
        offset = -1;
    } else {
        fX = iX + canvas.width / 4;
        finalLane = 'right';
        offset = 1;
    }

    console.log(this.x + " : " + fX + ' - ' + offset);
    var self = this;

    var swipeTimer = setInterval(function () {
        if (self.x !== fX) {
            self.status = 'moving';
            self.x += offset;
        } else {
            clearInterval(swipeTimer);
            self.lane = finalLane;
            self.status = 'playing';
        }
    }, 1);
}

function Obj() {

    //decide colour
    var r = randBool();
    var startX;

    if (r) {
        this.color = 'red';
        startX = canvas.width / 2;
    } else {
        this.color = 'blue';
        startX = 0;
    }

    //decide lane
    r = randBool();
    if (r) {
        this.lane = 'right';
        this.x = startX + canvas.width / 4;
    } else {
        this.lane = 'left';
        this.x = startX;
    }


    //decide type
    r = randBool();
    if (r) {
        this.type = 'circle';
        this.radius = 25;
        var offset = canvas.width / 8;
        this.x += offset;
    } else {
        this.type = 'rect';
        this.width = 50;
        this.height = 50;
        var offset = canvas.width / 8 - this.width / 2;
        this.x += offset;
    }

    this.y = generateRandom(-50, -300);
    this.speed = 5;
    this.status = 'active';
    obstacles.push(this);
}

Obj.prototype.draw = function () {

    var self = this;
    if (self.status === 'active') {

        if (self.type === 'circle') {

            //shell
            ctx.fillStyle = self.color;
            ctx.beginPath();
            ctx.arc(self.x, self.y, self.radius, 0, 2 * Math.PI);
            ctx.fill();

            //sub-core
            ctx.fillStyle = 'whitesmoke';
            ctx.beginPath();
            ctx.arc(self.x, self.y, self.radius - 5, 0, 2 * Math.PI);
            ctx.fill();

            //core
            ctx.fillStyle = self.color;
            ctx.beginPath();
            ctx.arc(self.x, self.y, self.radius - 15, 0, 2 * Math.PI);
            ctx.fill();

            //destroy
            // if (self.y + self.height > canvas.height) delete self;

            //check collission
            var car;
            if (self.color === 'red') car = car1;
            else car = car2;

            //collission with car
            //if(self.x === car.x && self.y + self.height)       

        } else if (self.type === 'rect') {

            //draw
            //shell
            ctx.fillStyle = self.color;
            ctx.fillRect(self.x, self.y, self.width, self.height);

            //sub-core
            ctx.fillStyle = 'whitesmoke';
            var offset = 5;
            ctx.fillRect(self.x + offset, self.y + offset, self.width - 2 * offset, self.height - 2 * offset);

            //core
            ctx.fillStyle = self.color;
            var offset = 15;
            ctx.fillRect(self.x + offset, self.y + offset, self.width - 2 * offset, self.height - 2 * offset);

            //destroy
            if (self.y > canvas.height) delete self;

            //collission with car
        }
    }
}

Obj.prototype.move = function () {
    var self = this;
    self.y += self.speed;
}

function init() {

    clear();
    score = 0;
    obstacles = [];
    $("#canvas").css('opacity', 1);
    car1 = new Car('blue');
    car2 = new Car('red');

    timer = setInterval(function () {
        clear();
        drawRoad();
        drawObstacles();
        car1.draw();
        car2.draw();
        if (gameStatus) {
            drawScore();
        }
    }, 20);

    objTimer = setInterval(function () {
        if (gameStatus) var o = new Obj();
    }, 1000);

}

function stop() {
    clearInterval(timer);
    clearInterval(objTimer);
    gameStatus = false;

    pre();

    $("#highscore").text("Highscore: " + highscore);
    $("#score").text("Score: " + score);
    $("#board").fadeIn(500);
}

function drawRoad() {

    //draw two road seperator
    ctx.fillStyle = 'black';
    ctx.fillRect(canvas.width / 2, 0, 3, canvas.height);


    //draw sub road seperator
    ctx.fillStyle = 'white';
    // ctx.lineJoin = 'dotted';
    ctx.fillRect(canvas.width / 4, 0, 2, canvas.height);
    ctx.fillRect(3 * canvas.width / 4, 0, 2, canvas.height);
}

function drawObstacles() {
    for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].move();
        obstacles[i].draw();
        checkCollission(obstacles[i]);
    }
}

function drawScore(params) {
    ctx.fillStyle = 'white';
    ctx.font = '50px sans-serif';
    ctx.fillText(score, 50, 50);
}

function checkCollission(obstacle) {

    var col = false;

    //select car
    var car;
    if (obstacle.color === 'red') car = car2;
    else car = car1;

    //check collossion according to type
    if (obstacle.type === 'rect') {

        //up-down collission
        if (car.x > obstacle.x && car.x + car.width < obstacle.x + obstacle.width && car.y > obstacle.y && car.y < obstacle.y + obstacle.height)
            col = true;

        //left collission

        //right collission

    } else if (obstacle.type === 'circle') {
        if (car.x > obstacle.x - obstacle.radius && car.x + car.width < obstacle.x + obstacle.radius && car.y > obstacle.y - obstacle.radius && car.y < obstacle.y + obstacle.radius) {

            if (obstacle.status === 'active')
                score++;
            $("#score").text("Score: " + score);
            obstacle.status = 'dead';
        }

    }

    highscore = (score > highscore) ? score : highscore;
    if (col) stop();
}

function generateRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randBool() {
    return (generateRandom(1, 100) % 2 === 0);
}

function randBinaryNum() {
    if (randBool()) return 1;
    else return 0;
}

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

$("#canvas").click(function (e) {
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX - rect.left;

    var c;
    if (x < canvas.width / 2) c = car1;
    else c = car2;

    if (c.status === 'playing') {
        c.swipePos();
    }
});

$("#btnStart").click(function (e) {
    gameStatus = true;
    init();
    $("#board").fadeOut(500);
})


function pre() {
    //draw game starting background
    drawRoad();
    car1 = new Car('blue');
    car2 = new Car('red');
    var img = new Image();
    img.src = 'logo.png';
    img.onload = function () {
        ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height, img.width, img.height);
        car1.draw();
        car2.draw();
        $("#canvas").css('opacity', 0.9);
    }
}

pre();

Simpan kode JavaScript di atas di folder xampplite → htdocs → pilih folder TwoCars → simpan kode di atas dengan nama script.js.

8. Reload alamat url : http://localhost/TwoCars. Berikut tampilan awal game 2 cars, klik tombol start untuk memulai game.

Pindahkan posisi mobil dengan cara klik kiri atau klik kanan disamping mobil. Hindari bertabrakan dengan kotak. Tabrak lingkaran untuk mengumpulkan skor.

Tampilan game over.

9. Selesai, menarik sekali bukan?.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/ TwoCars. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. TwoCars menunjuk pada folder  TwoCars saya di xampplite → htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Game 2 Cars dengan JavaScript’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top