jQuery實現(xiàn)飛機大戰(zhàn)游戲
更新時間：2022年05月09日 09:19:10 作者：南初?
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)飛機大戰(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)建分數(shù)
? ? ? ? ? ? ? ? that.score=$("<span class='score'>0</span>");
? ? ? ? ? ? ? ? mapEle.append(that.score);
};?2.用戶選擇飛機界面
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"):'';//默認第一個選中
? ? ? ? ? ? ? ? ? ? that._userPage.append(item);
? ? ? ? ? ? ? ? ? ? item.on("click",function(){
? ? ? ? ? ? ? ? ? ? ? ? //設置二選一
? ? ? ? ? ? ? ? ? ? ? ? $(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();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //開啟背景動畫
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.startAnimate();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //獲取用戶選擇的飛機的圖片路徑
? ? ? ? ? ? ? ? ? ? ? ? ? ? that._userFeisrc=item.find("img").attr("src");
? ? ? ? ? ? ? ? ? ? ? ? ? ? that._plane.createUser(that._userFeisrc);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that._close = $("<button class='start'>關閉</button>");
? ? ? ? ? ? ? ? that._close.on("click",function(){
? ? ? ? ? ? ? ? ? ? //瀏覽器關閉
? ? ? ? ? ? ? ? ? ? window.close();
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? that._userPage.append(that._start);
? ? ? ? ? ? ? ? that._userPage.append(that._close);
? ? ? ? ? ? ? ? mapEle.append(that._userPage);
? ? ? ? ? ? }?3.設置背景循環(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)建飛機
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(){
? ? ? ? ? ? ? ? ? ? //動畫執(zhí)行完成之后用戶開始操作
? ? ? ? ? ? ? ? ? ? console.log("開始觸屏");
? ? ? ? ? ? ? ? ? ? //給當前飛機添加觸屏事件
? ? ? ? ? ? ? ? ? ? that.addTouch();
? ? ? ? ? ? ? ? ? ? //設置子彈幾發(fā)，并且開始發(fā)射
? ? ? ? ? ? ? ? ? ? that.gun();
? ? ? ? ? ? ? ? ? ? //敵機開始動
? ? ? ? ? ? ? ? ? ? that.randomEnemy();
? ? ? ? ? ? ? ? });
? ? ? ? ? ? };?5.創(chuàng)建敵機
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];//獲取當前的敵機
? ? ? 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;
? ? ? ? ? ? ? ? //敵機移動
? ? ? ? ? ? ? ? that.move();
? ? ? ? ? ? };?6.敵機移動
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.設置敵機爆炸
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);
? ? ? ? ? ? ? ? //設置當前子彈的坐標
? ? ? ? ? ? ? ? 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.檢測子彈的移動（是否打到敵機）
this.move=function(){
?var that=this;
? ? ? ? ? ? ? ? that.top-=that.dus;
? ? ? ? ? ? ? ? if(that.top<=0){
? ? ? ? ? ? ? ? ? ? that._bullet.remove();
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //在子彈里面去檢測 ?是否打到敵機
? ? ? ? ? ? ? ? that = that.checkEnemy();
? ? ? ? ? ? ? ? //檢測子彈如果為null ?直接出
? ? ? ? ? ? ? ? if (that == null)
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? that._bullet.css({
? ? ? ? ? ? ? ? ? ? top: that.top
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? that.timer=setTimeout(function(args){
? ? ? ? ? ? ? ? ? ? args.move();
? ? ? ? ? ? ? ? },that.speed,that);
? ? ? ? ? ? };?10.設置敵機被消滅的情況
this.checkEnemy = function () {
var that = this;
?//left ?top
? ? ? ? ? ? ? ? for (var i = 0; i < allEnemy.length; i++) {
? ? ? ? ? ? ? ? ? ? var item = allEnemy[i];
? ? ? ? ? ? ? ? ? ? //檢測條件
? ? ? ? ? ? ? ? ? ? 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) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //敵機移除
? ? ? ? ? ? ? ? ? ? ? ? ? ? item.blow(i);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? //子彈移除
? ? ? ? ? ? ? ? ? ? ? ? that._bullet.remove();
? ? ? ? ? ? ? ? ? ? ? ? //移除子彈對象
? ? ? ? ? ? ? ? ? ? ? ? return null;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return that;
? ? ? ? ? ? }?以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jquery實現(xiàn)郵箱自動填充提示功能，為了提高用戶的體驗，很多網(wǎng)站都會實現(xiàn)郵箱輸入的自動提示功能，對如何實現(xiàn)自動提示功能感興趣的小伙伴們可以參考一下2015-11-11
基于jquery的無縫循環(huán)新聞列表插件,需要的朋友可以參考下。2011-03-03
jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
這篇文章主要介紹了jquery內(nèi)置驗證(validate)使用方法示例,在做表單驗證的時候可以用到，下面看代碼使用方法2013-12-12
本篇文章是對jquery中的div顯示和隱藏特效demo進行了詳細的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要詳細介紹了jQuery 處理頁面的事件的方法及相關資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實現(xiàn)仿百度帖吧頭部固定導航效果,涉及jquery針對頁面高度計算與樣式的動態(tài)添加及刪除技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
利用jQuery操作對象數(shù)組的實現(xiàn)代碼
利用jQuery操作對象數(shù)組的實現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
首先聲明這2個無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴格的測試，正確使用不會出現(xiàn)bug2011-10-10
本文給大家分享jquery自適應窗口大小導航菜單，也是一款響應式的導航菜單，有深色樣式、淺色樣式、自定義樣式，接下來，需要的學習的小伙伴參考此文吧2015-09-09
解決元素批量綁定事件的時候，出現(xiàn)i=最后一個循環(huán)變量的值的方法有兩種：把這個循環(huán)變量保存起來，不要讓它的作用域在整個函數(shù)，而是在循環(huán)體內(nèi)2013-04-04