jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-5(完成)

  •  
  •  
  •  
  •  

此篇第五章是吃金幣遊戲的最後一個教學,要將金幣加入遊戲畫面,並且跟角色碰撞時,可以增加分數,並且移除自己。

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

製作範例沿用前章的範例,未看完前四章的,請先看前四章喔 jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4

增加吃金幣功能。

請先預覽試玩看看,此篇章會教學放入金幣,並且與角色碰撞後可以增加分數。

放入金幣的HTML

這次遊戲範例用了22個金幣,因為會有22個金幣的HTML。

<div class="stage-coinBase"> <!--金幣-->
            <ul> 
                <li class="c1">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c2">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c3">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c4">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c5">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c6">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c7">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c8">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c9">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c10">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c11">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>


                <li class="c12">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c13">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c14">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c15">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c16">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c17">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c18">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c19">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c20">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c21">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c22">  <img src="   https://designcode.today/wp-content/uploads/2020/09/coin-1.gif">   </li>

            </ul>
            
        </div> 

金幣的CSS

因為有22個金幣,每個金幣位置會不同,因此會有.c1~.c22的位置CSS。

.stage-coinBase  { position: absolute; top: 0; left: 0; width: 2000px; height:500px;
    background: rgba(255,0,0,0.0); ; z-index: 4;  }

.stage-coinBase ul { position: relative; top:0; left: 0; width: 100%; height: 100%;
 border:0px dotted red; }   

.stage-coinBase ul li { position: absolute; width: 40px; height: 40px;  }
.stage-player { position: absolute; top: 300px; left: calc(50% - 30px);  width: 50px; height: 100px; background:; z-index: 10; }

.stage-score { position: absolute; top:0; left: 0; width: 100%;  font: 50px /50px "arial"; color: #fff200 ; text-align: center; z-index: 6; background: rgba(0,0,0,0.5); }


.stage-coinBase  { position: absolute; top: 0; left: 0; width: 2000px; height:500px;background: rgba(255,0,0,0.0); ; z-index: 4;  }
.stage-coinBase ul { position: relative; top:0; left: 0; width: 100%; height: 100%; border:0px dotted red; }   
.stage-coinBase ul li { position: absolute; width: 40px; height: 40px; list-style: none;  }
.c1 { top:250px; left: 350px }  
.c2 { top:230px; left: 400px }  
.c3 { top:210px; left: 450px }  
.c4 { top:190px; left: 500px }  
.c5 { top:170px; left: 550px }  
.c6 { top:150px; left: 600px }  
.c7 { top:170px; left: 650px }  
.c8 { top:190px; left: 700px }  
.c9 { top:210px; left: 750px }  
.c10 { top:230px; left: 800px } 
.c11 { top:250px; left: 850px } 
.c12 { top:250px; left: 1000px }    
.c13 { top:230px; left: 1050px }    
.c14 { top:250px; left: 1100px }    
.c15 { top:180px; left: 1200px }    
.c16 { top:180px; left: 1250px }    
.c17 { top:250px; left: 1400px }    
.c18 { top:200px; left: 1450px }    
.c19 { top:150px; left: 1550px }    
.c20 { top:200px; left: 1600px }    
.c21 { top:200px; left: 1700px }    
.c22 { top:200px; left: 1750px } 

金幣的javaScript

首先請先將金幣的父層加入變數,方便js內使用。

var coinBase = $(".stage-coinBase");

接下來也要為金幣的父層coinBase跟背景一樣加入移動。在floorMov()的函式內加入以下:

var nowL = parseInt(coinBase.css("left").replace("px"), "");
        if (nowL > -1600) {
            coinBase.css({
                "left": nowL - (speed / 2.5)
            });
        };

jQuery碰撞偵測

最後要為角色跟金幣加入碰撞偵測,如果碰到了,表示吃到金幣。我們用下圖解試如何了解物件碰到。

jQuery 遊戲製作教學

角色總共有四個點,這四個位置取得數值分別是:

  • A1 = left
  • A2 = left + width
  • B1 = top
  • B2 = top + height

而金幣我們只有取兩點位置,分別位於頂部的兩點:

  • C1 = left
  • C2 = top

因此我們就可以知道

(A1 < C1 && C1 < A2 && B1 < C2 && C2 < B2 ) 就表示角色跟金幣碰到了。

jQuery 遊戲製作教學

我們將以下碰撞用的函式加入start()內

function checkPos() { //角色色與錢幣碰撞測試  
        $(".stage-coinBase li").each(function() {
 //每一個錢幣都執行以下動作
            var a1 = player.offset().top;
 //抓出A1點數值
            var a2 = a1 + player.height();
 //抓出A2

            var b1 = player.offset().left;
 //抓出B1點數值
            var b2 = b1 + player.width();
 //抓出B2點數值

 
            var c1 = $(this).offset().top;
 //抓出C1點數值
            var c2 = $(this).offset().left;
 //抓出C2點數值

            if (a1 < c1 &amp;&amp; c1 < a2 &amp;&amp; b1 < c2 &amp;&amp; c2 < b2) {
                $(this).remove();
                score.text(parseInt(score.text()) + 1)
            };
        });
    };

並且將偵測碰撞的函式加在 floorMov(); 跟 playerMov(); 之後,讓背景、金幣、角色都移動一次後,再偵測是否有碰撞。

await floorMov();
await playerMov();
await checkPos();

大功告成!!

以上五個章節全部結束囉,如果製作失敗的,請往前慢慢檢查。或者請看以下範例,比照一下喔!

整個系列回顧

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-5(結束)

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

發表迴響

Up ↑