Cara Membuat Game Images dengan Canvas

Andaikata semua kehidupan ini menyakitkan, maka di luar sana pasti masih ada sepotong bagian yang menyenangkan. Kemudian kau akan membenak pasti ada sesuatu yang jauh lebih indah dari menatap rembulan di langit. Kau tidak tahu apa itu, karna ilmumu terbatas. Kau hanya yakin , bila tidak di kehidupan ini suatu saat nanti pasti akan ada yang lebih mempesona dibanding menatap sepotong rembulan yang sedang bersinar indah. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Game Images dengan Canvas.

Game images ini adalah game seperti game jadul atau juga yang disebut jaman dulu. Hanya berupa gambar dan tombol atas, bawah, kiri, kanan. Oke langsung saja, berikut Cara Membuat Game Images dengan Canvas.

Pertama-tama, siapkan file index.html nya.

Kemudian, isi di bagian <body> tag-tag berikut.

<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>

<p>The component constructor uses the built-in image object to draw images onto the canvas.</p>

Dan setelah itu, isi untuk bagian Javascriptnya.

<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    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 (type == "image") {
            ctx.drawImage(this.image,
                this.x,
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

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

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

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

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

function clearmove() {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
</script>

Terakhir, isi untuk bagian CSS nya.

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Game Images dengan Canvas.

Semoga bermanfaat, terima kasih

Cara Membuat Game Images dengan Canvas

Kategori