2020年8月30日 星期日

pygame玩遊戲系列(4)~用鍵盤控制物件的移動

 前一篇談到了如何讓物件可以跟著滑鼠移動

但有時候我們會希望是透過鍵盤來控制遊戲中的物件啊~~例如:

按「→」按鍵,車子就往右走;按「←」按鍵,就往左走;按「↑」按鍵,就網上或跳一下...等等!尤其是一些射擊的遊戲可能還會加上發射子彈等控制需求!

所以呢~這次就跳脫滑鼠,換介紹一下如何透過鍵盤來控制遊戲中的物件移動!

為了「乾淨」起見~~我們先回到pygame玩遊戲系列(2)剛載入完圖片的狀態........

也就是回到腳踏車還不會移動的起始狀態,接下來是著思考看看:如何讓腳踏車能夠移動呢?

1.如何讓腳踏車像又(→)移動:在遊戲畫面中,一個物件(腳踏車)向右邊移動,就是讓腳踏車圖檔在畫面上繪製的座標(x軸,y軸)位置,向x軸的方向增加!

2.同樣的概念,若是想要讓車子往畫面的左邊(←)移動(也就是後退嚕啦~~),那就得想辦法讓圖檔的x軸減少囉!

~~那就程式方面的需求來看,也就是如何讓腳踏車圖檔的繪製位置可以透過改變座標中的x位置來達成移動的目標囉!

在前一篇我們是透過讀取滑鼠的位置,並將滑鼠座標的x軸作為腳踏車圖檔的x座標來改變腳踏車的位置,這次我們則是要透過偵測鍵盤動作來改變腳踏車圖檔的x座標位置!

所以這次的練習,著重二個重點:

1.在pygame中如何偵測鍵盤的動作?(是否按了鍵盤?按了甚麼按鍵?)

2.偵測到按了指定的按鍵(→或←)後,如何改變腳踏車出現的x座標

OK~~照慣例,先上程式碼再說(完整程式碼):

import pygame, sys
from pygame.locals import *

pygame.init()
bg = pygame.image.load("./imgs/bg-02.jpg")     #設定背景圖來源
car_img = pygame.image.load("./imgs/car6.png")    #設定要被控制的小車圖檔來源
screen = pygame.display.set_mode((500, 380))    #設定視窗資訊
pygame.display.set_caption('騎車春遊趣')       #設定視窗標題

car_x = 240 #設定腳踏車圖檔起始x座標位置

while True:   #主視窗循環
    screen.blit(bg, (0, 0))  # 設定視窗的背景圖片及相對位置
    for event in pygame.event.get():   #偵測視窗中獲取的事件資訊
        if event.type == QUIT:      #如果出現[關閉]事件(按了關閉視窗的按鈕)時
            pygame.quit()      #離開pygame
            sys.exit()      #離開系統

        if event.type == pygame.KEYDOWN:   #假如發生有鍵盤被按下的事件
            if event.key == pygame.K_LEFT:   #若按鍵盤事件的按鍵是←(向左)按鍵的話
                car_x = car_x - 2			#車子的x位置(car_x)就減2
            elif event.key == pygame.K_RIGHT:  #若按鍵盤事件的按鍵是→(向右)按鍵的話
                car_x = car_x + 2			#車子的x位置(car_x)就加2			

    screen.blit(car_img, (car_x, 270))  # 設定要被控制的小車出現起始位置
    pygame.display.update()    #更新視窗

其中都有每行程式碼的註解供參!

比較需要注意(補充說明)的應該就是:

2020年8月23日 星期日

pygame玩遊戲系列(3)~讓物件跟著滑鼠跑

 用設計遊戲學習程式並透過一些操作來釐清程式操作上的觀念相當實用、有趣!

個人喜歡一點一點、一步一步地藉由小小物件的操作及練習、思考來強化程式的操控及應用

並且透過這個過程去思考程式的可能性及應用面,不然說實在的~~學程式到底要幹嘛咧~~趕流行喔........無聊!

前面pygame玩遊戲系列(2)已經練習了如何將圖形物件載入到遊戲視窗了~~接下來可以做啥呢?

可以自己先想想或期望一下....車子會跑?會唱歌?會跳...等等(一定要自己有想法或期望啊)

這次呢~~個人練習目標是:讓視窗中的腳踏車會跟著滑鼠的動作進行「橫向」移動(就是前進、後退啦!)

要達成這目標,真的很簡單~~簡單到只要新增一行程式碼、小小修改一個座標參數即可!

在之前的基礎下~~~

只要新增一行、修改一個座標參數如下:

去執行看看~~會發現:那台腳踏車已經會跟著滑鼠的移動跑起來了~~~驚不驚訝、開不開心...呵!(學程式要有那種看到成果~~~大叫一聲~耶!的快樂啦....耶!)

=======================================================

完成之後來看一下:

在pygame中獲取滑鼠x,y座標位置的方法為:x, y = pygame.mouse.get_pos()

接著將小車在視窗上繪製的x座標,設定為滑鼠位置的x位置,這樣小車位置就會隨著滑鼠移動而前進或後退囉!(試試看~很好玩的!)

============================================

腦力激盪時間:

pygame玩遊戲系列(2)~圖片的載入及設定

 距離前一篇介紹pygame的基礎視窗架構介紹的紀錄居然又過了將近三個月~~時間真是快啊!

相對於上次只能顯示一個陽春到不知所云的視窗,這次就先針對如和設定背景圖、載入遊戲圖形元件等做初步介紹!

先看成果目標:

=====================================================

一樣先上程式碼的部分:

本次的程式部分,去除前一篇視窗基礎結構的部分,新增的部分主要只有程式碼中的:

5, 6, 8, 11, 17 這五行~~也就是這五行讓整個遊戲視窗繽紛美麗起來了!

現在就簡要記述一下相關內容:(其實每一行程式後方都有註解說明了)

2020年8月21日 星期五

解決python視覺化套件 Matplotlib無法顯示中文之方法

 Matplotlib是python相當受歡迎的視覺化套件

(安裝套件方式:pip install matplotlib)

但是呢~~在預設情形下,若圖表中的設定使用到中文的話,則會發生以下這種情形(Windows10環境)

也就是中文字無法正常呈現~~~挖咧~那就不要用中文嘛!(正解~誤,sorry)

所以看到很多網上或教學文章或範例都避免使用中文標籤,甚至有誤導成不能使用中文.....!

(事實上~~當然是可以的囉~~應該這樣才令人滿意嘛)

自己在之前剛接觸到Matplotlib時,為了解決這個中文顯示這令人困擾的問題~花了一些時間查閱Google大神的封神榜資料~~看到不少精彩的文章,被玩了好一陣子....呵!

後來總算釐清並總結自己覺得(強調囉~~是自己覺得喔!)最單純有效的方式如下:

→問題原因:簡單講就是Matplotlib預設的字型不支援中文嘛

所以呢~~~~

→解決方法:拿個中文字型去覆蓋掉他的預設字型就可以支援中文了啊

所以咧~~~我的作法就是將windows中系統的「標楷體」(kaiu.ttf)複製到Matplotlib的字型資料夾中,將其預設的字型「DejaVuSans.ttf」給取代掉即可!

2020年8月19日 星期三

簡單玩pythoin~~條碼(含一維及二維QR Code條碼)解碼小進化

 前面一篇介紹過如何將條碼解碼

其中有先談到pyzbar在解碼時,若是提供的圖檔其中含有多組條碼,pyzbar能夠將其都解碼出來,並將解碼結果以list方式呈現,那我們這次就以此為基礎,紀錄一下如何將內含多組條碼的圖檔解碼並print出來!

這次我們使用以下這組含有三張條碼的圖檔進行練習


有了之前的操作基礎,這次就直接進程式碼了~~~(其實程式碼還更精簡呢)

from PIL import Image
from pyzbar.pyzbar import decode #引入pyzbar解碼(decode)函式

results = decode(Image.open('multicode02.png'))
#圖檔中若包含多組qrcode碼,則可依序加以讀出顯示
for result in results:
print(result.data.decode('utf-8'))

===========================================================

(扣掉#註解的部分,只有五行~~哇,省!)

其中主要差異就是使用 for 迴圈,將解碼的結果依序print出來

有興趣的朋友可以下載上面那張圖檔,自行練習看看

讓prismjs.com幫你將部落格中的程式碼格式化

 最近正在重整與練習一些程式設計的文章

想起之前因為想要讓文章中的程式碼能夠加上行號、格式化,做了一些設定

發現東西久了沒整理,沒記錄下來~真的很容易遺忘,又要花一些時間回想與練習~很可惜

所以,趁著這次重新整理的機會~~趕緊將這部分的設定及操作整理出來!

======================================================================

要將部落格(以我使用的google blogspot說明)中的程式碼做相關設定,這裡推薦的是:

prismjs.com 這個網站

這個網站最主要的功能就是幫你設計並提供下載將程式碼格式化(如加上行號、顏色、語法高亮顯示等等)所需的js及css語法,讓你文章中的程式碼產生類似下方的效果:

=====================================================================

整個設定及操作可以整理為以下幾個步驟:

一、在https://prismjs.com/中設定格式化佈景主題、支援的程式語法、外掛功能

二、將上述設定完成產生的js及CSS二個檔案下載回來

三、進入部落格(google blogspot)的管理頁面將剛剛下載回來的js及CSS內容加入版面及主題設定之中,基本上就完成設定工作了!

四、以後寫文章中有需要格式化的程式碼,就切換進HTML檢視模式,在程式碼前後加上指定的語法即可!

以上各步驟的相關說明如下:

2020年8月18日 星期二

【OnCode大叔簡單玩python】系列~條碼(含一維及二維QR Code條碼)解碼

 前二篇記錄了如何簡單、快速製作QR Code二維條碼

既然談了製作條碼~~想必各位一定跟我一樣,馬上想知道如何將條碼圖檔解讀出來囉!

OK~~直接進入主題囉!

這次我們需要用到二個額外的package來幫助我們完成設計,分別是:

影像處理工具(PIL)  以及  條碼掃描(解碼)工具(pyzbar)

這二組工具都是python相當實用、強大的package

在進行程式編寫前,同樣的必須先將二組package安裝起來

→安裝PIL:pip install pillow  (特別注意是:pillow 喔)

→安裝pyzbar:pip install pyzbar

package安裝完成就可以開始進行程式編寫囉~~~

透過以下六~七行程式碼就可以編寫出一個解讀條碼的程式囉!

直接上程式碼:

2020年8月16日 星期日

【OnCode大叔簡單玩python】系列~QR Code製作小進化

 前一篇介紹如何簡單製作QR Code條碼

這次簡單進化一下~~如何讓QR Code條碼有一些些變化,並讓QR Code內容的設計有更多可能

首先本次目標:

1.讓QR Code條碼的顏色可以自由設定

2.讓QR Code條碼內容可以分段加入(方便日後讀取資料製作QR Code條碼之應用)

同樣的~~簡單玩就好~~所以也不摻雜太多不必要的設定及參數在其中

==============================================================

基本環境,從前一篇設定好了之後~本篇直接上程式碼

主要程式碼也僅有簡單的六行~~~

擇要簡單說明如下:

第3行:產生QR Code實體環境及設定(可以有其他的參數設定~這裡不談,用內定值即可)

第4~5行:分段添加QR Code條碼內容的方法(可以只有一行,當然也可以隨意繼續加)

第7行:設定QR Code條碼顏色的方法fill_color:條碼色彩 ; back_color:QR Code條碼背景色

結果如下:(可以掃一下~~看看效果)

好囉~~又講完囉!

(真是太簡單、簡短了~~真沒成就感啊...)

【OnCode大叔簡單玩python】系列~三行程式簡單完成QRCode二維條碼的製作

 既然是【簡單玩】那就不必一堆廢話了~~直接進主題!

QR Code是現在經常會看到、用到的一種條碼工具

這次就簡單紀錄一下如何使用python快速製作QR Code條碼並加以保存的方法!

=======================================

1.收先安裝製作QR Code條碼必要的lib:qrcode

安裝:pip install qrcode

2.安裝完qrcode模組後,打開python編輯器輸入以下三行程式碼就可以囉~~簡單!

簡單說明:

2020年8月1日 星期六

使用Notepad++批次搜尋取代網頁、程式內容

最近由於進行系統資料移轉
相關網頁或程式有關路徑或設定需要進行相關修改
這部分可能涉及相關設定檔或是網頁、程式中相關的修改
一個一個檔案的搜尋、修改~~肯定是場惡夢
而且很容易有【漏網之魚】的情形發生,造成系統或網站的運作疏失

所以,如何有效、快速的在指定目錄(資料夾)中針對所有的網頁、程式檔案進行搜尋並加以取代
就成為很重要的需求囉~~~

這次就跟各位分享:如何使用Notepad++這套好用的文字編輯軟體進行批次搜尋、取代功能

1.首先你當然得先到Notepad++網站去下載安裝他囉



2.點選功能表中「搜尋」→「在多個檔案中尋找」即可開啟該搜尋取代視窗