2015年3月6日 星期五

[教學] PHP & MySQL 學習筆記 第三堂(抽卡遊戲製作)


第三堂課,延續前一堂課所使用的圖片,主要目標是要寫一個抽卡遊戲,電腦會從5張卡中隨機選一張牌,我們也選一張,如果選中一樣的就算贏了(怎麼聽起來有點無聊!?)


為了要達到這個目標,我們有兩個主要的學習目標:
1.在同一個網址呈現兩個不同的畫面
2.使用if函數,讓電腦判斷兩張圖片是否相同

本次所學習到的PHP語法包含:

$_GET[ ]:讀取網誌中?後變數的值
if( ){ }:如果
isset( ):如果有資料
在同一個網址呈現兩個不同的畫面
首先,我們要學習,在同一個網址呈現兩個不同的畫面
這是什麼意思呢?
我們舉mobile01的網站為例,大家有沒有發現下面這兩個網址的開頭都是一樣的(topicdetail),只是後面是由兩個不同的變數所組成(f=000&t=000)



透過php,我們就可以做到,而且在還蠻簡單的。

我們先建立兩個不同的php檔,分別是p3-1和p3-2

在3-1這個php檔中,我們要建立連結,連到p3-2,建立連結的方式,一樣透過DW直接產生超連結即可。

建立連結的方式如下:
現打一段文字,選起來,然後按下方的「重新整理」

接著點下方資料夾的圖示,選擇P3-2這個檔案

 最後DW就會幫我們產生一段超連結的程式碼了

接著,為了要達到能在同一個網址呈現不同的頁面,我們要改一下超連結的語法
在原本的超連結後面加上「?id=301789」?後面的東西是可以自己修改的,例如,可以不要叫id,也可以不要是那一串數字,

接著,我們再加上一段,這次是連到id=301790

這時候,打開p3-1的網頁,應該就會看到如下的畫面


只是現在點下去,兩頁都是空白的,我們不知道是否有成功。
因此,現在我們要讓p3-2能夠呈現出文字,測試我們的連結是否有成功。
打開p3-2,加上這段程式碼「echo $_GET['id'];」,這段程式碼的意思是要取的id這個變數的內容,打好後存檔,我們就能來測試了。

原成後,點進去連結,我們就可以分別看到這兩個網頁,這兩個網頁的網址開頭是一樣的,但會呈現出不同的內容:

卡片遊戲製作
接下來,我們就要用到上一堂課所學的隨機函數,來建立一個抽卡遊戲,如果和電腦抽到同一張卡就是成功。

1.插入圖片

我們先建立一個新的php檔(p4),然後從DW當中,我們可以透過設計,直接進行網頁的編輯:
先移到「設計的欄位」,這裡我們可以像word一樣,直接編輯我們的網頁,而不用編輯程式碼
輸入文字,並且選擇置中

插入圖片

2.插入隨機函數

 接著,加上我們上堂練習的隨機函數,讓圖片的呈現變成隨機的。


3.根據我們所選的牌呈現圖片

下一步,我們則要學著寫怎麼樣抽牌,也就是我們可以選,我們要的牌,然後看看和電腦隨機挑出的一不一樣。

這裡,我也把醜比頭的小圖案都抓下來

分別把它們插入網頁當中,完成後就像這樣子:
 這時候,如果你直接把圖片插入,你會發現圖片之間沒有空格,這時候我們需要用到一個html語法:「&nbsp」,這是表示空格的意思。

接下來的部分就比較難了,我們要讓網頁能夠根據我們所選的醜比頭,就呈現出相對應的圖形,這時候需要用到我們稍前所學到的技巧。

首先,要先將每張圖片建立超連結,可以用DW的連結功能直接建立,也可以用html的方式撰寫語法。
連結的建立則要輸入「檔名.php?n=1」,n是自己可以建立的變數,但是後面的數字一定要是圖檔的檔名!

分別將其他張圖片也建立連結,其他張圖片同樣是使用變數n,但後面的數字要不同。
完成的程式碼如下:

接著,就要撰寫程式碼,請網站根據我們所按的圖片,跑到指定的連結(也就是呈現所選的圖片)。
同樣先插入一張圖片

接著要撰寫程式碼,要讓這張圖片能夠根據下面我們所點選的圖片來改變:

加上這一段的意思,就是要建立一個變數叫做「my」,而my的內容就會是下面建立的n,如果我點的是最左邊的連結,那麼就會是n=1,最右邊的那個,就會是n=6;接著圖片就會根據這裡讀取到的n,讀取所需的圖片。

做到這一步,如果沒有問題的話,照理來說,現在只要點所選的圖片,上面的「我方」這邊,就會跑出相對應的圖片了喔!

4.判斷所選的圖與電腦呈現的是否相同

最後一步,就是要讓電腦判斷,我們的圖片和電腦的圖片一不一樣,這一樣需要透過撰寫程式碼來判斷:

先在DW中「設計」的版面,加上結果這些字:

接著開始撰寫語法來判斷:
這裡要使用if語法:if(){},()內是若成立,則執行{}。

5.網站編修

最到這一步其實已經大功告成了,只是我們會發現,一進入網站的時候,會有破圖的現象,另外,沒有結果,卻也顯示出了結果,因此這裡我們要在做一些編修。
要編修的話,我們要利用一個函數是isset,意思是「有設定值」,我們要合併上if指令,告訴它說如果...有設定值,則在顯示,寫法如下:

意思是,如果my這個變數有資料,則在顯示出圖片(my如果有資料,表示看網頁的人,有點了其中一張圖)

在結果的地方,也進行類似的修改
做到這裡就大功告成,
大家可以看看完成的成果喔!

以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share: