index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="mainScreen">
<div id="bg1" class="bg">
</div>
<div id="bg2" class="bg">
</div>
<div id="airplane"></div>
</div>
<audio hidden="true" autoplay loop>
<source src="img/game_music.mp3" hidden="true">
</audio>
<div id="fenshu">
0分
</div>
</body>
<script type="text/javascript" src="js/sunckBase.js" ></script>
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</html>
tijiao.php
<?php
$fenshu = $_GET['fenshu'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="css/buttons.css">
</head>
<body>
<div id="mainScreen">
<div id="bg1" class="bg">
<div class="box">
<div class="text1">
分数
</div>
<div class="text2">
<?php echo $fenshu; ?>
</div>
<div class="submit">
<a href="paihang.php?fenshu=<?php echo $fenshu;?>" style="color: #000000;" class="button button-primary button-pill button-small">提交</a>
</div>
</div>
</div>
</div>
</body>
</html>
paihang.php
<?php
$fenshu = $_GET['fenshu'];
@mysql_connect("localhost","root","");
mysql_select_db("fenji");
mysql_query("set names utf8");
$sql = "insert into fenshu (fenshu) values($fenshu);";
mysql_query($sql);
$sql = "select *from fenshu";
$res = mysql_query($sql);
$rows = array();
while($row=mysql_fetch_assoc($res)){
$rows[] = $row;
}
//var_dump($rows);
//排序
for($i=0;$i<sizeof($rows);$i++){
//var_dump ($rows[$i]["fenshu"]);
$max = $i;
for($j=$i+1;$j<sizeof($rows);$j++)
{
if($rows[$max]["fenshu"] < $rows[$j]["fenshu"]){
$max = $j;
}
}
$t = $rows[$i]["fenshu"];
$rows[$i]["fenshu"] = $rows[$max]["fenshu"];
$rows[$max]["fenshu"] = $t;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainScreen" style="border:1px solid;overflow:scroll;">
<table class="table table-hover">
<thead>
<tr>
<th>名次</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<?php foreach($rows as $r):?>
<tr>
<td><?php echo $r["id"]; ?></td>
<td><?php echo $r["fenshu"]; ?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</body>
</html>
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<allBullents.length;i++){
for (var j = 0;j<allTanks.length;j++){
var b = allBullents[i];
var t = allTanks[j];
if(pzjcFunc(b,t)){
clearInterval(b.timer);
clearInterval(t.timer);
t_bSoundFun();
fenshu++;
var fenshuHtml = document.getElementById("fenshu");
fenshuHtml.innerHTML = fenshu + "分";
document.getElementById("mainScreen").removeChild(b);
document.getElementById("mainScreen").removeChild(t);
break;
}
}
}
},50);
//死亡检测
var airplane = document.getElementById("airplane");
var pzjcTimer = setInterval(function(){
for (var i = 0;i<allTanks.length;i++){
var t = allTanks[i];
if(pzjcFunc(airplane,t)){
clearInterval(t.timer);
document.getElementById("mainScreen").removeChild(airplane);
document.getElementById("mainScreen").removeChild(t);
if(flag==1){
var bSoundId = document.getElementById("bSound");
document.body.removeChild(bSoundId);
}
overSoundFun();
flag = 0;
var replayTimer = setInterval(function(){
window.location.href = "./tijiao.php?fenshu=" + fenshu;
},2000)
break;
}
}
},50);
//碰撞检测
function pzjcFunc(obj1, obj2){
var obj1Left = obj1.offsetLeft;
var obj1Width = obj1Left + obj1.offsetWidth;
var obj1Top = obj1.offsetTop;
var obj1Height = obj1Top + obj1.offsetHeight;
var obj2Left = obj2.offsetLeft;
var obj2Width = obj2Left + obj2.offsetWidth;
var obj2Top = obj2.offsetTop;
var obj2Height = obj2Top + obj2.offsetHeight;
if ( !(obj1Left > 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;
}
打包文件