Home » » JQuery Game Sederhana Shooting

JQuery Game Sederhana Shooting


Saya terus melakukan percobaan kecil dengan efek query jquery, kali ini saya menggunakannya untuk membuat game shooting sangat sederhana, aturan ini sangat mudah hanya menembak karakter musuh.


HTML berisi 3 elemen div utama, tombol dan stat, permainan karton utama dan menyelesaikan permainan kotak pesan yang akan muncul ketika menyelesaikan permainan.


Div untuk tombol & stat

Ini akan menunjukkan berapa kali pengguna menembak karakter buruk dan baik, dan bermain tombol untuk mulai memainkan permainan.


<div id="stat">
<span id="hit">0 Hit</span>
&nbsp;
<span id="miss">0 Miss</span>
&nbsp;
<a id="btnstart" href="javascript://">Play &darr;</a>
</div>



Div untuk permainan utama

Dalam permainan ini saya menyediakan tiga karakter buruk yang berbeda dan satu karakter yang baik.


<div id="container">
<div id="char1" class="character enemy1"></div>
<div id="char2" class="character enemy2"></div>
<div id="char3" class="character enemy3"></div>
<div id="char4" class="character ally"></div>
</div>


Div untuk pesan terakhir

Default elemen ini untuk menyembunyikan, hanya terbuka ketika menyelesaikan permainan.


<div id="message">
Thank you for playing, press "Play" to start again.
</div>



The JQuery

Logika di balik permainan ini cukup sederhana ketika permainan mulai semua karakter yang tersembunyi, dan pindah ke posisi acak di dalam wadah, dan dari semua karakter acak memilih satu karakter akan ditampilkan.

Ketika tombol diklik mulai bermain permainan akan bermain untuk 30 detik, dengan reseting semua stat ke nilai default, menembak pada karakter musuh, efek meledak dipicu, jika menembak pada karakter sekutu efek bouncing horizontal dipicu, semua efek ini menggunakan efek jquery.


var miss = 0;
var hit = 0;

$(document).ready(function() {

var play;

$("#btnstart").click(function(){
startplay();
});

function startplay() {
$("#message").fadeOut('slow');
$(".character").fadeOut('slow');
$("#miss").html("0 Miss");
$("#hit").html("0 Hit");
miss = 0;
hit = 0;
$("#btnstart").css("color", "#e3e3e3");
$("#btnstart").unbind("click");
play = setInterval(scramble, 1800);
setTimeout(function() {
clearInterval(play);
$("#btnstart").css("color", "#333333");
$("#btnstart").bind("click", startplay);

// show the final message
var containerPos = $('#container').offset();
$("#message").animate({
top: containerPos.top,
left: containerPos.left
}, 'fast', function() {
setTimeout(function() {
$("#message").fadeIn('slow');
$(".character").fadeIn('slow');
}, 500);
});
}, 30000);
}

$(".character").click(function() {
if ($(this).hasClass("ally")) {
$(this).effect("bounce", {
times: 2,
direction: 'left'
}, 300);
$(this).slideUp("fast");
miss++;
$("#miss").html(miss + " Miss");
} else {
$(this).effect("explode", 500);
hit++;
$("#hit").html(hit + " Hit");
}
});
});

function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
var children = $('#container').children();

var randomId = randomFromTo(1, children.length);
moveRandom('char'+randomId);
setTimeout(function(){
$("#char"+randomId).slideDown('fast');
}, 500);

setTimeout(function() {
$("#char"+randomId).slideUp('fast');
}, 1500);
}

function moveRandom(id) {
/* get container position and size
* -- access method : cPos.top and cPos.left */
var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();

// get box padding (assume all padding have same value)
var pad = parseInt($('#container').css('padding-top').replace('px', ''));

// get movable box size
var bHeight = $('#'+id).height();
var bWidth = $('#'+id).width();

// set maximum position
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;

// set minimum position
minY = cPos.top + pad;
minX = cPos.left + pad;

// set new position
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);

$('#'+id).animate({
top: newY,
left: newX
}, 'slow', function() {
});
}



CSS

Dan ini adalah kode CSS, aku menggunakan pola untuk latar belakang, ada empat latar belakang yang berbeda digunakan untuk menggambarkan karakter, dan pointer mouse kustom bila bertujuan target, tetapi tidak bekerja pada IE dan Opera.



body {
cursor: url('img/target.gif');
background: #ffffff url("img/trentanove.gif") repeat top right;
}
#container {
background: #ffffff url("img/trentaquattro.gif") repeat top right;
margin: 0 auto;
border: 5px solid #999999;
width: 600px;
height: 350px;
padding: 20px 50px;
cursor: url("img/target.gif"), pointer;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}

#message {
background: #999999;
margin: 0 auto;
border: 5px solid #999999;
width: 600px;
height: 350px;
padding: 20px 50px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
position: absolute;
opacity: 0.8;
filter:alpha(opacity=80);
text-align: center;
font-size: 28px;
color: #000000;
display: none;
}

.character {
border: 2px solid #f3f3f3;
width: 95px;
height: 95px;
position: absolute;
display: none;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
cursor: url('img/target.gif'), pointer;
}
.character:hover {
opacity: 0.6;
filter:alpha(opacity=60);
}
.enemy1 {
background: url("img/enemy1.jpg");
}
.enemy2 {
background: url("img/enemy2.jpg");
}
.enemy3 {
background: url("img/enemy3.jpg");
}

.ally {
background: url("img/ally.jpg");
}
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

6 Juni 2011 08.21

Keren..Keren..
Hebat Boz LOra..!!
ͼ⎝⋗⍜⋖⎠ͽ

Terimakasih MaPhia BlacK atas Komentarnya di JQuery Game Sederhana Shooting

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger