index.html
tijiao.php
paihang.php
名次
分数
style.css
*{
margin: 0;
padding: 0;
}
/*背景*/
#mainScreen{
width: 512px;
height: 768px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.bg{
width: 512px;
height: 768px;
position: absolute;
background-image: url(../img/bg.jpg);
}
#bg1{
top: 0px;
}
#bg2{
top: -768px;
}
/*飞机*/
#airplane{
width: 109px;
height: 82px;
background-image: url(../img/hero.png);
position: absolute;
left: 200px;
top: 670px;
}
.bullent{
position: absolute;
width: 5px;
height: 10px;
background-image: url(../img/bullet.png);
background-size: 5px 10px;
}
.tank{
position: absolute;
width: 40px;
height: 40px;
background-image: url(../img/enemy.png);
background-size: 40px 40px;
}
#fenshu{
position:absolute;
width: 512px;
height: 50px;
left:10px;
top:10px;
font-size: 50px;
}
/*提交界面样式*/
.box{
position: relative;
width: 350px;
height: 250px;
background: #7E7E7E;
margin: 100px auto;
box-shadow: 5px 5px 10px 0 #7E7E7E;
}
.submit{
position: absolute;
width: 88.8px;
height: 30px;
bottom: 20px;
left: 130px;
color: #000000;
}
.text1{
padding-top: 30px;
font-size: 40px;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
margin: 0 auto;
}
.text2{
padding-top: 1px;
font-size: 40px;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
margin: 0 auto;
}
test.js
var jsBg1 = document.getElementById("bg1");
var jsBg2 = document.getElementById("bg2");
//死亡标志
var flag = 1;
//分数
var fenshu = 0;
var timer = setInterval(function(){
jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
if(jsBg1.offsetTop>=768){
jsBg1.style.top = "-768px";
}
if(jsBg2.offsetTop>=768){
jsBg2.style.top = "-768px";
}
},10)
//添加飞机
var airplane = document.getElementById("airplane");
//给飞机添加鼠标按下事件
airplane.addEventListener("mousedown",function(e){
var ev = e || window.event;
basex = ev.pageX;
basey = ev.pageY;
movex = 0;
movey = 0;
//给主屏幕添加鼠标移动事件
document.getElementById("mainScreen").addEventListener("mousemove",function(e){
var en = e || window.event;
movex = en.pageX - basex;
basex = en.pageX;
movey = en.pageY - basey;
basey = en.pageY;
airplane.style.left = airplane.offsetLeft + movex + "px";
airplane.style.top = airplane.offsetTop + movey + "px";
},false)
})
//发射纸弹
var timerBullent = setInterval(function(){
//创建子弹
var bullent = document.createElement("div");
bullent.className = "bullent";
document.getElementById("mainScreen").appendChild(bullent);
bullent.style.top = airplane.offsetTop -10 + "px";
bullent.style.left = airplane.offsetLeft + 52 + "px";
if(flag == 1){bSoundFun();}
//让子弹飞
var timerBullentFly = setInterval(function(){
bullent.style.top = bullent.offsetTop - 5 + "px";
if(bullent.offsetTop <= -20){
clearInterval(timerBullentFly);
mainScreen.removeChild(bullent);
}
},20)
bullent.timer = timerBullentFly;
},150)
//坦克
var tankTimer = setInterval(function(){
//创建坦克
var tank = document.createElement("div");
tank.className = "tank";
tank.style.top = "0px";
tank.style.left = randomNum(0,472) + "px";
document.getElementById("mainScreen").appendChild(tank);
//坦克下落
var tankFlyTimer = setInterval(function(){
tank.style.top = tank.offsetTop + 5 + "px";
if(tank.offsetTop>=768){
clearInterval(tankFlyTimer);
document.getElementById("mainScreen").removeChild(tank);
}
},20)
tank.timer = tankFlyTimer;
},400);
//子弹和坦克碰撞检测
var allTanks = document.getElementsByClassName("tank");
var allBullents = document.getElementsByClassName("bullent");
var pzjcTimer = setInterval(function(){
for (var i = 0;i obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
return true;
} else {
return false;
}
}
//子弹发射
function bSoundFun(){
var bSound = document.createElement("audio");
bSound.id = "bSound";
bSound.setAttribute("hidden","true");
bSound.setAttribute("autoplay","true");
bSound.setAttribute("loop","false");
var bSource = document.createElement("source");
bSource.setAttribute("src","img/bullet.mp3");
bSource.setAttribute("hidden","true");
bSound.appendChild(bSource);
document.body.appendChild(bSound);
var bSoundTimer = setInterval(function(){
document.body.removeChild(bSound);
clearInterval(bSoundTimer);
},150)
}
//子弹和坦克碰撞
function t_bSoundFun(){
var tbSound = document.createElement("audio");
tbSound.id = "tbSound";
tbSound.setAttribute("hidden","true");
tbSound.setAttribute("autoplay","true");
tbSound.setAttribute("loop","false");
var tbSource = document.createElement("source");
tbSource.setAttribute("src","img/enemy3_down.mp3");
tbSource.setAttribute("hidden","true");
tbSound.appendChild(tbSource);
document.body.appendChild(tbSound);
var bSoundTimer = setInterval(function(){
document.body.removeChild(tbSound);
clearInterval(tbSoundTimer);
},500)
}
//死亡
function overSoundFun(){
var overSound = document.createElement("audio");
overSound.id = "overSound";
overSound.setAttribute("hidden","true");
overSound.setAttribute("autoplay","true");
overSound.setAttribute("loop","false");
var overSource = document.createElement("source");
overSource.setAttribute("src","img/game_over.mp3");
overSource.setAttribute("hidden","true");
overSound.appendChild(overSource);
document.body.appendChild(overSound);
var overSoundTimer = setInterval(function(){
document.body.removeChild(overSound);
clearInterval(overSoundTimer);
},1000)
}
sunckBase.js
//随机数
function randomNum(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//随机颜色
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var colorString = "rgb(" + r + "," + g + "," + b + ")";
return colorString;
}
//获取内部外部样式表中的样式属性的属性值
// obj--- 元素节点
// name----属性名
function getStyle(obj, name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return window.getComputedStyle(obj,null)[name];
}
}
//设置元素样式属性
//obj--元素节点
//name--样式属性名
//value--样式属性值
function setStyle(obj, name, value) {
obj.style[name] = value;
}
//获取宽度
function $w() {
return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}
//获取高度
function $h() {
return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}
img 下载
打包文件
飞机大战坦克 下载