Dalam permainan ini anda di tugaskan untuk mengarahkan logo [bendera merah putih] ke tempat yang aman dari kejaran musuh, namun semakin lama musuh yang keluar akan semakin banyak :D , permainan ini sengaja buat untuk test keepatan dan kecermatan saja :D gak ada maksud lain.
berikut screenshot nya:
Silahkan anda coba saja permainan yang simple ini :) klik link ini [dani project]
Apabila anda ingin membuat permainan semacam ini saya berikan script untuk membuat sendiri permainan nya :D.
Script;
<html>
<head>
<title>DANI PROJECT - JS GAME</title>
<!--
dani project v.01 beta
-->
<style type="text/css">
*{
font-size:10px;
font-family: Tahoma, Verdana, Arial;
}
body{
background:#fff;
overflow:hidden;
color:#fff;
padding:8px;
}
#jagoan{
position:absolute;
top:0px;
left:0px;
height:50px;
width:50px;
background: url(http://daniproject.co.de/indonesia_flag.gif) no-repeat;
border-radius:25px;
box-shadow:0px 0px 10px #fff;
display:none;
}
.musuh{
background:
url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_anima
tion_by_dutchie17.gif) no-repeat;
height:45px;
width:45px;
position:absolute;
top:0px;
left:800px;
}
#area{
width:100%;
height:100%;
background:#080808;
border:1px solid #666;
}
#debug{
position:absolute;
bottom:0px;
width:100%;
height:10%;
padding:10px;
}
#crash, #time{
font-size:37px;
color:#08f;
padding:0 13px;
float:right;
}
#scorebox{
position:absolute;
background:#080808;
width:60%;
color:#08f;
padding:10px 20px;
border-radius:30px;
border:1px solid #444;
text-align:center;
}
#scorebox p{
font-size:37px;
margin:0 0 18px 0;
padding:0;
}
.restart{
background:#111;
padding:8px 18px;
font-size:15px;
border-radius:10px;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>
<script type="text/javascript">
musuhx = new Array();
musuhy = new Array();
jagoanx = 0;
jagoany = 0;
jarakx = new Array();
jaraky = new Array();
a = new Array();
b = new Array();
batas_kiri = 0;
batas_kanan = 0;
batas_atas = 0;
batas_bawah = 0;
max_musuh = 100;
xd = new Array();
yd = new Array();
animtimer = new Array();
max_crash = 3;
crash = max_crash;
hit = new Array();
i = 0;
time = 0;
ticktimer = 0;
area_width = 0;
area_height = 0;
$(document).ready(function(){
$(window).resize(function() {
area_width = parseInt($('#area').width());
area_height = parseInt($('#area').height());
var pos = $('#area').position();
batas_kiri = pos.left + 8;
batas_atas = pos.top + 8;
batas_kanan = batas_kiri + area_width - 16 - 30;
batas_bawah = batas_atas + area_height - 8 - 30;
});
$(document).bind("mousemove", function(e){
jagoanx = e.pageX;
jagoany = e.pageY;
$('#jagoan').css({
left : jagoanx - 25,
top: jagoany - 25
});
});
init();
});
function init(){
i = 0;
time = 0;
crash = max_crash;
$('#crash').html(crash);
$('#jagoan').css('display', 'block');
area_width = parseInt($('#area').width());
area_height = parseInt($('#area').height());
var pos = $('#area').position();
batas_kiri = pos.left + 8;
batas_atas = pos.top + 8;
batas_kanan = batas_kiri + area_width - 16 - 30;
batas_bawah = batas_atas + area_height - 8 - 30;
auto_create();
ticktimer = setInterval('tick()',1000);
}
function auto_create(){
if(i<max_musuh){
create_enemy(i++);
setTimeout("auto_create()", 3000);
}
}
function tick(){
time++;
var score = Math.floor((i * time /
($(document).height()*$(document).width()))*100000);
$('#time').html(score);
}
function create_enemy(i){
musuhx[i] = jagoanx + Math.floor(Math.random()*area_width) + 100;
musuhy[i] = jagoany + Math.floor(Math.random()*area_height) + 100;
jarakx[i] = Math.floor(Math.random()*55);
jaraky[i] = Math.floor(Math.random()*55);
a[i] = jarakx[i];
b[i] = jaraky[i];
xd[i] = "kiri";
yd[i] = "bawah";
animtimer[i] = 0;
hit[i] = false;
$('#area').append("<div class=\"musuh musuh" + i +"\"></div>");
animasi('.musuh'+i,i);
}
function animasi(what, index){
musuhx[index] = musuhx[index] + a[index];
musuhy[index] = musuhy[index] + b[index];
var kena = '';
var selisihx = Math.abs((musuhx[index]) - (jagoanx-25));
var selisihy = Math.abs((musuhy[index]) - (jagoany-25));
if(!hit[index]){
if((selisihx < 45) && (selisihy < 45)){
hit[index] = true;
kena = ' [ KENA ]';
$(what).css({'background-image':
'url(http://bestanimations.com/Military/Explosions/Explode-04-june.gif)',
'height':'75',
'width':'100'
});
$(what).fadeOut('slow', function(){
$(what).css({'background-image':
'url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_anim
ation_by_dutchie17.gif)',
'height':'45',
'width':'45',
});
musuhx[index] = jagoanx + Math.floor(Math.random()*area_width);
musuhy[index] = jagoany + Math.floor(Math.random()*area_height);
gerak(what, musuhx[index], musuhy[index]);
crash--;
$('#crash').html(crash);
$(what).fadeIn('slow');
hit[index] = false;
});
}
}
if(crash <= 0){
for(z=0;z<=animtimer.length;z++){
clearTimeout(animtimer[z]);
}
clearInterval(ticktimer);
showscore();
i = max_musuh;
}
else{
animtimer[index] = setTimeout("animasi(\'"+what+"\',"+index+")",100);
}
gerak(what, musuhx[index], musuhy[index]);
var debug_text = '';
debug_text += 'Time = ' + time + ' Enemies = ' + i + '<br>';
debug_text += 'X = ' + jagoanx + ' Y = ' + jagoany;
debug_text += '<br>Left = ' + batas_kiri + ' Top = ' + batas_atas + '
Right = ' + batas_kanan + ' Bottom = ' + batas_bawah;
debug(debug_text);
if(xd[index]=="kiri"){
a[index] = -jarakx[index];
if(musuhx[index]<batas_kiri){
xd[index] = "kanan";
}
}
else if(xd[index]!="kiri"){
a[index] = jarakx[index];
if(musuhx[index]>batas_kanan){
xd[index] = "kiri";
}
}
if(yd[index]=="bawah"){
b[index] = jaraky[index];
if(musuhy[index]>batas_bawah){
yd[index] = "atas";
}
}
else if(yd[index]!="bawah"){
b[index] = -jaraky[index];
if(musuhy[index]<batas_atas){
yd[index] = "bawah";
}
}
}
function restart(){
init();
$('.musuh').remove();
$('#scorebox').remove();
}
function showscore(){
var score = parseInt($('#time').html());
var scorebox = '<div id=\"scorebox\">';
scorebox += '<p>Your score : ' + score + '</p>';
scorebox += '<p><span class=\"restart\"
onclick=\"restart();\">Restart</span></p>';
scorebox += '</div>';
$('#area').append(scorebox);
var posx = (($('#area').width()-$('#scorebox').width())/2)+8;
var posy = (($('#area').height()-$('#scorebox').height())/2)+8;
$('#scorebox').css({
'left': posx,
'top': posy
});
}
function gerak(siapa, x, y){
$(siapa).css({
left: x,
top: y
});
}
function debug(str){
$('#stat').html(str + '<br />');
}
</script>
</head>
<body>
<div id="area"><div id="time">0</div><div id="crash">0</div>
<div id="jagoan"></div>
</div>
<div id="debug">
<table style="width:100%;"><tbody>
<tr>
<td><div id="stat"></div></td>
</tr>
</tbody></table>
</div>
</body>
</html>
Judul: Membuat Permainan Sederhana Dengan Script JQuery
Rating: 100% based on 84843 ratings. 5 user reviews.
Ditulis Oleh Sabo Tase™
Rating: 100% based on 84843 ratings. 5 user reviews.
Ditulis Oleh Sabo Tase™
Terima Kasih Anda sudah membaca artikel "Membuat Permainan Sederhana Dengan Script JQuery" yang di terbitkan pada hari Selasa, 20 Maret 2012 jam 12.04 dan diulas oleh Sabo Tase™. Anda berhak menyebarluaskan artikel Membuat Permainan Sederhana Dengan Script JQuery ini, tetapi mohon sertakan link sumber dari blog ini. Semoga saja dengan adanya artikel tentang Membuat Permainan Sederhana Dengan Script JQuery yang ada di Blog Bisnis Online JoMeluMelu ini bisa berguna bagi Anda khususnya Saya pribadi.
Label: Source Code, Tutorial
Tidak ada komentar:
Posting Komentar