废话不多说，直接上代码?
?设置背景图片移动
var sky = document.getElementById("sky"); //获取div
var y = 0;
var x = 0;
// var y=0;//定义垂直方向初始距离
var skyTimer = setInterval(moveBg, 100); //设置调用这个方法的定时器，100ms调用一次
function moveBg() { //背景移动函数
sky.style.backgroundPositionX = x + "px"; //对div对象的背景图片进行移动
sky.style.backgroundPositionY = y + "px";
y = y + 2; //向下移动
}
创建飞机，子弹，鼠标事件移动
function army(index) {
// 创建飞机
var oArmy = document.createElement('img');
oArmy.src = "image/飞机.png"; //飞机图片
oArmy.width = 66;
oArmy.height = 80;
oArmy.className = 'army';
// 生成飞机的位置固定在底部中间
oArmy.style.left = oSky.offsetWidth / 2 - oArmy.width / 2 + 'px';
oArmy.style.top = oSky.offsetHeight - oArmy.height + 'px';
oSky.appendChild(oArmy);
var leftMax,leftMin,topMax,topMin;
leftMin = -oArmy.width/2;
leftMax = oSky.offsetWidth - oArmy.width/2;
topMin = 0;
topMax = oSky.offsetHeight - oArmy.height/2;
var oSkyLeft = getOffset(oSky).left,oSkyTop = getOffset(oSky).top;
//鼠标事件
oArmy.onmousemove = function (e) {
e=e||window.event;
document.onmousemove = function (e) {
var left = e.pageX - oSkyLeft - oArmy.width/2 ,
top = e.pageY - oArmy.height ;
left = Math.max(left , leftMin);
left = Math.min(left , leftMax);
top = Math.max(top , topMin);
top = Math.min(top , topMax);
oArmy.style.left = left + 'px';
oArmy.style.top = top + 'px';
}
};
// 创建子弹
// 生成子弹速度
var bSpeed = [180,200,300,200];
//不同模式可设置子弹的发射的速度
oArmy.bTimer = setInterval(function() {
var oBullet = new Image();
oBullet.src = "image/子弹.png";
oBullet.width = 15;
oBullet.height = 25;
oBullet.className = "bullet";
oBullet.style.left = oArmy.offsetLeft + oArmy.width / 2 - oBullet.width / 2 + 'px';
oBullet.style.top = oArmy.offsetTop - oBullet.height + 'px';
oSky.appendChild(oBullet);
function mUp() {
oBullet.style.top = oBullet.offsetTop - 10 + 'px';
if (oBullet.offsetTop <= -oBullet.height / 2) {
oSky.removeChild(oBullet);
} else {
oBullet.parentNode && (oBullet.timer = requestAnimationFrame(mUp));
}
}
oBullet.timer = requestAnimationFrame(mUp);
}, bSpeed[index]);
return oArmy
}生成敌方机体，碰撞
function enemyMove(index, oArmy) {
// 敌机生成时间间隔 不同敌军生成时间不同
var eTime = [
[500, 400, 300, 200],
[2000, 1500, 1000, 500],
[5000, 4000, 3000, 2000],
[6000, 6000, 6000, 6000]
];
// //生成战斗机
oSky.timer1 = setInterval(function() {
enemy(index, oArmy, 1, 34, 34);
}, eTime[0][index]);
oSky.timer2 = setInterval(function() {
enemy(index, oArmy, 2, 64, 80);
}, eTime[1][index]);
oSky.timer3 = setInterval(function() {
enemy(index, oArmy, 3, 110, 164);
}, eTime[2][index]);
oSky.timerBoss = setTimeout(function() {
enemy(index, oArmy, 20, 200, 200)
}, eTime[3][index])
}
function enemy(index, oArmy, n, w, h) {
var oEnemy = new Image();
oEnemy.src = "image/敌机"+n+".png";
oEnemy.width = w;
oEnemy.height = h;
oEnemy.life = n*3; // 敌机初始生命值
oEnemy.className = "enemy";
oEnemy.style.top = -oEnemy.height + 'px';
oEnemy.style.left = Math.random()*oSky.offsetWidth - oEnemy.width/2 + 'px';
oEnemy.speed = Math.random()*4/n+index; // 随机生成 敌机飞行速度 不同模式不同飞机速度区间不同
// BOSS出现 规定BOSS的下降速度和生命值
if(n===20){
oEnemy.speed=0.2;
oEnemy.life =80;
oEnemy.style.left = oSky.offsetWidth / 2 - oEnemy.width / 2 + 'px';
}
oSky.appendChild( oEnemy );
function mDown(){
oEnemy.style.top = oEnemy.offsetTop + oEnemy.speed + 'px';
if ( oEnemy.offsetTop > oSky.offsetHeight ){
// BOSS 冲入底部同归于尽
if(n===20){
removeAll(oEnemy,oArmy,9);
gameOver()
}else{
oSky.removeChild(oEnemy);
}
}else{
// 与子弹的碰撞检测
var aBullet = document.querySelectorAll('.bullet'),
length =aBullet.length,
j;
for ( j = 0; j < length; j++) {
// 遍历所有子弹，碰撞情况
if ( coll(oEnemy , aBullet[j]) ){
// 清除该子弹向上移动的定时器 ，并且移除子弹
cancelAnimationFrame(aBullet[j].timer);
aBullet[j].parentNode && oSky.removeChild(aBullet[j]);
oEnemy.life--;
// BOSS 被击中
if(oEnemy.life===20){
//生成爆炸图片
oEnemy.src = "image/爆炸"+n+".png";
}else{
// 敌军生命值为0的时候爆炸
if(oEnemy.life===0){
if(n===20){
//生成爆炸图片
createBoom(oEnemy , "1");
setTimeout(function () {
// removeAll(oEnemy,oArmy,4);
// gameOver()
},1000);
//计分
count[0] = count[0]+n*n*100;
count[n]++;
document.querySelector('.score').innerHTML = "积分"+count[0];
}else{
//生成爆炸图片
createBoom(oEnemy , "1");
//移除敌军
oSky.removeChild(oEnemy);
//计分
count[0] = count[0]+n*n*100;
count[n]++;
document.querySelector('.score').innerHTML = "积分"+count[0];
}
}
}
}
}
//碰撞
if ( oArmy.parentNode && coll( oEnemy , oArmy ) ){
removeAll(oEnemy,oArmy,1);
return;
}
oEnemy.parentNode && requestAnimationFrame(mDown);
}
}
requestAnimationFrame(mDown);
}游戏结束界面
function gameOver() { oSky.innerHTML = ""; var oDiv = document.createElement("div"); oDiv.className = "over"; var level = "SSS"; if (count[0] > 100000) { level = "S"; } else if (count[0] > 50000) { level = "A"; } else if (count[0] > 10000) { level = "B"; } else if (count[0] > 5000) { level = "C"; } else { level = "D"; } oDiv.innerHTML = "<div class='overTitle'>游戏结束了</div>" + "<p class='showScore'>积分：</p>" + "<p class='scoreTxt'><span>" + count[0] + "</span> </p>" + "<p class='scoreTxt'>等级：<span>" + level + "</p>"; // 添加 重新开始 按钮 var oBtn = document.createElement("div"); oBtn.className = "reStart"; oBtn.innerHTML = "重新开始"; oBtn.onclick = init; oDiv.appendChild(oBtn); oSky.appendChild(oDiv); }
以上展示提供参考与学习，需要完整代码可以自行去下载完整资源