<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#backg{
width: 500px;
height: 500px;
margin: 0 auto;
background: url(img/30ee9722e2c5fd002442b94d20dee4d8_img_0_456398777_3541682797_26.jpg);
background-size: 500px 772px;
background-position: center center;
}
#cxk{
background: skyblue;
background-position: -66px -102px;
height: 25px;
width: 25px;
position: absolute;
z-index: 2;
}
#score{
font-size: 40px;
}
</style>
</head>
<body>
<div id="backg">
<span id="score">
0
</span>
</div>
<div id="cxk">
</div>
</body>
<script type="text/javascript">
var cxk=document.querySelector("#cxk")
var backg=document.querySelector("#backg")
var scoreInner=document.querySelector("#score")
var score=0
var fire
document.οnmοusemοve=function(e){
if(e.pageX>backg.offsetLeft+cxk.offsetWidth/2 &&
e.pageX<backg.offsetLeft+backg.offsetWidth-cxk.offsetWidth/2
&& e.pageY>backg.offsetTop+cxk.offsetWidth/2 &&
e.pageY<backg.offsetHeight-cxk.offsetWidth/2){
cxk.style.left=e.pageX-cxk.offsetWidth/2+"px"
cxk.style.top=e.pageY-cxk.offsetHeight/2+"px"
fire=true
}
else fire=false
}
setInterval(function(){
bullet()
},300)
var bulletArray=[]
var index=0
function bullet(){
if(fire){
var bul={}
var flag=index
var bullet=document.createElement("div")
bullet.id="b"+index
bul.id="b"+index
bullet.style.width=6+"px"
bul.width=6
bullet.style.height=14+"px"
bul.height=14
bullet.style.background="black"
bullet.style.position="absolute"
bullet.style.top=cxk.offsetTop+"px"
bul.top=cxk.offsetTop
bullet.style.left=cxk.offsetLeft+cxk.offsetWidth/2+"px"
bul.left=cxk.offsetLeft+cxk.offsetWidth/2
bulletArray.push(bul)
index++
document.body.appendChild(bullet)
var id2=setInterval(function(){
var speed=-10
bullet.style.top=bullet.offsetTop+speed+"px"
bulletArray[flag].top=bullet.offsetTop+speed
if(bullet.offsetTop<0)
{
bullet.remove()
clearInterval(id2)
}
},100)
}
}
setInterval(function(){
enemy()
},300)
function enemy(){
if(fire){
var enemy=document.createElement("div")
enemy.style.width=40+"px"
enemy.style.height=40+"px"
enemy.style.background="red"
enemy.style.position="absolute"
enemy.style.top=0
var begin=backg.offsetLeft
var end=backg.offsetWidth+begin
var enemyBegin=Math.random()*(end-begin)+begin
enemy.style.left=enemyBegin+"px"
document.body.appendChild(enemy)
var id2=setInterval(function(){
var speed=10
enemy.style.top=enemy.offsetTop+speed+"px"
for(var i=0;i<bulletArray.length;i++){
if(bulletArray[i].left>enemy.offsetLeft &&
bulletArray[i].left<enemy.offsetLeft+enemy.offsetWidth &&
bulletArray[i].top>enemy.offsetTop &&
bulletArray[i].top<enemy.offsetTop+enemy.offsetHeight)
{
score++
scoreInner.innerHTML=score
document.getElementById(bulletArray[i].id).remove()
enemy.remove()
}
}
if(enemy.offsetTop>backg.offsetHeight)
{
enemy.remove()
clearInterval(id2)
}
},100)
}
}
</script>
</html>
附上背景图
