Membuat game dengan Html

Membuat game dengan html

Html adalah kependendekan dari Hypertext mark up language, merupakan bahasa pemograman yang biasa digunakan oleh para web designer. file html bisa dibuat dengan menggunakan text editor notepad, yang secara otomatis sudah terinstall pada saat kita menginstall window. Jadi untuk mempraktekan tutorial ini sangatlah mudah hanya dengan mencari program notepad di komputer yang kita miliki, lalu kita mengetikan kodenya.

Penulisan Kode html biasanya di mulai dengan menuliskan tag html seperti <html> dan di akhri dengan </html>. itu adalah pengetahuan dasar tentang penulisan kode-kode html. Kali ini saya akan berbagi pengetahuan bagaimana cara membuat game dengan menggunakan kode html tersebut. Ini adalah contoh game yang akan kita buat.

Untuk membuat game seperti di atas kita tinggal Membuka Program Notepad Kemudian Kita Ketikan Kode Html berikut :

<!DOCTYPE html>
<html>

<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: white;
}
</style>


      <div class="w3-row-padding w3-padding-xxlarge">
        <div class="w3-col m4">


      </div>

    </div>





<div class="w3-main w3-light-grey" id="belowtopnav" style="margin-left:20px;">
<div class="w3-row w3-white">
    <div class="w3-col l10 m12" id="main">

<div id="myfilter" style="position:absolute;background-color:#000000;opacity:0.3;width:500px;height:250px;display:none"></div>
<div id="myrestartbutton" style="position:absolute;padding-top:90px;padding-left:220px;display:none;"><button onclick="restartGame()">Restart</button></div>
<div id="canvascontainer"></div>
<br>
<div style="text-align:center;width:500px;">
<button ontouchstart="moveup()" onmousedown="moveup()" onmouseup="clearmove()">UP</button><br><br>
<button ontouchstart="moveleft()" onmousedown="moveleft()" onmouseup="clearmove()">LEFT</button>
<button ontouchstart="moveright()" onmousedown="moveright()" onmouseup="clearmove()">RIGHT</button><br><br>
<button ontouchstart="movedown()" onmousedown="movedown()" onmouseup="clearmove()">DOWN</button>
</div>
<br>

<script>

var myGameArea;
var myGamePiece;
var myObstacles = [];
var myscore;

function restartGame() {
document.getElementById("myfilter").style.display = "none";
document.getElementById("myrestartbutton").style.display = "none";
myGameArea.stop();
myGameArea.clear();
myGameArea = {};
myGamePiece = {};
myObstacles = [];
myscore = {};
document.getElementById("canvascontainer").innerHTML = "";
startGame()
}

function startGame() {
    myGameArea = new gamearea();
    myGamePiece = new component(30, 30, "red", 10, 75);
    myscore = new component("15px", "Consolas", "black", 220, 25, "text");
    myGameArea.start();
}

function gamearea() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 500;
    this.canvas.height = 250;
    document.getElementById("canvascontainer").appendChild(this.canvas);
    this.context = this.canvas.getContext("2d");
    this.pause = false;
    this.frameNo = 0;
    this.start = function() {
        this.interval = setInterval(updateGameArea, 20);
    }
    this.stop = function() {
        clearInterval(this.interval);
        this.pause = true;
    }
    this.clear = function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    if (type == "text") {
        this.text = color;
    }
    this.score = 0;    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, y, min, max, height, gap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            document.getElementById("myfilter").style.display = "block";
            document.getElementById("myrestartbutton").style.display = "block";
            return;
        }
    }
    if (myGameArea.pause == false) {
        myGameArea.clear();
        myGameArea.frameNo += 1;
        myscore.score +=1;
        if (myGameArea.frameNo == 1 || everyinterval(150)) {
            x = myGameArea.canvas.width;
            y = myGameArea.canvas.height - 100;
            min = 20;
            max = 100;
            height = Math.floor(Math.random()*(max-min+1)+min);
            min = 50;
            max = 100;
            gap = Math.floor(Math.random()*(max-min+1)+min);
            myObstacles.push(new component(10, height, "green", x, 0));
            myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
        }
        for (i = 0; i < myObstacles.length; i += 1) {
            myObstacles[i].x += -1;
            myObstacles[i].update();
        }
        myscore.text="SCORE: " + myscore.score;
        myscore.update();
        myGamePiece.x += myGamePiece.speedX;
        myGamePiece.y += myGamePiece.speedY;
        myGamePiece.update();
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function moveup(e) {
    myGamePiece.speedY = -1;
}

function movedown() {
    myGamePiece.speedY = 1;
}

function moveleft() {
    myGamePiece.speedX = -1;
}

function moveright() {
    myGamePiece.speedX = 1;
}

function clearmove(e) {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
startGame();

</script>
</div>
</div>

</html>

Simpanlah kode di atas dengan nama gamehtml.html, nah itulah contoh sederhana membuat game dengan html.