<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var start = 0;
$(function(){
$(window).keydown(function(e){
if(e.keyCode == 32){
$("span").hide();
}
}).keyup(function(e){
if(e.keyCode == 32){
if(start == 0){
start = 1;
}
if(start == 1){
setInterval(function(){
$("div").shoot();
},50);
start = 2;
}
}
});
});
var flg = "left";
$.fn.shoot = function(){
if(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) <= 180 && parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) >= 0 && flg == "left"){
$(this).css({
top:(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) + 5) + "px",
left:(parseInt($(this).css("left").replace(/^(.+)px$/, "$1")) + 10) + "px"
});
if(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) == 180){
flg = "right";
}
}
if(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) <= 180 && parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) >= 0 && flg == "right"){
$(this).css({
top:(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) - 5) + "px",
left:(parseInt($(this).css("left").replace(/^(.+)px$/, "$1")) - 10) + "px"
});
if(parseInt($(this).css("top").replace(/^(.+)px$/, "$1")) == 0){
flg = "left";
}
}
}
</script>
<style>
*{
margin:0;
padding:0;
}
section{
width:400px;
height:200px;
background-color:#CCCCCC;
}
div{
width:20px;
height:20px;
border-radius:10px;
background-color:#000000;
position:absolute;
top:0;
left:0;
}
span{
position:absolute;
top:0;
left:0;
display:block;
width:400px;
height:200px;
opacity:0.5;
background-color:#000000;
line-height:200px;
text-align:center;
color:#FFFFFF;
font-size:48px;
font-weight:bold;
}
</style>
</head>
<body>
<section>
<div></div>
</section>
<span>PRESS SPACE!</span>
<p>
※半角で入力
</p>
</body>
</html>