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

Mengapa .env File Laravel Tidak Terupload / Tercommit ke Git

Author Bill Tanthowi Jauhari
.env file atau bisa kita bilang "environment file" atau file yang berisi variable constan untuk memberikan value secara global ke dalam aplikasi kita. file ini berisi variable dan value yang sensitif yang membuatnya sangat riskan atau beresiko apabila di ketahui oleh orang yang tidak bertanggung jawab. contoh  seperti berikut ini file .env di atas memiliki informasi sensitif seperti host, user dan password dari database kita. maka dari itu kita sebagai developer harus pintar-pintar untuk memperlakukan .env file ini, secara default apabila kita upload ke hosting atau vps file .env ini tidak akan bisa di akses secara global dari host kita, karna letak root host kita ada di folder public yang notabene berada di satu level ke atas folder dari posisi .env. jadi user awam tidak akan bisa mengakses dari host kita eg : http://angon.dev/.env . nah kalo ke git gmn? apabila kita menggunakan version controller seperti github, gitlab, bitbucket. secara default git akan mem...
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, m...
Read More »

Langkah-Langkah Membersihkan Virus Shortcut Versi 3.x

Author
  Virus Shortcut adalah virus yang menampakkan dirinya dalam bentuk shortcut, dalam penyebarannya virus ini menggunakan media penyimpanan dan membuat shortcut di dalam penyimpanan tersebut lalu mengaktifkan dirinya dengan cara memanfaatkan kelemahan pengguna untuk meng klik shortcut tersebut. Tujuan dari virus ini sangat sederhana, hanya ingin menyebarkan dirinya ke komputer korban dan membuat komputer korban menjadi sarangnya, tanpa merusak isi atau file dari komputer korban, maka dari itu virus ini di golongkan menjadi virus junk (baca:virus sampah). virus shorcut yang terbaru di tandai dengan hilangnya semua file dan folder kita saat pertama kali membuka media penyimpanan seperti flashdisk dan memory card, tetapi ada satu file yaitu file shortcut yang memiliki nama sesuai nama media penyimpanan kita. apabila kita klik shortcut tersebut maka akan muncul window explorer baru dan file kita akan muncul semua. apabila anda menemui tanda-tanda seperti di atas, maka m...
Read More »