Skip to main content

Membuat Game Sederhana Dengan JavaScript

Assalamualaikum Wr Wb

Javascript adalah Bahasa pemrograman yang di pakai di web, javascript kebanyakan di gunakan untuk kebutuhan membuat animasi, tapi tidak semata-mata javascript hanya bisa di pakai untuk membuat animasi, untuk kebutuhan operasi web pun sering di gunakan. Javascript bersifat Client Side, maksudnya adalah javascript berjalan di PC pengguna atau pengakses web, dan scriptnya pun bisa di lihat oleh user, berbeda dengan PHP yang scriptnya tidak bisa di lihat oleh user.

Selain di buat animasi, Javascript juga bisa di pakai untuk membuat aplikasi web, salah satunya adalah GAME, pada kesempatan kali ini saya akan memberikan tutorial bagaimana membuat GAME sederhana dengan Javascript, memanfaatkan event-event dalam javascript.

berikut screenshoot dari game sederhana :


Alur Game :

1. Klik button Start.
2. gambar monster akan bergerak cepat.
3. klik sebanyak mungkin gambar monsternya.
4. Apabila skor lebih dari 20, maka anda akan menang.

untuk sourcecode nya bisa di download disini atau copas dari box script di bawah.

Game ini memiliki 3 file, yaitu Html, Js dan Css.

index.html >

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>
</title><script src="js/game.js">
</script></head>
<body><table>
<tr>
<td><span id="waktu">Time Left  </span></td><td>:  <input type="text" id="time" class="text"/></td></tr>
<tr><td><span id="angka">Score      </span></td><td>:  <input type="text" id="score" class="text" />  >= 20</td></tr>
<tr><td><input type="button" onclick="start()" value="start" id="start"/></td><td><select name="level">
<option value="level1">Level 1</option>
<option value="level2">Level 2</option>
<option value="level3">Level 3</option>
<option value="level4">Level 4</option>

</select></td></tr>
</table>
<div id="arena"><img src="img/1.jpg" id="gambar" onclick="nilai()" width="100px" height="100px"/>
</div>
</body>
</html>


game.js >

var angka=20;
var atas=5;
var kiri=10;
var score = 0;
//var waktu = 20;
var waktu_habis = 0;
function start(){
bill = new pindah();
bill2 = new timer();
//.getElementById("score").value = 0;
//document.getElementById("time").value = 0;

}
function nilai(){
document.getElementById("score").value =  score;
//document.getElementById("gambar").style.color = blue;
score++;
}
function timer(){
waktu_habis = document.getElementById("time").value = angka;
angka--;
var hasil = document.getElementById("score").value;
if(waktu_habis==0){
if(hasil<20){
alert("game over!!!");
window.location="index.html";
angka=0; document.getElementById("time").value= angka;
}else{
alert("you win!!");
window.location="index.html";
angka=0; document.getElementById("time").value= angka;
}
}
if(waktu_habis==0){
setTimeout("", 1000);
}else{
setTimeout("timer()", 1000);
}
}
var parameter_kiri = false;
var parameter_atas = false;
function pindah(){
var gambar = document.getElementById("gambar");
gambar.style.position = "fixed";
gambar.style.marginLeft = kiri+"px";
gambar.style.marginTop = atas+"px";
if(kiri==900){
parameter_kiri =true;
}else if(kiri==10){
parameter_kiri=false;
}
if(atas==250){
parameter_atas=true;
}else if(atas==100){
parameter_atas=false;
}
if(parameter_kiri){
kiri-=1;
}else{
kiri+=1;
}
if(parameter_atas){
if(kiri==900){
atas-=20;
}else if(kiri==10){
atas-=20;
}
}else{
if(kiri==900){
atas+=20;
}else if(kiri==10){
atas+=20;
}

}

setTimeout("pindah()", 1/1000);
}


style.css >

#cari { width:200px;height:300px;}
#arena{ width:1000px; height: 300px; background-color:black; padding:20px 20px 20px 20px; border-radius:20px;}
#bilik_kanan{ background-color:white; width:100px; height:100%; float:right; }
#bilik_kiri{ background-color:white; width:100px; height:100%; float:left; } #gambar{ border-radius:50%; }
#start{ width:100px; }
.teks { width:50px; }

Mau pasang iklan di blog?. klik Disini
Sekian artikel saya, Semoga Bermanfaat.

Stay fools to Stay Hungry
NB : Artikel ini di peruntukkan untuk pendidikan semata. hal-hal negatif yang di lakukan oleh pengguna tutorial , bukan tanggung jawab penulis.

Popular posts from this blog

MENGATASI PRINTER KEHABISAN TINTA HITAM

Hai semua…. Saya kembali lagi untuk memberi tips dan trik computer untuk kalian. Pernahkah kalian kehabisan tinta?.Apalagi tinta hitam yang sring di gunakan buat print tugas!. Yah gitulah kalau dompet kempes tapi mau print tugas yang di kumpulin besok, wah mau print di warnet tapi gak punya duit, apalagi beli tinta waaaahhh. Tambah pusing..!!! Tapi jangan khawatir disini saya akan mengulas masalah tersebut dan memberi kalian jalan keluar untuk kalian yang dompetnya lagi kosong melompong kayak punya saya. Hehehe (jangan terseinggung ya, Cuma bercanda) Berikut adalah trik saya untuk print pada printer canon, tapi jangan khawatir kemungkinan besar gak beda jauh koq sama printer merk lain, tapi berbahagialah bagi yang printernya canon. Trik ini memiliki syarat kalau tinta warna harus ADA!! Ingat karna kita disini akan memodifikasi warna bukan menyulap catridge warna hitam yang semula habis menjadi full. LOL :D Nah sudah cukup basa basinya dengan saya berikut tutorialnya :  Buka document ya…

How Strict is Golang? #GolangDev

Hello everyone, in this occasion I would like to share about the strictness of golang. what kind of strict? let see below.

Golang is the functional programming that really have concern about performance, giving limitation to prevent overuse memory is the big deal. for example, golang has a variative type of data such as int, string, boolean, float, array etc. I wonder that you are thinking about "what kind of strictness that is? its totally similar other language", YES. but golang have specification in numeric type of data such as int have int8, int16, int32, int64. golang also have uint8, uint8, uint32 and uint64 which is its really strict you know. the following number after type of data is stand for the length. Obviously you could use the largest type of data for all the variables, but you know it could overwhelming if you put int64 in "is_valid" variable right? joking :D. golang really care about performance, because each length of variable is matters for memo…

Making a Segue Between Storyboard Part II #IOSDev

Hello everyone, in this tutorial i would like to continue my last tutorial about segue, if you dont have read it yet, just go to this link.

in this tutorial i would like to show you how to switch between view controller using programmatically in swift. interesting right? so here it is.
prerequisite:
* create new project
* know how to put segue by drag and drop

firstly, open last xcode project about segue in the first tutorial. and then add new viewcontroller. like bellow


connect segue from first viewcontroller to third viewcontroller by dragging first viewcontroller icon and drop it to third viewcontroller, you could use ctrl+click to drag and drop. after you drop, you will face new popup window, choose "show" like bellow 



click on the segue path link like bellow



on the right side bar, you will see some menu, choose the attribute menu. and then you can see identifier option right there. fill the identifier as you want, in this tutorial we put "seguePartII" as the n…