HTML JS小游戏 制作飞机大战

废话不多说，直接上代码 

 设置背景图片移动

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 = "
游戏结束了
" +
				"
积分：
" +
				"
" + count[0] + " 
" +
				"
等级：" + level + "
";

				// 添加 重新开始 按钮
				var oBtn = document.createElement("div");
				oBtn.className = "reStart";
				oBtn.innerHTML = "重新开始";
				oBtn.onclick = init;
				oDiv.appendChild(oBtn);
				oSky.appendChild(oDiv);

			}

以上展示提供参考与学习，需要完整代码可以自行去下载完整资源

https://download.csdn.net/download/a1119603432/20397537