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>
<span id="miss">0 Miss</span>
<a id="btnstart" href="javascript://">Play ↓</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");
}
