html：
飞机大战
src="https://www.it610.com/article/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8">
src="https://www.it610.com/article/js/main.js" type="text/javascript" charset="utf-8">
功能切换
背景切换
js：
// var pdirection
//var plain// pdirection = [0, 0, 0, 0, 0];
//var bulletw = 50;
// var bulleth = 65;
// var stage
// var move = 1// var timerkiss
$(function() {
//这里写代码的时候是可以控制所有htmldom节点的
//dom
var pdirection = [0, 0, 0, 0, 0];
//子弹的宽高
var bulletw = 50;
var bulleth = 65;
//运动距离
var move = 1
// var timerkiss
var stage = document.getElementById("stage");
//获取舞台节点
var bg1 = stage.getElementsByClassName("bg1")[0];
//获取背景图片
// console.log(bg1)//检查是否捕获bg1
var bg2 = stage.getElementsByClassName("bg2")[0];
//获取背景图片
var topval = -200;
var topval2 = -968;
var k = 0;
//玩家飞机对象
var plain = stage.getElementsByClassName("plain")[0];
//定义方向的变量数组，依次表示 上 右 下 左 空格用1表示按下，用0 表示未按下
// pdirection = [0, 0, 0, 0, 0];
// 功能切换
var funcsw=true;
//true表示打开键盘 ，关闭鼠标，false表示打开鼠标，关闭键盘
//炮弹对象,宽高速度
var bullet = stage.getElementsByClassName("bullet")[0];
// var bulletw = 50;
// var bulleth = 65;
var bullets = 10;
// bg1.style.cssText="top: -30px;
"
var t1 = setInterval(function() {
k += 1;
if (k == 768) {
topval = -968;
} else if (k == 768 * 2) {
topval2 = -968;
k = 0;
}
// console.log("ddd")
// console.log(bg1.style.cssText)
// bg1.scrollTop=bg1.scrollTop+10;
$(bg1).css({
"top": topval
});
$(bg2).css({
"top": topval2
});
// bg1.style.cssText="top: "+topval+"px";
topval++;
// bg2.style.cssText="top: "+topval2+"px";
topval2++;
//topval++背景向下移动 }, 3);
// t1.clearInterval();
//时钟停止 // 第二章图片
// var stage=document.getElementById("stage");
//获取舞台节点 // // console.log(bg1)//检查是否捕获bg1 // // bg1.style.cssText="top: -30px;
"
// var t1=setInterval(function(){
//// console.log("ddd")
//// console.log(bg1.style.cssText)
//// bg1.scrollTop=bg1.scrollTop+10;
//bg2.style.cssText="top: "+topval2+"px";
//topval2+=1
////topval++背景向下移动 // },70);
// console.log(plain)
// var move = 1 //键盘的监控事件
document.onkeydown = function(e) {
// console.log(e)
//向上运动
// console.log("444")
if (e.key == "w") {
//cons
//console.log("555")
pdirection[0] = 1;
//console.log(pdirection[0]);
// console.log(parseFloat($(plain).css("top")))
//if(parseFloat($(plain).css("top"))>=5)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"top":parseFloat($(plain).css("top"))-move});
// move++} else if (e.key == "s") { //向下运动
pdirection[2] = 1;
// console.log(parseFloat($(plain).css("top")))
//if(parseFloat($(plain).css("top"))<=513)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"top":parseFloat($(plain).css("top"))+move});
// move++} else if (e.key == "a") { //向左运动
pdirection[3] = 1;
// console.log(parseFloat($(plain).css("top")))// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
//$(plain).css({"left":parseFloat($(plain).css("left"))-move});
// move++} else if (e.key == "d") { //向右运动
pdirection[1] = 1;
// console.log(parseFloat($(plain).css("top")))// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
//$(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++}
//else if(e.key==" "){//炮弹向上运动
//pdirection[4]=1;
// console.log(parseFloat($(plain).css("top")))
// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// console.log($(plain).css("left"))
//console.log(parseFloat($(plain).css("left")))
// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("")转义方法
//$("").css({"left":bulletx,"top":bullety}).appendTo(stage);
//};
}
//炮弹单独
document.onkeypress = function(e) {if (e.key == " ") { //炮弹向上运动
shoot();
};
} //键盘按键抬起来
document.onkeyup = function(e) {
if (e.key == "w") {
//cons
//console.log("555")
pdirection[0] = 0;
} else if (e.key == "s") { //向下运动
pdirection[2] = 0;
} else if (e.key == "a") { //向左运动
pdirection[3] = 0;
} else if (e.key == "d") { //向右运动
pdirection[1] = 0;
} else if (e.key == " ") { //炮弹向上运动
pdirection[4] = 0;
};
// console.log(pdirection) };
//定义飞机x轴y轴的坐标
// var plainx=e.clientX;
// var plainy=e.clientY
//鼠标移动事件
stage.onmousemove=function(e){
if(funcsw) return;
//关闭鼠标功能
var plainX=e.clientX-parseFloat($(stage).css("margin-left"));
var plainY=e.clientY//console.log(e)
//如有必要需要去掉子事件。此处并不需要
// e.defaultPrevented;
// e.getPreventDefault()//取消事件默认动作
// console.log(e.path[1].id);
// ($(plain[0]).css("top"))=e.clientX+"px"
$(plain).css({"left":plainX-parseFloat($(plain).width()/2),"top":plainY-parseFloat($(plain).height()/2)});
//$(plain).css({"top":plainY+parseFloat($(plain).css("height")/2)});
// $(plain).css({"top":plainy});
// console.log(e.clientX)
// console.log(e.clientY)
// console.log($(plain).css("top"))
} //绑定功能切换键
$(".func").click(function(){
if($(this).html()=="功能切换"){
if(funcsw){
funcsw=false;
//关闭键盘 打开鼠标
clearInterval(timerkey);
timerfire=setInterval(shoot,170);
}else{
funcsw=true;
//关闭鼠标 ，打开键盘
clearInterval(timerfire);
timerkey=monitorkey();
}
};
});
//控制敌机的时钟
var enemy = document.getElementsByClassName("enemy");
setInterval(function() {
for (var i = 0;
i < enemy.length;
i++) {
if ($(enemy[i]).attr("class") == "enemy enemy1") {
$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 1);
} else if ($(enemy[i]).attr("class") == "enemy enemy2") {
$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 2);
} else if ($(enemy[i]).attr("class") == "enemy enemy3") {
$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 3);
} else if ($(enemy[i]).attr("class") == "enemy enemy4") {
$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 4);
}} }, 10);
//随机产生敌机
// setInterval(function(){
//var num=parseInt(Math.random()*4)+1;
//var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));
//$("").css({"left":rndwidth_stage}).appendTo("#stage") // },1500);
//数组写法
setInterval(function() {
var num = parseInt(Math.random() * 4) + 1;
var enemyW = [50, 67, 67, 67];
var rndwidth_stage = parseInt(Math.random() * $(stage)
.width());
//展示三木运算符(rndwidth_stage-enemyW[num-1]
rndwidth_stage = rndwidth_stage > enemyW[num - 1] ? rndwidth_stage - enemyW[num - 1] :
rndwidth_stage;
$(" + num + "\">").css({
"left": rndwidth_stage
}).appendTo("#stage") }, 1000);
//控制子弹的动画时间控件
setInterval(function() {
if ($(".bullet").length == 0) return;
//设置好子弹移出屏幕后，移除子弹节点// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
// // console.log($(this).css("top"))
// console.log(parseFloat($(".bullet").css("top")));
//var bulltop=parseFloat($(".bullet[i]").css("top"));
//$(".bullet").css({"top":(bulltop-10)+"px"});
var bullet = $(".bullet");
// console.log(bullet)
// for(var i=0;
i tmp_stage) {
$(enemy[i]).remove();
// console.log("移除成功");
};
};
}, 500);
//时钟控件监控数组pdirection的值
var timerkey=monitorkey();
//时钟控件表示每个多少时间发射子弹
//第一种方法键盘模拟事件
// setInterval(function(){
//var e=jQuery.Event("keypress");
//e.key=" "
//$(document).trigger(e);
// },500)//第二种方法直接调用函数
function shoot(){
$("#mp3shoot")[0].currentTime=0;
$("#mp3shoot")[0].play();
pdirection[4] = 1;
// console.log(parseFloat($(plain).css("top")))
// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// console.log($(plain).css("left"))
//console.log(parseFloat($(plain).css("left")))
// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("")转义方法
//$("").css({"left":bulletx,"top":bullety}).appendTo(stage);
//console.log(pdirection[4]);
var bulletx = parseFloat($(plain).css("left")) + $(plain).width() / 2 - bulletw / 2;
// console.log($(plain).css("left"))
// console.log(parseFloat($(plain).css("left")))
// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
var bullety = parseFloat($(plain).css("top")) - bulleth;
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("")转义方法
$("").css({
"left": bulletx,
"top": bullety
}).appendTo(stage);
}
//总结模型
// function kissAB(A,B){
//var iskiss=false;
//for(var i=0;
i
//for(var j=0;
j= 5)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
$(plain).css({"top": parseFloat($(plain).css("top")) - move
});
else
$(plain).css({"top":0});
// move++}
if (pdirection[2] == 1) { //向下运动
// console.log(parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("top")) <= 513)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
$(plain).css({"top": parseFloat($(plain).css("top")) + move
});
else
$(plain).css({"top":$(stage).Height-$(plain).Height});
// move++}
if (pdirection[3] == 1) { //向左运动
// console.log(parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("left")) >= -10)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
$(plain).css({"left": parseFloat($(plain).css("left")) - move
});
// move++}
if (pdirection[1] == 1) { //向右运动
// console.log(parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("left")) <= 270)
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
//console.log(parseFloat($(plain).css("right")))
$(plain).css({
"left": parseFloat($(plain).css("left")) + move
});
// move++}
if (pdirection[4] == 1) { //炮弹向上运动
// console.log(parseFloat($(plain).css("top")))
//var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// console.log($(plain).css("left"))
// console.log(parseFloat($(plain).css("left")))
// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// plain.style.top.CSSValue=https://www.it610.com/article/plain.style.top+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("")转义方法
//$("").css({"left":bulletx,"top":bullety}).appendTo(stage);
}}, 1);
}
// 载入背景音乐
// $("#mp3bg").play();
var mp3bg=document.getElementById("mp3bg");
// var timerbg= setInterval(function(){
//mp3bg.currentTime=0;
//// mp3bg.controls
//mp3bg.play();
//clearInterval(timerbg);
// })
$("#buttonmusic").click();
$("#buttonmusic").click(function(){
if($(this).html()=="音乐"){
$(this).html("暂停");
//mp3bg.currentTime=0;
// mp3bg.controls
mp3bg.play();
//clearInterval(timerbg);
}else{
//mp3bg.currentTime=0;
// mp3bg.controls
mp3bg.pause();
$(this).html("音乐");
} })
function startgame(){
//碰撞检测开始
timerkiss=monitorkiss();
//重置方向键盘
console.log(pdirection);
pdirection = [0, 0, 0, 0, 0];
//生成玩家飞机
// var timertmp=setInterval(function(){
//var aa=$(stage).height()-$(plain).height()*2
//console.log(aa)
//if(parseFloat($(plain).css("top"))<($(stage).height()-$(plain).height()*2)){
////alert("33");
//console.log("666");
//clearInterval(timertmp);
//}else
//plain.style.cssText="top:"+(parseFloat($(plain).css("top"))-5)+"px;
left:"+$(stage).width()/2-$(plain).width()/2+"px;
";
// });
}
function gameover(){
//碰撞检测停止
clearInterval(timerkiss);
// alert("gameover");
//移除玩家飞机
// plain.remove();
//移除玩家飞机使用隐藏的方法
//plain.hidden=true;
//移除所有敌机
$(".enemy").remove();
// console.log(pdirection)
//移除玩家飞机，使用隐藏的方法
// $(plain).hide();
plain.style.cssText="top:"+$(stage).height()+"px;
left:"+($(stage).width()/2-$(plain).width()/2+"px");
if(confirm("你玩不起，你个小垃圾，你没有实力")){
startgame();
}
//重置方向键盘
pdirection = [0, 0, 0, 0, 0];
}
});
// 第二章图片
// $(function(){
////这里写代码的时候是可以控制所有htmldom节点的
////dom//var stage=document.getElementById("stage");
//获取舞台节点
//var bg2=stage.getElementsByClassName("bg2")[0];
//获取背景图片
//// console.log(bg1)//检查是否捕获bg1
//var topval=-968;
//// bg1.style.cssText="top: -30px;
"
//var t2=setInterval(function(){
//// console.log("ddd")
//// console.log(bg1.style.cssText)
//// bg1.scrollTop=bg1.scrollTop+10;
//bg2.style.cssText="top: "+topval+"px";
//topval+=1
////topval++背景向下移动//},70);
//// t1.clearInterval();
//时钟停止// });
// alert("4444")不使用jq的话无法完全加载再弹弹框// function myapp(){
//定义函数的基本格式// }// function xxxx (){
//// console.log("ddd")
//console.log(bg1.style.cssText)
//// bg1.scrollTop=bg1.scrollTop+10;
//bg1.style.cssText="top: "+topval+"px";
//topval+=1//} css:
#stage{
width: 320px;
height: 568px;
background-color: antiquewhite;
color: white;
overflow: hidden;
margin: auto;
position: relative;
}
.bg1{
background-image: url(../img/bg_01.png);
height: 768px;
width: 100%;
position: absolute;
top: -200px;
/* z-index: 5;
*/
}
.bg2{
background-image: url(../img/bg_01.png);
height: 768px;
width: 100%;
position: absolute;
top: -968px;
/* z-index: 5;
*/
}
.plain{
height: 53px;
width: 67px;
background-image: url(../img/plane_blue_01.png);
z-index: 11;
position: absolute;
bottom: 0;
background-size: 100% 100%;
}.enemy{
height: 53px;
width: 67px;
position: absolute;
background-size: 100% 100%;
}
.enemy1{
background-image: url(../img/enemy_04.png);
/* z-index: 10;
*/
height: 40px;
width: 50px;
top:0;
left: 20px;
}
.enemy2{
background-image: url(../img/enemy_03.png);
/* z-index: 10;
*/
top:0;
left: 90px;
}
.enemy3{
background-image: url(../img/enemy_02.png);
/* z-index: 10;
*/
top:0;
left: 160px;
height: 70px;
}
.enemy4{
background-image: url(../img/enemy_01.png);
/* z-index: 10;
*/
top:0;
left: 230px;
}
/* 子弹 */
.bullet{
background-image: url(../img/bullet_01.png);
width: 50px;
height: 65px;
position: absolute;
/* z-index: 10;
*/
}
/* 按钮 */
.func{
width: 40px;
height: 20px;
position: absolute;
z-index: 12;
background-color: skyblue;
opacity: 0.6;
color: white;
cursor: pointer;
}
.func:hover{
opacity: 1;
transition-duration: 1s;
}推荐阅读
- 前端-CSS篇|CSS水平垂直居中的几种方式，CSS定位
- javascript|第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-6 子弹发射
- html游戏源码|HTML5超级玛丽简易版（有源码）
- ES6+|七（以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 文档对象）
- 飞机大作战游戏 2----（运用H5和Js制作）
- 视频教程|Web 前端视频资源分享（Bootstrap/Vue/小程序）
- vuepress按照官方文档创建后跑起来乱码的原因
- 程序员|java二叉树中序遍历非递归，值得一看
- 尝鲜（阿里前端低代码引擎LowCodeEngine开源啦！）