豌豆射手效果图,增加了可拖拽功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>豌豆射手</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
height: 100px;
position: absolute;
cursor: pointer;
}
/*div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}*/
p{
width: 30px;
height: 30px;
background: green;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
< img src="img/wan1.jpg" />
</body>
<script type="text/javascript">
var odiv = document.getElementsByTagName("img")[0];
function aa(){
//创建豆子p元素,并添加到body中
var p = document.createElement("p");
document.body.appendChild(p);
//豆子原始左边距=豌豆的左外边距+豌豆射手宽度(高度一样)
p.style.left = odiv.offsetLeft + odiv.offsetWidth +"px";
p.style.top = odiv.offsetTop + p.offsetHeight/2 +"px";
//豆子移动时的左边距
var count = odiv.offsetLeft+odiv.offsetWidth;
var timer1 = setInterval(function(){
count++;
p.style.left=count+"px";
//设置豆子左边距大于1000时消失,不在移动
if (parseInt(p.style.left)>1000) {
document.body.removeChild(p);
// p.style.display="none";
clearInterval(timer1);
}
},1);
}
setInterval(aa,1000);
odiv.onmousedown=function(e){
var evt = e||window.event;
// var xx = evt.clientX-odiv.offsetLeft;
// var yy = evt.clientY-odiv.offsetTop;
var xx= evt.offsetX;
var yy = evt.offsetY;
document.onmousemove=function(e){
var evt = e||window.event;
var x = evt.clientX-xx;
var y =evt.clientY-yy;
odiv.style.left = x+"px";
odiv.style.top = y+"px";
return false;
}
document.onmouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</html>