Cara Membuat Game Images dengan Canvas
Andaikata segala kehidupan ini menyakitkan, karenanya 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 tak tahu apa itu, karna ilmumu terbatas. Kau hanya yakin , bila tak di kehidupan ini suatu dikala nanti pasti akan ada yang lebih mempesona dibanding menatap sepotong rembulan yang sedang bersinar indah. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Game Images dengan Canvas.
Game images ini yakni game seperti game jadul atau pun yang disebut jaman dulu. Hanya berupa gambar dan tombol atas, bawah, kiri, kanan. Oke seketika saja, berikut Cara Merancang Game Images dengan Canvas.
Pertama-tama-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 bagi 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 bagi bagian CSS nya.
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}Bagaimana teman-teman? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Merancang Game Images dengan Canvas.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
