RSS

Belajar Canvas

<html>
<head>
<title>Rokok Berjalan (7411030811)</title>
<style>

#Rokoks{position:relative; height:600px;}
.rokoklayer{ position:absolute;top:10px; left:-25px;}

</style>
<script type=”application/javascript”>
x=0;
y=0;

function Rokok(){
var canvas=document.getElementById (“tutorial”);
if (canvas.getContext(“2d”)){
var ctx=canvas.getContext(“2d”);

//ujung rokok
ctx.fillStyle=”#ba0808″;
ctx.beginPath();
ctx.moveTo(145,20);
ctx.lineTo(150,20);
ctx.lineTo(160,23);
ctx.lineTo(160,30);
ctx.lineTo(140,30);
ctx.lineTo(140,23);
ctx.fill();

//batang rokok
ctx.beginPath();
ctx.fillStyle=”#dddddd”;
ctx.moveTo(140,30);
ctx.lineTo(140,120);
ctx.lineTo(140,140);
ctx.lineTo(160,140);
ctx.lineTo(160,120);
ctx.lineTo(160,30);
ctx.fill();

//pangkal rokok
ctx.fillStyle=”#ec9d04″;
ctx.beginPath();
ctx.moveTo(140,140);
ctx.lineTo(160,140);
ctx.lineTo(160,180);
ctx.lineTo(140,180);
ctx.fill();
}
}

function Geser() {
Rokoks.style.left = x+”px”;
Rokoks.style.top = y+”px”;
}

function tombol(e) {
if (e.controlKey) {
return true;
}

if (e.keyCode == 39) { //angka 39 digunakan untuk Right Arrow
x += 20; //langkah sebanyak 20 kordinat ke Kanan
} else if (e.keyCode == 37) { //angka 37 digunakan untuk Left Arrow
x -= 20; //langkah sebanyak 20 kordinat ke Kiri
} else if (e.keyCode == 38) { //angka 38 digunakan untuk UP Arrow
y -= 20; //langkah sebanyak 20 kordinat ke Atas
} else if (e.keyCode == 40) { //angka 40 digunakan untuk Down Arrow
y += 20; //langkah sebanyak 20 kordinat ke Bawah
} else {
return true;
}
Geser();
return false;
}

</script>
</head>
<body onload =”Rokok();” onload=”Geser()” onKeyDown=”return tombol(event)”>
<div id=”Rokoks”>
<canvas id=”tutorial” width=”200″ height=”200″>

</canvas>
</div>
<p><strong><em>Muhamad Dyon Dwi Mahendra / 7411030811</em></strong></p>
</body>
</html>

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: