Lập trình game đơn giản html5 – game đập chuột

<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
<style>
body{width:100%;height:100%;overflow:hidden;}
.mole {
background-color: rgb(128,64,0);
boder-radius:100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image:url(mole.bmp);
background-size:100%;
background-repeat: no-repeat;
background-position: 0px 25px;
}
.left-ear {
background-color: rgb(128,64,0);
border-radius:100px;
position:absolute;
float:left;
min-width:30%;
z-index:-1;
}
.right-ear {
background-color:rgb(128,64,0);
border-radius:100px;
position:absolute;
float:right;
min-width: 30%;
left:70%;
z-index:-1;
}
#mole1{left:10%;}
#mole2{left:45%;}
#mole3{left:90%;}
</style>

jQuery(document).ready(function(){

var add = 0;

function game_over(){
jQuery(‘.mole’).animate({‘top’:’100%’}, 300);
jQuery(‘.score’).html(‘GAME OVER’);
jQuery(‘.score’).append(‘

TRY AGAIN

‘);
}

function start(){
add = 0;
jQuery(‘.score’).html(‘Score:’ + add);
jQuery(‘.mole’).animate({‘top’:’0%’}, 5000, function(){
game_over();
jQuery(‘.try_again’).click(function(){start();});
});
}

jQuery(‘.mole’).hover(function(){
jQuery(this).css(‘background-image’,’url(hrt.bmp)’);
jQuery(this).stop().animate({‘top’:’100%’},300,function(){
add = add – (-1);
jQuery(‘.score’).html(‘Score:’+ add);
jQuery(this).css(‘background-image’,’url(mole.bmp)’);
jQuery(this).animate({‘top’:’0%’},5000);
});
});

start();

});

</head>
<body>

Score: 0

</div>

</div>

</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s