Skip to main content

Membuat Game Sederhana Dengan JavaScript

Author
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.

Malang, Malang City, East Java, Indonesia

Popular posts from this blog

The Advantage of Using HTTP Default Authorization Scheme #DigitalSecurity

Author Bill Tanthowi Jauhari
pixabay.com Hello Everyone, This day I would like to introduce you to the default header for authorization in HTTP. HTTP auth scheme is a guide or standardization scheme for the authorization header in the HTTP protocol. this standard is using key Authorization in the header and followed by a value that usually filled by key or token. for example : Authorization : <type> <key/token> this standard is the solution of the key header for authorization that really random was provided by developers to build an authorization header for their application, in my experience, developers used to "token" for their key in the header that usually followed by the hash value. the random key makes developers using more time for writing code for getting header key and validating the value which is you could use the library and focus on writing the logic of your application. Depend on Mozilla site , HTTP auth scheme divided by 4 types, such as : Basic  (see  RF
Read More »

Laravel Tips : Membuat Model, Migration dan Controller dengan Sekali Jalan

Author Bill Tanthowi Jauhari
  php artisan adalah generator laravel yang berfungsi untuk membuat file kodingan dengan mudah, seperti membuat controller, model, seeder, migration dan masih banyak lagi. artisan hanya bisa di lakukan di dalam lingkungan console, seperti cmd dan terminal. berikut akan saya tunjukan cara membuat controller, model, migration menggunakan php artisan. # membuat controller ketikkan perintah di bawah ini php artisan make:controller BlogController # membuat model ketikkan perintah di bawah ini php artisan make:model Blog # membuat migration ketikkan perintah di bawah ini php artisan make:migration blog # membuat seeder ketikkan perintah di bawah ini php artisan make:seeder BlogSeeder # membuat migration, controller, dan model sekaligus ketikkan perintah di bawah ini php artisan make:model -crm Blog perintah di atas akan mengenerate controller dengan nama BlogController dengan keadaan Resource method tertulis, model
Read More »

Typer shark Deluxe free full crack

Author
Typer shark Deluxe : software yang akan membantu kita untuk belajar mengetik keyboard dengan cara 10jari, untuk agan2 yang baru belajar komputer pasti teknik pertama yang dilakukan adalah dengan 11jari (kanan 1 + kiri 1 = 11)hahahaha, softaware ini sangat menarik, karna kita belajar 10jari dengan bermain game.. n gamenya interaktif,,, pkoqnya yang tadinya mengetik 11jari, dalam waktu seminggu pasti bisa lancar 10jari... syaratnya harus tekunn...  kalo agan mau ngunduh silahkan : Download screenshot:
Read More »