打飞机小游戏
发布时间
阅读量：
阅读量
<!DOCTYPE html>
<html onselectstart="return false">
<head>
<meta charset="UTF-8" />
<meta name="Anthor" content="苏苏少年" />
<title>Title</title>
<style>
*{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
li{ list-style-type: none;}
body{
overflow: hidden;
user-select: none;
}
#box{
position: relative;
width: 512px;
height: 768px;
margin: 20px auto;
}
#map{
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("img/bg_1.jpg");
}
#level{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#level h1{
font-size: 40px;
padding-top: 60px;
padding-bottom: 150px;
line-height: 60px;
text-align: center;
color: #fff;
}
#level p{
margin: 30px auto;
width: 200px;
height: 35px;
line-height: 35px;
text-align: center;
background: #fff;
font-weight: bolder;
cursor: pointer;
}
#level p:hover{
background: pink;
color: #fff;
}
#map .plane,#map .biu,#map .enemy,#map .boom,#map .boom2{
position: absolute;
}
#map .plane{
z-index: 8;
}
#map .biu{
z-index: 10;
}
#map .boom2{
z-index: 11;
animation: bling 2s 1;
animation-fill-mode: forwards;
}
#map .enemy{
z-index: 9;
}
#map .boom{
z-index: 7;
animation: fade .8s 1;
animation-fill-mode: forwards;
}
@keyframes fade {
from{ opacity: 1; }
to{ opacity: 0; }
}
@keyframes bling {
0%{ opacity: 1; }
20%{ opacity: 0; }
40%{opacity: 1; }
60%{opacity: 0;}
80%{opacity: 1; }
100%{opacity: 0;}
}
#score{
display: none;
position: absolute;
top:10px;
left:10px;
color: #fff;
line-height: 20px;
font-size: 14px;
font-weight: bold;
z-index:20;
}
#restart{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:30;
}
#restart p{
width: 300px;
height: 40px;
line-height: 20px;
margin: 140px auto;
color: #fff;
}
#restart p span{
display: block;
font-weight : bolder;
font-size: 22px;
text-align: center;
}
#restart .p1 span{
color: red;
}
#restart .p2 span{
color: #ffa80c;
}
#restart .p3{
font-family: "楷体";
font-size: 20px;
width: 100px;
height: 35px;
background: rgb(255,255,255);
background: rgba(255,255,255,.8);
color: #000;
font-weight: bolder;
line-height: 35px;
text-align: center;
border-radius: 3px;
cursor: pointer;
}
#restart .p3:hover{
background: white;
}
</style>
</head>
<body>
<div id="box">
<div id="level">
<h1>打飞机v1.0</h1>
<p>简单</p>
<p>中等</p>
<p>困难</p>
<p style="color: #f00">WM附体</p>
</div>
<div id="map">
<div id="BiuAll"></div>
</div>
<div id="score">0</div>
<div id="restart">
<p class="p1">您的最终得分是：<span>0</span></p>
<p class="p2">获得称号：<span>抠脚侠</span></p>
<p class="p3">重新开始</p>
</div>
</div>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {return setTimeout(fn,1000/60)};
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
//全局变量
var oBox = document.getElementById("box"),
oScore = document.getElementById("score"),
oRe = document.getElementById("restart"),
oLevel = document.getElementById("level"),
oMap = document.getElementById("map"),
oBiuAll = document.getElementById("BiuAll"),
allBiu = oBiuAll.children,
allReChild = oRe.children,
boxOffsetTop = oBox.offsetTop,
boxOffsetLeft = oBox.offsetLeft;
//启动
exe();
//初始选择难度界面的点击事件
function exe(){
//难度选择
var aP = oLevel.getElementsByTagName("p");
for (var i = 0,length=aP.length; i < length; i++) {
(function(i){
aP[i].onclick = function (e) {
e = e || window.event;
startGame(i , {
x : e.clientX - boxOffsetLeft,
y : e.clientY - boxOffsetTop
});//第一个实参为序号 ，第二个实参为存储着鼠标距离map边缘距离的json
}
})(i);
}
//restart按钮
allReChild[2].onclick = function (ev) {
cancelAnimationFrame(oMap.bgTimer);//停止背景滚动
oRe.style.display = "none";
oLevel.style.display = "block";
oScore.innerHTML = 0;
oMap.innerHTML = "<div id='BiuAll'></div>";
oBiuAll = document.getElementById("BiuAll");
allBiu = oBiuAll.children;
};
}
//开始游戏
function startGame(level , pos){
clearMap(); //执行 隐藏和清理
MapBg(level); //执行 Map背景相关操作
var p = plane(level , pos); //执行 创建我军
enemy(level , p); //执行 创建敌军
//enemy(level , plane(level , pos));
oBox.score = 0;//得分清零
}
//隐藏和清理
function clearMap(){
oScore.style.display = "block";
oLevel.style.display = "none";//隐藏关卡选择框
}
//Map背景选择与运动
function MapBg(level) {
oMap.style.backgroundImage = "url('img/bg_"+(level+1)+".jpg')";
(function m(){
oMap.bgPosY = oMap.bgPosY || 0;
oMap.bgPosY ++;
oMap.style.backgroundPositionY = oMap.bgPosY + 'px';
oMap.bgTimer = requestAnimationFrame(m);
})();
}
//创建我军
function plane(level , pos) {
//创建我军图片
var oImg = new Image();//document.createElement("img");
oImg.src = "img/plane_0.png";
oImg.width = 70;
oImg.height = 70;
oImg.className = "plane";
oImg.style.left = pos.x - oImg.width/2 + 'px';
oImg.style.top = pos.y - oImg.height/2 + 'px';
oMap.appendChild(oImg);
//边界值
var leftMin = -oImg.width/2,
leftMax = oMap.clientWidth - oImg.width/2,
topMin = 0,
topMax = oMap.clientHeight - oImg.height/2;
//加入mousemove事件
document.onmousemove = function (ev) {
ev = ev || window.event;
//获取飞机实时坐标，并限制边界值
var left = ev.clientX - boxOffsetLeft - oImg.width/2;
var top = ev.clientY - boxOffsetTop - oImg.height/2;
left = Math.max(leftMin,left);
left = Math.min(leftMax,left);
top = Math.max(topMin,top);
top = Math.min(topMax,top);
//赋值
oImg.style.left = left + 'px';
oImg.style.top = top + 'px';
};
//调用子弹函数
fire(oImg,level);
return oImg;
}
//我军子弹
function fire(oImg , level){
oBox.biuInterval = setInterval(function () {
if ( oBox.score >= 500 ){
createBiu(true , -1);
createBiu(true , 1);
}else{
createBiu();
}
} , [100 , 200 , 200 , 15][level]);
function createBiu(index , d){
//创建子弹
var oBiu = new Image();
oBiu.src = "img/fire.png";
oBiu.width = 30;
oBiu.height = 30;
oBiu.className = "biu";
var left = oImg.offsetLeft + oImg.width/2 - oBiu.width/2;
var top = oImg.offsetTop - oBiu.height + 5;
if ( index ){
left += oBiu.width*d
}
oBiu.style.left = left + "px";
oBiu.style.top = top + 'px';
oBiuAll.appendChild(oBiu);
//子弹运动
function m() {
if ( oBiu.parentNode ){
var top = oBiu.offsetTop - 20;
if ( top < -oBiu.height ){
oBiuAll.removeChild(oBiu);
}else{
oBiu.style.top = top + 'px';
requestAnimationFrame(m);
}
}
}
//将运动执行队列放后面，不然子弹会直接初始就在 top-50 的位置
setTimeout(function(){
requestAnimationFrame(m);
},50);
}
}
//创建敌军
function enemy(level , oPlane) {
var w = oMap.clientWidth,
h = oMap.clientHeight;
var speed = [5,6,8,8][level]; //敌军下落速度
var num = 1;
oBox.enemyIntetval = setInterval(function () {
var index = num%30?1:0;
//生成敌军
var oEnemy = new Image();
oEnemy.index = index;
oEnemy.HP = [20,1][index];
oEnemy.speed = speed + (Math.random()*0.6 - 0.3)*speed;
oEnemy.speed *= index?1:0.5;
oEnemy.src = "img/enemy_"+["big","small"][index]+".png";
oEnemy.className = "enemy";
oEnemy.width = [104,54][index];
oEnemy.height = [80,40][index];
oEnemy.style.left = Math.random()*w - oEnemy.width/2 + 'px';
oEnemy.style.top = -oEnemy.height + 'px';
oMap.appendChild(oEnemy);
num ++;
//敌军运动
function m(){
if ( oEnemy.parentNode ){
var top = oEnemy.offsetTop;
top += oEnemy.speed;
if ( top >= h ){
oBox.score --; //漏掉飞机减分
oScore.innerHTML = oBox.score;
oMap.removeChild(oEnemy);
}else{
oEnemy.style.top = top + 'px';
//子弹碰撞检测
for (var i = allBiu.length - 1 ; i >= 0; i--) {
var objBiu = allBiu[i];
if ( coll(oEnemy , objBiu) ){
oBiuAll.removeChild(objBiu);//移除子弹
oEnemy.HP --;
if ( !oEnemy.HP ){
oBox.score += oEnemy.index?2:20; //打掉飞机加分
oScore.innerHTML = oBox.score;
boom(oEnemy.offsetLeft,oEnemy.offsetTop,oEnemy.width,oEnemy.height,index?0:2);//敌军爆炸图
oMap.removeChild(oEnemy);//移除敌军
return;
}
}
}
//我军碰撞检测
if ( oPlane.parentNode && coll(oEnemy,oPlane) ){
boom(oEnemy.offsetLeft,oEnemy.offsetTop,oEnemy.width,oEnemy.height,index?0:2);//敌军爆炸图
boom(oPlane.offsetLeft,oPlane.offsetTop,oPlane.width,oPlane.height,1);//我军爆炸图
oMap.removeChild(oEnemy);//移除敌军
oMap.removeChild(oPlane);//移除我军
GameOver();
return;
}
requestAnimationFrame(m);
}
}
}
requestAnimationFrame(m);
},[350,150,120,40][level]);
}
//爆炸函数
function boom(l,t,w,h,i){
var oBoom = new Image();
oBoom.src = "img/"+["boom_small","plane_0","boom_big"][i]+".png";
oBoom.className = 'boom'+["","2",""][i];
oBoom.width = w;
oBoom.height = h;
oBoom.style.left = l + "px";
oBoom.style.top = t + 'px';
oMap.appendChild(oBoom);
setTimeout(function(){
oBoom.parentNode && oMap.removeChild(oBoom);
},[1200,2500,1200][i]);
}
//两个物体 碰撞检测
function coll( obj1 , obj2 ){
var T1 = obj1.offsetTop,
B1 = T1+obj1.clientHeight,
L1 = obj1.offsetLeft,
R1 = L1+obj1.clientWidth;
var T2 = obj2.offsetTop,
B2 = T2+obj2.clientHeight,
L2 = obj2.offsetLeft,
R2 = L2+obj2.clientWidth;
return !( B1 < T2 || R1 < L2 || T1 > B2 || L1 > R2 );
}
//游戏结束
function GameOver(){
document.onmousemove = null; //清除移动事件
clearInterval(oBox.biuInterval);//不再产生新子弹
clearInterval(oBox.enemyIntetval);//不再产生新敌军
restart();
}
//结算+重新开始
function restart(){
oScore.style.display = "none";
var s = oBox.score;
var honor;
if ( s < -300 ){
honor = "闪避+MAX！！！";
}else if ( s < 10 ){
honor = "菜得…算了我不想说了…";
}else if ( s < 30 ){
honor = "抠脚侠！";
}else if ( s < 100 ){
honor = "初级飞机大师";
}else if ( s < 200 ){
honor = "渐入佳境";
}else if ( s < 500 ){
honor = "中级飞机大师";
}else if ( s < 1000 ){
honor = "高级飞机大师";
}else if ( s < 5000 ){
honor = "终极飞机大师";
}else{
honor = "孤独求败！";
}
oRe.style.display = "block";
allReChild[0].children[0].innerHTML = s;
allReChild[1].children[0].innerHTML = honor;
}
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~