jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
更新時(shí)間：2022年05月09日 09:19:10 作者：南初?
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的具體代碼，供大家參考，具體內(nèi)容如下
一、效果圖
二、核心代碼
1.創(chuàng)建地圖
this.createMap = function () {
? ?var that = this;
? ? ? ? ? ? ? ? that._bg = $("<div class='bgmap'></div>");
? ? ? ? ? ? ? ? that._bg.css({
? ? ? ? ? ? ? ? ? ? width: sw,
? ? ? ? ? ? ? ? ? ? height: sh,
? ? ? ? ? ? ? ? ? ? backgroundPosition: '0px ' + (-sh) + 'px'
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? mapEle.append(that._bg);
? ? ? ? ? ? ? ? this.startAnimate();
? ? ? ? ? ? ? ? //創(chuàng)建分?jǐn)?shù)
? ? ? ? ? ? ? ? that.score=$("<span class='score'>0</span>");
? ? ? ? ? ? ? ? mapEle.append(that.score);
};?2.用戶選擇飛機(jī)界面
this.createPage=function(){
? ? var that=this;
? ? ? ? ? ? ? ? that._userPage=$("<div class='user_check'></div>");
? ? ? ? ? ? ? ? that._userplane[0]=$("<div class='plane1'><img src='./img/my_1.png'></div>");
? ? ? ? ? ? ? ? that._userplane[1]=$("<div class='plane2'><img src='./img/my_2.png'></div>");
? ? ? ? ? ? ? ? that._userplane.map(function (item,index){
? ? ? ? ? ? ? ? ? ? !index?item.addClass("check"):'';//默認(rèn)第一個(gè)選中
? ? ? ? ? ? ? ? ? ? that._userPage.append(item);
? ? ? ? ? ? ? ? ? ? item.on("click",function(){
? ? ? ? ? ? ? ? ? ? ? ? //設(shè)置二選一
? ? ? ? ? ? ? ? ? ? ? ? $(this).addClass("check").siblings().removeClass("check");
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that._start = $("<button class='start'>開始</button>");
? ? ? ? ? ? ? ? that._start.on("click",function(){
? ? ? ? ? ? ? ? ? ? that._userplane.map(function(item,index){
? ? ? ? ? ? ? ? ? ? ? ? if(item.hasClass("check")){
? ? ? ? ? ? ? ? ? ? ? ? ? ? that._userPage.hide();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //開啟背景動(dòng)畫
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.startAnimate();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //獲取用戶選擇的飛機(jī)的圖片路徑
? ? ? ? ? ? ? ? ? ? ? ? ? ? that._userFeisrc=item.find("img").attr("src");
? ? ? ? ? ? ? ? ? ? ? ? ? ? that._plane.createUser(that._userFeisrc);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that._close = $("<button class='start'>關(guān)閉</button>");
? ? ? ? ? ? ? ? that._close.on("click",function(){
? ? ? ? ? ? ? ? ? ? //瀏覽器關(guān)閉
? ? ? ? ? ? ? ? ? ? window.close();
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? that._userPage.append(that._start);
? ? ? ? ? ? ? ? that._userPage.append(that._close);
? ? ? ? ? ? ? ? mapEle.append(that._userPage);
? ? ? ? ? ? }?3.設(shè)置背景循環(huán)
this.startAnimate=function(){
? ?var that=this;
? ? ? ? ? ? ? ? that._bg.animate({
? ? ? ? ? ? ? ? ? ? backgroundPositionY:0
? ? ? ? ? ? ? ? },5000,'linear').queue(function(){
? ? ? ? ? ? ? ? ? ? $(this).css({
? ? ? ? ? ? ? ? ? ? ? ? backgroundPosition:'0px '+(-sh)+'px'
? ? ? ? ? ? ? ? ? ? }).dequeue();
? ? ? ? ? ? ? ? ? ? that.startAnimate();
? ? ? ? ? ? ? ? });
? ? ? ? ? ? };?4.創(chuàng)建飛機(jī)
this.createUser=function(src){
? ? ?var that=this;
? ? ? ? ? ? ? ? that._user=$("<img class='user' src="+src+"/>");
? ? ? ? ? ? ? ? mapEle.append(that._user);
? ? ? ? ? ? ? ? that._user.css({
? ? ? ? ? ? ? ? ? ? top:sh,
? ? ? ? ? ? ? ? ? ? left: sw / 2 - 30
? ? ? ? ? ? ? ? }).animate({
? ? ? ? ? ? ? ? ? ? top:that.pos.top
? ? ? ? ? ? ? ? },1000,function(){
? ? ? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完成之后用戶開始操作
? ? ? ? ? ? ? ? ? ? console.log("開始觸屏");
? ? ? ? ? ? ? ? ? ? //給當(dāng)前飛機(jī)添加觸屏事件
? ? ? ? ? ? ? ? ? ? that.addTouch();
? ? ? ? ? ? ? ? ? ? //設(shè)置子彈幾發(fā)，并且開始發(fā)射
? ? ? ? ? ? ? ? ? ? that.gun();
? ? ? ? ? ? ? ? ? ? //敵機(jī)開始動(dòng)
? ? ? ? ? ? ? ? ? ? that.randomEnemy();
? ? ? ? ? ? ? ? });
? ? ? ? ? ? };?5.創(chuàng)建敵機(jī)
this.createEnemy = function () {
? ?var that = this;
? ? ? that.index = Math.floor(Math.random() * that.enemylist.length);
? ? ? var wrandom = Math.random() * sw;
? ? ? var ele = that.enemylist[that.index];//獲取當(dāng)前的敵機(jī)
? ? ? that.enemy = $("<img class='enemy'/>");
? ? ? mapEle.append(that.enemy);
? ? ? that.top = ele.direct == 'todown' ? -ele.h : sh + ele.h;
? ? ? that.left = wrandom - ele.w < 0 ? 0 : wrandom + ele.w > sw ? sw - ele.w : wrandom;
? ? ? that.w = ele.w;
? ? ? that.h = ele.h;
? ? ? that.enemy.css({
? ? ? ? ? ? ? ? ? ? width: that.w,
? ? ? ? ? ? ? ? ? ? height: that.h,
? ? ? ? ? ? ? ? ? ? left: that.left,
? ? ? ? ? ? ? ? ? ? top: that.top
? ? ? ? ? ? ? ? }).attr("src", ele.src);
? ? ? ? ? ? ? ? that.blood = ele.blood;
? ? ? ? ? ? ? ? that.score = ele.score;
? ? ? ? ? ? ? ? that.way = ele.direct;
? ? ? ? ? ? ? ? that.speed = ele.speed;
? ? ? ? ? ? ? ? //敵機(jī)移動(dòng)
? ? ? ? ? ? ? ? that.move();
? ? ? ? ? ? };?6.敵機(jī)移動(dòng)
this.move=function(){
? ? ? var that=this;
? ? ? ? ? ? ? ? if(that.way=="todown"){
? ? ? ? ? ? ? ? ? ? that.top+=that.speed;
? ? ? ? ? ? ? ? ? ? if(that.top>=sh){
? ? ? ? ? ? ? ? ? ? ? ? that.enemy.remove();
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? that.top-=that.speed;
? ? ? ? ? ? ? ? ? ? if(that.top<=0){
? ? ? ? ? ? ? ? ? ? ? ? that.enemy.remove();
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? that.enemy.css({
? ? ? ? ? ? ? ? ? ? top: that.top
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that.timer=setTimeout(function(args){
? ? ? ? ? ? ? ? ? ? args.move();
? ? ? ? ? ? ? ? },that.tspeed,that)
? ? ? ? ? ? }?7.設(shè)置敵機(jī)爆炸
this.blow = function (index) {
? ? var that = this;
? ?//開始爆炸
? ? that.blowool = true;
? ? that.enemy.remove();
? ?//加分
? ? ? ?allsc+=that.score;
? ? ? ? ? ? ? ? $(".score").text(allsc);
? ? ? ? ? ? ? ? //在原位置創(chuàng)建爆炸
? ? ? ? ? ? ? ? var b = $("<img class='blow' src='./img/blow.gif'/>");
? ? ? ? ? ? ? ? b.css({
? ? ? ? ? ? ? ? ? ? left: that.left,
? ? ? ? ? ? ? ? ? ? top: that.top,
? ? ? ? ? ? ? ? ? ? width: that.w,
? ? ? ? ? ? ? ? ? ? height: that.h
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? b.timer = setTimeout(function (arg) {
? ? ? ? ? ? ? ? ? ? arg.remove();
? ? ? ? ? ? ? ? }, 300, b)
? ? ? ? ? ? ? ? mapEle.append(b);
? ? ? ? ? ? ? ? allEnemy.splice(index, 1);
? ? ? ? ? ? };?8.創(chuàng)建子彈
this.createBullet=function(pos,left){
this._bullet = $("<img class='bullet' src='" + this.img + "'/>");
? ? ? ? mapEle.append(this._bullet);
? ? ? ? ? ? ? ? //設(shè)置當(dāng)前子彈的坐標(biāo)
? ? ? ? ? ? ? ? this.top = pos.top - 20;
? ? ? ? ? ? ? ? this.left = left - this.w / 2;
? ? ? ? ? ? ? ? this._bullet.css({
? ? ? ? ? ? ? ? ? ? width: this.w,
? ? ? ? ? ? ? ? ? ? height: this.h,
? ? ? ? ? ? ? ? ? ? left: this.left,
? ? ? ? ? ? ? ? ? ? top: this.top
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.move();
? ? ? ? ? ? }?9.檢測(cè)子彈的移動(dòng)（是否打到敵機(jī)）
this.move=function(){
?var that=this;
? ? ? ? ? ? ? ? that.top-=that.dus;
? ? ? ? ? ? ? ? if(that.top<=0){
? ? ? ? ? ? ? ? ? ? that._bullet.remove();
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //在子彈里面去檢測(cè) ?是否打到敵機(jī)
? ? ? ? ? ? ? ? that = that.checkEnemy();
? ? ? ? ? ? ? ? //檢測(cè)子彈如果為null ?直接出
? ? ? ? ? ? ? ? if (that == null)
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? that._bullet.css({
? ? ? ? ? ? ? ? ? ? top: that.top
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that.timer=setTimeout(function(args){
? ? ? ? ? ? ? ? ? ? args.move();
? ? ? ? ? ? ? ? },that.speed,that);
? ? ? ? ? ? };?10.設(shè)置敵機(jī)被消滅的情況
this.checkEnemy = function () {
var that = this;
?//left ?top
? ? ? ? ? ? ? ? for (var i = 0; i < allEnemy.length; i++) {
? ? ? ? ? ? ? ? ? ? var item = allEnemy[i];
? ? ? ? ? ? ? ? ? ? //檢測(cè)條件
? ? ? ? ? ? ? ? ? ? if (item.blowool == false && that.left + that.w >= item.left && that.left <= item.left + item.w && that.top <= item.top +
item.h && that.top + that.h >= item.top) {
? ? ? ? ? ? ? ? ? ? ? ? //開始血量減少
? ? ? ? ? ? ? ? ? ? ? ? item.blood -= 1;
? ? ? ? ? ? ? ? ? ? ? ? if (item.blood <= 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //敵機(jī)移除
? ? ? ? ? ? ? ? ? ? ? ? ? ? item.blow(i);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? //子彈移除
? ? ? ? ? ? ? ? ? ? ? ? that._bullet.remove();
? ? ? ? ? ? ? ? ? ? ? ? //移除子彈對(duì)象
? ? ? ? ? ? ? ? ? ? ? ? return null;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return that;
? ? ? ? ? ? }?以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能
這篇文章主要介紹了jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能，為了提高用戶的體驗(yàn)，很多網(wǎng)站都會(huì)實(shí)現(xiàn)郵箱輸入的自動(dòng)提示功能，對(duì)如何實(shí)現(xiàn)自動(dòng)提示功能感興趣的小伙伴們可以參考一下2015-11-11
基于jquery的無縫循環(huán)新聞列表插件,需要的朋友可以參考下。2011-03-03
jquery內(nèi)置驗(yàn)證(validate)使用方法示例(表單驗(yàn)證)
這篇文章主要介紹了jquery內(nèi)置驗(yàn)證(validate)使用方法示例,在做表單驗(yàn)證的時(shí)候可以用到，下面看代碼使用方法2013-12-12
jquery之超簡(jiǎn)單的div顯示和隱藏特效demo(分享)
本篇文章是對(duì)jquery中的div顯示和隱藏特效demo進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要詳細(xì)介紹了jQuery 處理頁面的事件的方法及相關(guān)資料,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對(duì)頁面高度計(jì)算與樣式的動(dòng)態(tài)添加及刪除技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
基于jquery的無限級(jí)聯(lián)下拉框js插件
首先聲明這2個(gè)無刷新級(jí)聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴(yán)格的測(cè)試，正確使用不會(huì)出現(xiàn)bug2011-10-10
JQuery自適應(yīng)窗口大小導(dǎo)航菜單附源碼下載
本文給大家分享jquery自適應(yīng)窗口大小導(dǎo)航菜單，也是一款響應(yīng)式的導(dǎo)航菜單，有深色樣式、淺色樣式、自定義樣式，接下來，需要的學(xué)習(xí)的小伙伴參考此文吧2015-09-09
JS中批量給元素綁定事件過程中的相關(guān)問題使用閉包解決
解決元素批量綁定事件的時(shí)候，出現(xiàn)i=最后一個(gè)循環(huán)變量的值的方法有兩種：把這個(gè)循環(huán)變量保存起來，不要讓它的作用域在整個(gè)函數(shù)，而是在循環(huán)體內(nèi)2013-04-04