欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲

 更新時(shí)間：2022年05月08日 13:05:09   作者：敢跟頭像對(duì)視三秒嗎？  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下

html：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>飛機(jī)大戰(zhàn)</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/commen.css" />
?? ??? ?<link rel="stylesheet" type="text/css" href="css/main.css" />
?? ??? ?<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?
?? ??? ?<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
?? ?</head>
?? ?<body>
?? ??? ?<div id="stage">
?? ??? ??? ?<div class="bg1"></div>
?? ??? ??? ?<div class="bg2"></div>
?? ??? ??? ?<div class="plain"></div>
?? ??? ??? ?<div class="enemy enemy1"></div>
?? ??? ??? ?<div class="enemy enemy2"></div>
?? ??? ??? ?<div class="enemy enemy3"></div>
?? ??? ??? ?<div class="enemy enemy4"></div>
?? ??? ??? ?<!-- <div class="bullet"></div> -->
?? ??? ??? ?
?? ??? ??? ?<div class="func">功能切換</div>
?? ??? ??? ?<div class="func" style="left: 50px;">背景切換</div>
?? ??? ??? ?<audio id="mp3bg" src="music/background.mp3" autoplay loop>
?? ??? ??? ??? ?當(dāng)前瀏覽器不支持audio
?? ??? ??? ?</audio>
?? ??? ??? ?<audio id="mp3shoot" src="music/shoot.mp3" >
?? ??? ??? ??? ?當(dāng)前瀏覽器不支持audio
?? ??? ??? ?</audio>
?? ??? ??? ?<audio id="mp3destroy" src="./music/destoryed.mp3" >
?? ??? ??? ??? ?當(dāng)前瀏覽器不支持audio
?? ??? ??? ?</audio>
?? ??? ??? ?<button id="buttonmusic" type="button" style="position: absolute;right: 0;bottom: 0;">音樂(lè)</button>
?? ??? ?</div>
?? ?
?? ?</body>
</html>

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() {
?? ?//這里寫代碼的時(shí)候是可以控制所有htmldom節(jié)點(diǎn)的
?? ?//dom

?? ?var pdirection = [0, 0, 0, 0, 0];?? ?
?? ?
?? ?//子彈的寬高
?? ?var bulletw = 50;
?? ?var bulleth = 65;
?? ?//運(yùn)動(dòng)距離
?? ?var move = 1
?? ?
?? ?
?? ?// var timerkiss
?? ?var stage = document.getElementById("stage"); //獲取舞臺(tái)節(jié)點(diǎn)
?? ?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;
?? ?//玩家飛機(jī)對(duì)象
?? ?var plain = stage.getElementsByClassName("plain")[0];
?? ?//定義方向的變量數(shù)組，依次表示 上 右 下 左 空格用1表示按下，用0 表示未按下
?? ?// pdirection = [0, 0, 0, 0, 0];

?? ?//?? ?功能切換
?? ?var funcsw=true;//true表示打開(kāi)鍵盤 ，關(guān)閉鼠標(biāo)，false表示打開(kāi)鼠標(biāo)，關(guān)閉鍵盤
?? ?
?? ?//炮彈對(duì)象,寬高速度
?? ?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++背景向下移動(dòng) ?

?? ?}, 3);

?? ?// t1.clearInterval(); ?//時(shí)鐘停止


?? ?// 第二章圖片
?? ?// var stage=document.getElementById("stage"); //獲取舞臺(tái)節(jié)點(diǎn)

?? ?// // 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++背景向下移動(dòng) ?

?? ?// },70);
?? ?// console.log(plain)
?? ?// var move = 1


?? ?//鍵盤的監(jiān)控事件
?? ?document.onkeydown = function(e) {
?? ??? ?// console.log(e)
?? ??? ?//向上運(yùn)動(dòng)
?? ??? ?// 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=plain.style.top+10
?? ??? ??? ?//?? ?$(plain).css({"top":parseFloat($(plain).css("top"))-move});
?? ??? ??? ?// move++

?? ??? ?} else if (e.key == "s") { //向下運(yùn)動(dòng)
?? ??? ??? ?pdirection[2] = 1;
?? ??? ??? ?// console.log(parseFloat($(plain).css("top")))
?? ??? ??? ?//if(parseFloat($(plain).css("top"))<=513)
?? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ?//?? ?$(plain).css({"top":parseFloat($(plain).css("top"))+move});
?? ??? ??? ?// move++

?? ??? ?} else if (e.key == "a") { //向左運(yùn)動(dòng)
?? ??? ??? ?pdirection[3] = 1;
?? ??? ??? ?// console.log(parseFloat($(plain).css("top")))

?? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ?//$(plain).css({"left":parseFloat($(plain).css("left"))-move});
?? ??? ??? ?// move++

?? ??? ?} else if (e.key == "d") { //向右運(yùn)動(dòng)
?? ??? ??? ?pdirection[1] = 1;
?? ??? ??? ?// console.log(parseFloat($(plain).css("top")))

?? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ?//$(plain).css({"left":parseFloat($(plain).css("left"))+move});
?? ??? ??? ?// move++

?? ??? ?}
?? ??? ?//else if(e.key==" "){ ?//炮彈向上運(yùn)動(dòng)
?? ??? ?//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=plain.style.top+10
?? ??? ?// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
?? ??? ?// move++
?? ??? ?// $("<div class=\"bullet\"></div>") ? 轉(zhuǎn)義方法
?? ??? ?//$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);


?? ??? ?//};

?? ?}
?? ?//炮彈單獨(dú)
?? ?document.onkeypress = function(e) {

?? ??? ?if (e.key == " ") { //炮彈向上運(yùn)動(dòng)
?? ??? ??? ?shoot();
?? ??? ?};

?? ?}


?? ?//鍵盤按鍵抬起來(lái)
?? ?document.onkeyup = function(e) {
?? ??? ?if (e.key == "w") {
?? ??? ??? ?//cons
?? ??? ??? ?//console.log("555")
?? ??? ??? ?pdirection[0] = 0;


?? ??? ?} else if (e.key == "s") { //向下運(yùn)動(dòng)
?? ??? ??? ?pdirection[2] = 0;


?? ??? ?} else if (e.key == "a") { //向左運(yùn)動(dòng)
?? ??? ??? ?pdirection[3] = 0;


?? ??? ?} else if (e.key == "d") { //向右運(yùn)動(dòng)
?? ??? ??? ?pdirection[1] = 0;


?? ??? ?} else if (e.key == " ") { //炮彈向上運(yùn)動(dòng)
?? ??? ??? ?pdirection[4] = 0;


?? ??? ?};
?? ??? ?// console.log(pdirection)

?? ?};

?? ?//定義飛機(jī)x軸y軸的坐標(biāo)
?? ??? ?// var plainx=e.clientX;
?? ??? ?// var plainy=e.clientY
?? ?//鼠標(biāo)移動(dòng)事件
?? ?stage.onmousemove=function(e){
?? ??? ?if(funcsw) return; ?//關(guān)閉鼠標(biāo)功能
?? ??? ?var plainX=e.clientX-parseFloat($(stage).css("margin-left"));
?? ??? ?var plainY=e.clientY
?? ??? ?
?? ??? ?//console.log(e)
?? ??? ?//如有必要需要去掉子事件。此處并不需要
?? ??? ?// e.defaultPrevented;
?? ??? ?// e.getPreventDefault()//取消事件默認(rèn)動(dòng)作
?? ??? ?// 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;//關(guān)閉鍵盤 打開(kāi)鼠標(biāo)
?? ??? ??? ??? ?clearInterval(timerkey);
?? ??? ??? ??? ?timerfire=setInterval(shoot,170);
?? ??? ??? ??? ?
?? ??? ??? ?}else{?
?? ??? ??? ??? ?funcsw=true; //關(guān)閉鼠標(biāo) ，打開(kāi)鍵盤
?? ??? ??? ??? ?clearInterval(timerfire);
?? ??? ??? ??? ?timerkey=monitorkey();
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?};
?? ??? ?
?? ??? ?
?? ?});

?? ?//控制敵機(jī)的時(shí)鐘
?? ?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);
?? ?//隨機(jī)產(chǎn)生敵機(jī)
?? ?// setInterval(function(){
?? ?// ?? ?var num=parseInt(Math.random()*4)+1;
?? ?// ?? ?var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));
?? ?// ?? ?$("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")

?? ?// },1500);
?? ?//數(shù)組寫法
?? ?setInterval(function() {
?? ??? ?var num = parseInt(Math.random() * 4) + 1;
?? ??? ?var enemyW = [50, 67, 67, 67];
?? ??? ?var rndwidth_stage = parseInt(Math.random() * $(stage)
?? ?.width()); //展示三木運(yùn)算符(rndwidth_stage-enemyW[num-1]
?? ??? ?rndwidth_stage = rndwidth_stage > enemyW[num - 1] ? rndwidth_stage - enemyW[num - 1] :
?? ??? ??? ?rndwidth_stage;
?? ??? ?$("<div class=\"enemy enemy" + num + "\"></div>").css({
?? ??? ??? ?"left": rndwidth_stage
?? ??? ?}).appendTo("#stage")

?? ?}, 1000);

?? ?//控制子彈的動(dòng)畫(huà)時(shí)間控件
?? ?setInterval(function() {
?? ??? ?if ($(".bullet").length == 0) return;

?? ??? ?//設(shè)置好子彈移出屏幕后，移除子彈節(jié)點(diǎn)

?? ??? ?// $(".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<bullet.length;i++){
?? ??? ?// ?? ?var bulltop=parseFloat($(bullet[i]).css("top"));
?? ??? ?// ?? ?$(bullet[i]).css({"top":(bulltop-10)+"px"});

?? ??? ?// }

?? ??? ?for (i = 0; i < bullet.length; i++) {
?? ??? ??? ?var tmp_bullet = parseFloat($(bullet[i]).css("top"));
?? ??? ??? ?// console.log(tmp_bullet);
?? ??? ??? ?if (tmp_bullet < 0) {
?? ??? ??? ??? ?$(bullet[i]).remove();

?? ??? ??? ?} else {

?? ??? ??? ??? ?var bulltop = parseFloat($(bullet[i]).css("top"));
?? ??? ??? ??? ?$(bullet[i]).css({
?? ??? ??? ??? ??? ?"top": (bulltop - 10) + "px"
?? ??? ??? ??? ?});

?? ??? ??? ?}


?? ??? ?};


?? ?}, bullets);
?? ?//單獨(dú)監(jiān)控子彈
?? ?setInterval(function() {
?? ??? ?// var bullet=document.getElementsByClassName("bullet");
?? ??? ?//兩種寫法都可以
?? ??? ?var bullet = $(".bullet");

?? ??? ?// for(i=0;i<bullet.length;i++){
?? ??? ?// ?? ?var tmp_bullet=parseFloat($(bullet[i]).css("top"));
?? ??? ?// ?? ?// console.log(tmp_bullet);
?? ??? ?// ?? ?if(tmp_bullet<0){
?? ??? ?// ?? ??? ?$(bullet[i]).remove();

?? ??? ?// ?? ?};


?? ??? ?// };


?? ?}, 400);

?? ?//離開(kāi)舞臺(tái)的還記移除dom節(jié)點(diǎn)
?? ?setInterval(function() {


?? ??? ?for (i = 0; i < enemy.length; i++) {
?? ??? ??? ?var tmp_enemy = parseFloat($(enemy[i]).css("top"));
?? ??? ??? ?var tmp_stage = $(stage).height();
?? ??? ??? ?// console.log(tmp_enemy);?
?? ??? ??? ?// console.log(typeof($(tmp_stage).height()));
?? ??? ??? ?if (tmp_enemy > tmp_stage) {
?? ??? ??? ??? ?$(enemy[i]).remove();
?? ??? ??? ??? ?// console.log("移除成功");

?? ??? ??? ?};

?? ??? ?};
?? ?}, 500);

?? ?//時(shí)鐘控件監(jiān)控?cái)?shù)組pdirection的值
?? ?var timerkey=monitorkey();

//時(shí)鐘控件表示每個(gè)多少時(shí)間發(fā)射子彈
//第一種方法 ?鍵盤模擬事件
// setInterval(function(){
// ?? ?var e=jQuery.Event("keypress");
// ?? ?e.key=" "
// ?? ?$(document).trigger(e);
?? ?
// },500)

//第二種方法 ?直接調(diào)用函數(shù)
?? ?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=plain.style.top+10
?? ??? ?// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
?? ??? ?// move++
?? ??? ?// $("<div class=\"bullet\"></div>") ? 轉(zhuǎn)義方法
?? ??? ?//$("<div class='bullet'></div>").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=plain.style.top+10
?? ??? ?// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
?? ??? ?// move++
?? ??? ?// $("<div class=\"bullet\"></div>") ? 轉(zhuǎn)義方法
?? ??? ?$("<div class='bullet'></div>").css({
?? ??? ??? ?"left": bulletx,
?? ??? ??? ?"top": bullety
?? ??? ?}).appendTo(stage);
?? ??? ?
?? ??? ?
?? ?}
?? ?
?? ?//總結(jié)模型
?? ?// function kissAB(A,B){
?? ?// ?? ?var iskiss=false;
?? ?// ?? ?for(var i=0;i<A.length;i++){
?? ?// ?? ??? ?for(var j=0;j<B.length;j++){
?? ?// ?? ??? ??? ?// var a=$(A[i]).height()/2+parseFloat($(A[i]).css("top"))-$(B[j]).height()/2-parseFloat($(B[j]).css("top"));
?? ?// ?? ??? ??? ?// var b=$(B[j]).width()/2+parseFloat($(B[j]).css("left"))-$(A[i]).width()/2-parseFloat($(A[i]).css("left"));
?? ?// ?? ??? ??? ?// //console.log(a)
?? ?// ?? ??? ??? ?// var c=$(A[i]).height()/2+$(B[j]).width()/2
?? ?// ?? ??? ??? ?// console.log(b);
?? ??? ??? ??? ?
?? ?// ?? ??? ??? ?// if(a*a+b*b<c*c){
?? ?// ?? ??? ??? ?// ?? ?// $(B[j]).remove();
?? ?// ?? ??? ??? ?// ?? ?// $(A[i]).remove();
?? ?// ?? ??? ??? ?// ?? ?iskiss=true;
?? ?// ?? ??? ??? ?// ?? ?break;
?? ?// ?? ??? ??? ?// }
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ?// ?? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ?// ?? ?}

?? ?// }
?? ?
?? ?//調(diào)用模擬鍵盤函數(shù)
?? ??? ?//var timerfire=setInterval(shoot,500);
?? ??? ?//定義變量存儲(chǔ)子彈發(fā)射的動(dòng)畫(huà)
?? ?var timerfire;
?? ?
?? ??? ?//檢測(cè)是否碰撞

?? ?function kissAB(A,B){
?? ??? ??? ??? ?var iskiss=false;
?? ??? ??? ??? ??? ?var a=$(A).height()/2+parseFloat($(A).css("top"))-$(B).height()/2-parseFloat($(B).css("top"));
?? ??? ??? ??? ??? ?var b=$(B).width()/2+parseFloat($(B).css("left"))-$(A).width()/2-parseFloat($(A).css("left"));
?? ??? ??? ??? ??? ?//console.log(a)
?? ??? ??? ??? ??? ?var c=$(A).height()/2+$(B).width()/2-10;
?? ??? ??? ??? ??? ?//console.log(b);
?? ??? ??? ??? ??? ?if(a*a+b*b<c*c){
?? ??? ??? ??? ??? ??? ?// $(B[j]).remove();
?? ??? ??? ??? ??? ??? ?// $(A[i]).remove();
?? ??? ??? ??? ??? ??? ?iskiss=true;?? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?return iskiss;
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?}?? ?
?? ?
?? ?var timerkiss=monitorkiss();
?? ?
?? ?function monitorkiss(){
?? ??? ?
?? ??? ??? ?//獲取子彈
?? ??? ??? ?//檢測(cè)子彈與敵機(jī)是否碰撞
?? ??? ?return setInterval(function(){
?? ??? ??? ?
?? ??? ??? ?var bullets=$(".bullet");
?? ??? ??? ?
?? ??? ??? ?var enemys=$(".enemy");
?? ??? ??? ?for(var i=0;i<bullets.length;i++){
?? ??? ??? ??? ?for(var j=0;j<enemys.length;j++){
?? ??? ??? ??? ??? ?// var a=$(bullets[i]).height()/2+parseFloat($(bullets[i]).css("top"))-$(enemys[j]).height()/2-parseFloat($(enemys[j]).css("top"));
?? ??? ??? ??? ??? ?// var b=$(enemys[j]).width()/2+parseFloat($(enemys[j]).css("left"))-$(bullets[i]).width()/2-parseFloat($(bullets[i]).css("left"));
?? ??? ??? ??? ??? ?// //console.log(a)
?? ??? ??? ??? ??? ?// var c=$(bullets[i]).height()/2+$(enemys[j]).width()/2
?? ??? ??? ??? ??? ?// console.log(b);
?? ??? ??? ??? ??? ?// if(a*a+b*b<c*c){
?? ??? ??? ??? ??? ?// ?? ?$(enemys[j]).remove();
?? ??? ??? ??? ??? ?// ?? ?$(bullets[i]).remove();
?? ??? ??? ??? ??? ?// ?? ?break;
?? ??? ??? ??? ??? ?//console.log("aaa")
?? ??? ??? ??? ??? ?// }
?? ??? ??? ??? ??? ?if (kissAB(bullets[i],enemys[j])){
?? ??? ??? ??? ??? ??? ?//console.log("ttt")
?? ??? ??? ??? ??? ??? ?$("#mp3destroy")[0].play();
?? ??? ??? ??? ??? ??? ?$(enemys[j]).remove();
?? ??? ??? ??? ??? ??? ?$(bullets[i]).remove();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ? break;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?//檢測(cè)玩家與敵機(jī)是否碰撞
?? ??? ??? ?for(var j=0;j<enemys.length;j++){
?? ??? ??? ??? ?if(kissAB(plain,enemys[j])){
?? ??? ??? ??? ??? ?alert("game over");
?? ??? ??? ??? ??? ?gameover();
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?},1);
?? ??? ?
?? ??? ?
?? ?}
?? ?
?? ?function monitorkey(){
?? ??? ?return setInterval(function() {
?? ??? ??? ?//向上運(yùn)動(dòng)
?? ??? ??? ?//默認(rèn)方向 ?上 ?右 ?下 ?左 ?
?? ??? ??? ?if (pdirection[0] == 1) {
?? ??? ??? ??? ?// console.log(parseFloat($(plain).css("top")))
?? ??? ??? ??? ?if (parseFloat($(plain).css("top")) >= 5)
?? ??? ??? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ??? ??? ?$(plain).css({
?? ??? ??? ??? ??? ??? ?"top": parseFloat($(plain).css("top")) - move
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?else
?? ??? ??? ??? ??? ?$(plain).css({"top":0});
?? ??? ??? ??? ?// move++
?? ??? ?
?? ??? ??? ?}
?? ??? ??? ?if (pdirection[2] == 1) { //向下運(yùn)動(dòng)
?? ??? ??? ??? ?// console.log(parseFloat($(plain).css("top")))
?? ??? ??? ??? ?if (parseFloat($(plain).css("top")) <= 513)
?? ??? ??? ??? ??? ?// plain.style.top.CSSValue=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) { //向左運(yùn)動(dòng)
?? ??? ??? ??? ?// console.log(parseFloat($(plain).css("top")))
?? ??? ??? ??? ?if (parseFloat($(plain).css("left")) >= -10)
?? ??? ??? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ??? ??? ?$(plain).css({
?? ??? ??? ??? ??? ??? ?"left": parseFloat($(plain).css("left")) - move
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?// move++
?? ??? ?
?? ??? ??? ?}
?? ??? ??? ?if (pdirection[1] == 1) { //向右運(yùn)動(dòng)
?? ??? ??? ??? ?// console.log(parseFloat($(plain).css("top")))
?? ??? ??? ??? ?if (parseFloat($(plain).css("left")) <= 270)
?? ??? ??? ??? ??? ?// plain.style.top.CSSValue=plain.style.top+10
?? ??? ??? ??? ??? ?//console.log(parseFloat($(plain).css("right")))
?? ??? ??? ??? ??? ?$(plain).css({
?? ??? ??? ??? ??? ??? ?"left": parseFloat($(plain).css("left")) + move
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?// move++
?? ??? ?
?? ??? ??? ?}
?? ??? ??? ?if (pdirection[4] == 1) { //炮彈向上運(yùn)動(dòng)
?? ??? ??? ??? ?// 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=plain.style.top+10
?? ??? ??? ??? ?// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
?? ??? ??? ??? ?// move++
?? ??? ??? ??? ?// $("<div class=\"bullet\"></div>") ? 轉(zhuǎn)義方法
?? ??? ??? ??? ?//$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
?? ??? ?
?? ??? ?
?? ??? ??? ?}
?? ??? ?
?? ??? ?}, 1);
?? ?}
?? ?// 載入背景音樂(lè)
?? ?// $("#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()=="音樂(lè)"){
?? ??? ??? ?$(this).html("暫停");
?? ??? ??? ?//mp3bg.currentTime=0;
?? ??? ??? ?// mp3bg.controls
?? ??? ??? ?mp3bg.play();
?? ??? ??? ?//clearInterval(timerbg);
?? ??? ?}else{
?? ??? ??? ?//mp3bg.currentTime=0;
?? ??? ??? ?// mp3bg.controls
?? ??? ??? ?mp3bg.pause();
?? ??? ??? ?$(this).html("音樂(lè)");
?? ??? ??? ?
?? ??? ?}
?? ??? ?
?? ?})
?? ?
?? ?
?? ?function startgame(){
?? ??? ?//碰撞檢測(cè)開(kāi)始
?? ??? ?timerkiss=monitorkiss();
?? ??? ?//重置方向鍵盤
?? ??? ?console.log(pdirection);
?? ??? ?pdirection = [0, 0, 0, 0, 0];
?? ??? ?
?? ??? ?//生成玩家飛機(jī)
?? ??? ?// 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(){
?? ??? ?//碰撞檢測(cè)停止
?? ??? ?clearInterval(timerkiss);
?? ??? ?// alert("gameover");
?? ??? ?//移除玩家飛機(jī)
?? ??? ?// plain.remove();
?? ??? ?//移除玩家飛機(jī)使用隱藏的方法
?? ??? ?//plain.hidden=true;
?? ??? ?
?? ??? ?//移除所有敵機(jī)
?? ??? ?$(".enemy").remove();
?? ??? ?
?? ??? ?// console.log(pdirection)
?? ??? ?//移除玩家飛機(jī)，使用隱藏的方法
?? ??? ?// $(plain).hide();
?? ??? ?plain.style.cssText="top:"+$(stage).height()+"px;left:"+($(stage).width()/2-$(plain).width()/2+"px");
?? ??? ?if(confirm("你玩不起，你個(gè)小垃圾，你沒(méi)有實(shí)力")){
?? ??? ??? ?startgame();
?? ??? ??? ?
?? ??? ?}
?? ??? ?//重置方向鍵盤
?? ??? ?pdirection = [0, 0, 0, 0, 0];
?? ??? ?
?? ??? ?
?? ?}
?? ?
});


// 第二章圖片
// $(function(){
// ?? ?//這里寫代碼的時(shí)候是可以控制所有htmldom節(jié)點(diǎn)的
// ?? ?//dom

// ?? ?var stage=document.getElementById("stage"); //獲取舞臺(tái)節(jié)點(diǎn)
// ?? ?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++背景向下移動(dòng) ?

// ?? ?},70);

// ?? ?// t1.clearInterval(); ?//時(shí)鐘停止

// });
// alert("4444") ? 不使用jq的話無(wú)法完全加載再?gòu)棌椏?

// function myapp(){
// ?? ?定義函數(shù)的基本格式

// }


// 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;
?? ?
?? ?
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論