实现的功能：页面元素有敌机，用户的飞机，子弹，可实现子弹将敌机炸毁，碰撞炸毁等不同的功能
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.map
{
position: relative;
width: 400px;
height: 700px;
border: 1px solid black;
margin: 0 auto;
overflow: hidden;
cursor: none; /*让鼠标坐标消失*/
}
.bgimage{
width: 400px;
height: 700px;
position: absolute;
background: url("./img/12.png") 0 0 no-repeat;
background-size: 400px 700px;
}
span{
color: red;
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
</style>
</head>
<body>
<div class="map">
<span id="fen">得分：</span>
<div class="bgimage"></div>
<div class="bgimage"></div>
</div>
<script>
//获取地图
var Map=document.getElementsByClassName("map")[0]; //注意加分号
var scolltotal=0;
var sc=document.getElementById("fen");
//背景图片变化样式
/* var bgimg=document.getElementsByClassName("bgimage")
bgimg[0].style.top=-700+"px"
bgimg[1].style.top=0+"px"
setInterval(function(){
for(var i=0;i<bgimg.length;i++)
{
var top=parseInt(bgimg[i].style.top);
top++;
if(top>=700)
{
top=-700;
}
bgimg[i].style.top=top+"px";
}
},100)*/
//为了简化代码将定时器封装成函数
(function (){
var bgimg = document.getElementsByClassName("bgimage");
bgimg[0].style.top = -700 + "px";
bgimg[1].style.top = 0 + "px";
setInterval(function ()
{
for (var i = 0; i < bgimg.length; i++)
{
var top = parseInt(bgimg[i].style.top);
top++;
if
最低0.47元/天 解锁文章
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
