jQuery實現(xiàn)飛機大戰(zhàn)游戲

更新時間：2022年05月09日 09:19:10 作者：南初?

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、效果圖

二、核心代碼

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(){
? ? ? ? ? ? ? ? ? ? ? ? //設(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();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //開啟背景動畫
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.startAnimate();
? ? ? ? ? ? ? ? ? ? ? ? ? ? //獲取用戶選擇的飛機的圖片路徑
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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)建飛機

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();
? ? ? ? ? ? ? ? ? ? //設(shè)置子彈幾發(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.設(shè)置敵機爆炸

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è)置當前子彈的坐標
? ? ? ? ? ? ? ? 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.設(shè)置敵機被消滅的情況

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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: