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

Laravel Blade : Perbedaan IF dan UNLESS

Author Bill Tanthowi Jauhari
bill.web.id , hello guys, beberapa hari lalu saya bikin module laravel buat summerschool di kampus saya, karna bikin module nggk boleh asal asalan akhirnya saya coba review lagi dokumentasi laravel, pas nyampe bab blade template engine saya mendapati beberapa directive baru salah satunya yaitu unless. directive baru ini sama sama ada di kelas percabangan, menemani if else, nah sekarang pertanyaannya adalah bedanya unless dengan if else apa?. Baca juga : Laravel Library : Chatter Forum Laravel Library oke, jika kalian disini sudah faham tentang apa itu if else, maka unless adalah kebalikan dari if else . contoh : @if(auth::check()) {{ "it will printed when user was loged in" }} @endif note : kalimat di dalam percabangan akan di cetak apabila percabangan bernilai true @unless(auth::check()) {{ "it will printed when user was not loged in" }} @endif note : kalimat di dalam percabangan akan di cetak apabila perca...
Read More »

OpenVPN Alternatif Solusi Menanggulangi Blokir dari KOMINFO

Author Bill Tanthowi Jauhari
Sejak akhir juli 2022 kemaren indonesia di gegerkan dengan tindakan kominfo atas diblokirnya banyak platform digital karna tidak mendaftar PSE, terutama paypal dan plaform game (steam, epic game dll). keputusan ini semakin membuat netizen geram dikarenakan platform judi online malah disetujui untuk beroperasi karna sudah daftar PSE. Jujur menurut saya memang keputusan ini sejak awal saya dengar sudah mengada-ada karna sangat aneh memblokir semua platform digital yang jumlahnya tidak terhitung banyaknya dan hanya membolehkan akses platform yang sudah mendaftar yang jumlahnya hanya ratusan.  saya sebagai developer juga merasa aneh banget ini kebijakan apalagi platform development juga banyak yang di blacklist oleh kominfo seperti, github, gitlab, bitbucket, even website CDN pun di blacklist. astaga wkwkwk. anyway terlepas dari kebijakan konyol ini, saya mau berbagi tips cara agar tetep bisa mengakses semua platform tersebut tanpa ada halangan, yaitu dengan menggunakan VPN. banyak ban...
Read More »

Bug Free Wifi.id 2015

Author
Relate post : Exploit, Wifi.id , Username , Password, Free, Bug, Hacking, Cracking, Not Patch Assalamualaikum Wr Wb, tutorial kali ini tentang bug fitur free wifi.id yang terbaru. wifi.id adalah trobosan baru dari telkom indonesia yang mulai melirik ke dalam dunia cyber atau internet yaitu menyediakan layanan internet hotspot berbayar dan gratis yang di namakan WIFI.ID. tanggapan masyarakat tentang adanya wifi.id pun tidak main-main, mereka langsung menyerbu dan beralih pandangan dari penyewaan warnet ke penggunaan wifi.id, pasalnya kecepatan yang di sajikan oleh wifi.id sangat besar yaitu up to 10MBPS atau kalau di dalam kecepatan download stabil 1MB/Second, bisa lebih . dengan adanya wifi.id masyarakat tidak lagi bingung dimana akan mencari tempat yang bisa download cepet, mereka langsung mengasumsikannya ke wifi.id , tapi ada yang perlu di perhatikan dari penggunaan hotspot ini. apabila anda ingin menggunakan jasa ini, anda harus merogoh kocek dulu untuk dapat browsing atau...
Read More »