![[OFF]](/assets/images/off.gif)
Hôm nay xài chán rồi nên share ae game chơi cho đỡ buồn!
Demo : http://3x4rum.gowap.lt/main.ph ... 44310
//---------------html------------\\
<!DOCTYPE html>
<html>
<head>
<script>window.onload=function(){
var hue = 0;
var death = true;
var top = Math.round((window.innerHeight/2) - 12.5);
var game;
var score = 0;
var highest = 0;
// Color Change
setInterval(function(){
++hue
$("#ball, #new, .bar").css({
"background" : "hsl(" + hue + ", 100%, 50%)"
});
$("#score").css({
"color" : "hsl(" + hue + ", 100%, 50%)"
})
}, 50);
function end(){
clearInterval(game);
top = Math.round((window.innerHeight/2) - 12.5);
death = true;
$("#new").text("NEW GAME");
$("#new").show();
if(score > highest){
highest = Math.round(score);
}
score = 0;
}
window.start = function(){
death = false;
$("#ball").css("top", Math.round((window.innerHeight/2) - 12.5));
$("#ball").animate({
"top" : window.innerHeight - 25
}, 1500, "linear", function(){
end();
});
game = setInterval(function(){
if(top >= Math.round(window.innerHeight - 25)){
end();
}
else{}
}, 10);
}
/** Events **/
$("#new").on("click touchstart", function(e){
$(this).hide();
start();
});
$(document).on("touchstart click", function(e){
e.preventDefault();
if(death === false){
var h = $("#ball").css("top");
h = parseInt(h);
h -= Math.floor(Math.random() * 60) + 25;
score += 5;
$("#score").html("Current: "+ Math.floor(score) / 100 + "<br />Personal Best: " + Math.floor(highest) / 100);
$("#ball").stop();
$("#ball").animate({
top : h + "px"
}, 100, "linear", function(){
$("#ball").animate({
"top" : window.innerHeight - 25
}, 1000, "linear", function(){
end();
});
});
if(h >= 0){
// within boundaries
}
else{
end();
}
} else {}
});
};
alert("Ban quyen 3x4rum wapego")</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<title>Ball</title>
</head>
<body>
<div id="score"></div>
<div id="ball"></div>
<div class="bar"></div>
<div class="bar" id="bottom"></div>
<button id="new">START</button>
</body>
</html>
//-------------css------------\\
body {
margin: 0;
background: #222;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#ball {
height: 25px;
width: 25px;
border-radius: 25%;
position: fixed;
left: calc(50% - 12.5px);
top: calc(50% - 12.5px);
animation-name: spin;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#new {
width: 30vw;
height: 60px;
position: fixed;
left: 35vw;
top: calc(50% - 25px);
border: solid 3px rgba(0, 0, 0, .3);
color: #FFF;
font-size: 15pt;
font-weight: bold;
}
#score {
font-size: 15pt;
font-weight: bold;
position: fixed;
left: 5px;
top: 5px;
}
.bar {
height: 3px;
width: 100vw;
position: fixed;
left: 0;
top: 0;
}
#bottom {
top: calc(100% - 3px);
}
//----xong----\\
Ok rồi em xin dừng pút tại đây
![[IMAGE]](http://i.imgur.com/Syv4rqL.png)
