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>
No comments:
Post a Comment