html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="static/index.css"/>
</head>
<body>
<div id="map">
<div class="score"></div>
<div class="start_div">
<h1>飞机大战</h1>
<button type="button">开始游戏</button>
</div>
<div class="fire_div">
</div>
<div class="gameover">
<h1>游戏结束</h1>
<h2>分数：</h2>
<button type="button">重新开始</button>
</div>
</div>
<script type="text/javascript" src="static/index.js"></script>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
#map{
width: 512px;
height: 650px;
/* border: 1px solid red; */
margin: auto;
background: url(img/bg_1.jpg);
background-position-y: 0px;
position: relative;
overflow: hidden;
}
.start_div{
text-align: center;
padding-top: 200px;
}
.start_div h1{
font-size: 36px;
color: #fff;
margin-bottom: 100px;
}
.start_div button,.gameover button{
width: 100px;
height: 40px;
background: #fff;
border: none;
outline: none;
border-radius: 4px;
}
.plane{
position: absolute;
top: 0;
left: 0;
}
.fire,.enemy{
position: absolute;
}
.score{
position: absolute;
right: 10px;
top: 10px;
color:#fff;
z-index: 99;
}
.gameover{
position: absolute;
width: 80%;
height: 200px;
background: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 100;
text-align: center;
padding: 20px;
display: none;
}
.gameover h2{
margin: 30px 0;
}
.gameover button{
background: gainsboro;
}
JS
var startBtn=document.querySelector('.start_div button');
var startDiv=document.querySelector('.start_div');
var fireDiv=document.querySelector('.fire_div');
var map=document.querySelector('#map');
var scoreDiv=document.querySelector('.score');
var overDiv=document.querySelector('.gameover');
var replayBtn=document.querySelector('.gameover button');
var mapOffsetLeft=map.offsetLeft; //map距离浏览器左侧的距离
var score=0;
var plane;
var fireAll=fireDiv.children;
startBtn.οnclick=startGame;
//重新开始游戏
replayBtn.οnclick=function(e){
overDiv.style.display="none";
score=0;
map.removeChild(plane);//清除上一局游戏角色
var enemy=document.querySelectorAll(".enemy");
for(var i=0;i<enemy.length;i++){
map.removeChild(enemy[i]) //清除上一局留下的敌军飞机
}
startGame(e)
}
//开始游戏
function startGame(event){
var pos={
x:event.clientX-mapOffsetLeft-35,
y:event.clientY-35
}
startDiv.style.display="none";
mapMove();
plane=createPlane(pos);
enemy();
}
//背景移动效果
function mapMove(){
map.timer=setInterval(function(){
var y=parseInt(getComputedStyle(map).backgroundPositionY)
y++
map.style.backgroundPositionY=y+'px'
},10)
}
//创建游戏角色
function createPlane(pos){
var oImg=new Image();
oImg.src="static/img/plane_0.png";
oImg.width=70;
oImg.height=70;
oImg.className='plane';
map.appendChild(oImg);
oImg.style.top=pos.y+"px";
oImg.style.left=pos.x+"px";
//鼠标移动事件
document.οnmοusemοve=function(e){
var left=e.clientX-mapOffsetLeft-35;
var top=e.clientY-35;
var topMin=0,topMax=map.clientHeight-70,
leftMin=0,leftMax=map.clientWidth-70;
left=Math.max(left,leftMin)
left=Math.min(left,leftMax)
top=Math.max(top,topMin)
top=Math.min(top,topMax)
oImg.style.top=top+"px";
oImg.style.left=left+"px";
}
fire(oImg)
return oImg
}
//创建子弹
function fire(oImg){
// createFire()
map.fireInterval=setInterval(createFire,150)
function createFire(){
var oBul=new Image();
oBul.src="static/img/fire.png";
oBul.height=40;
oBul.Width=40;
oBul.className="fire"
oBul.style.left=oImg.offsetLeft+35-20+"px";
oBul.style.top=oImg.offsetTop-5+"px";
fireDiv.appendChild(oBul);
//子弹移动效果
move()
function move(){
setInterval(function(){
var top=parseInt(getComputedStyle(oBul).top);
if(top <= -40){
fireDiv.removeChild(oBul)
}else{
top-=5;
oBul.style.top=top+"px";
}
},10)
}
}
}
//创建敌军
function enemy(){
// createEnemy()
map.enemyInterval=setInterval(createEnemy,1000)
var count=0;
function createEnemy(){
count++;
var oEnemy=new Image();
if(count%20 == 0){
//大的敌军飞机
oEnemy.src="static/img/enemy_big.png";
oEnemy.height=50;
oEnemy.width=75;
oEnemy.type=1
}else{
//小的
oEnemy.src="static/img/enemy_small.png";
oEnemy.height=40;
oEnemy.width=54;
oEnemy.type=0
}
oEnemy.className="enemy";
oEnemy.style.top=-oEnemy.height+'px';
oEnemy.style.left=Math.random()*(512-oEnemy.width)+"px"
oEnemy.speed=4; //移动速度
oEnemy.islive=1; //是否存在
map.appendChild(oEnemy);
//敌军移动效果
move()
function move(){
setInterval(function(){
var top=parseInt(getComputedStyle(oEnemy).top);
if(top>=map.clientHeight){
map.removeChild(oEnemy)
if(score>0){
score--;
// scoreDiv.innerText=score+"分";
}
}else{
top+=oEnemy.speed;
for(var i=0;i<fireAll.length;i++){
if(coll(oEnemy,fireAll[i]) && oEnemy.offsetTop>=0){
//子弹碰撞了飞机
if(oEnemy.islive){
score++; //分数加1
console.log(score)
}
oEnemy.islive=0; //飞机被消灭
//飞机图片变成爆炸图片
if(oEnemy.type == 1){
oEnemy.src="static/img/boom_big.png"
}else{
oEnemy.src="static/img/boom_small.png"
}
//清除已被消灭的飞机
setTimeout(function(){
if(oEnemy.parentNode){
oEnemy.parentNode.removeChild(oEnemy)
}
},500)
}else{
//判断飞机是否存在
if(oEnemy.islive){
oEnemy.style.top=top+"px";
}
}
}
// 判断游戏是否结束
if(coll(oEnemy,plane)){
clearInterval(map.enemyInterval); //停止创建敌军飞机
clearInterval(map.fireInterval); //停止发射子弹
overDiv.style.display='block'; //显示游戏结束界面
document.οnmοusemοve=null; //解除鼠标移动事件
overDiv.querySelector("h2").innerText="分数："+score; //展示分数
}
}
},10)
}
}
}
//碰撞函数
function coll(obj1,obj2){
var top1=obj1.offsetTop,
left1=obj1.offsetLeft,
w1=obj1.clientWidth,
h1=obj1.clientHeight;
var top2=obj2.offsetTop,
left2=obj2.offsetLeft,
w2=obj2.clientWidth,
h2=obj2.clientHeight;
//不会碰撞的情况
var isColl=(top1>top2+h2)||(top2>top1+h1)||(left1>left2+w2)||(left2>left1+w1);
return !isColl
}
image
