熱線電話:13121318867

登錄
首頁精彩閱讀程序員奶爸必修課——帶娃一起寫游戲
程序員奶爸必修課——帶娃一起寫游戲
2022-01-20
收藏

作者:太陽雪

來源:Python 技術

周末在家,兒子鬧著要玩游戲,讓玩吧,不利于健康,不讓玩吧,扛不住他折騰,于是想,不如一起搞個小游戲玩玩!

之前給他編過猜數字 和 擲骰子 游戲,現在已經沒有吸引力了,就對他說:“我們來玩個迷宮游戲吧?!?/span>

果不其然,有了興趣,于是和他一起設計實現起來,現在一起看看我們是怎么做的吧,說不定也能成為一個陪娃神器~

先一睹為快:

程序員奶爸必修課——帶娃一起寫游戲

構思

迷宮游戲,相對比較簡單,設置好地圖,然后用遞歸算法來尋找出口,并將過程顯示出來,增強趣味性。

不如想到需要讓孩子一起參與,選擇了繪圖程序 Turtle[1] 作為實現工具。

這樣就可以先在紙上繪制一個迷宮,然后編寫成代碼,讓 Turtle 去繪制,因為孩子用筆畫過,所以在實現代碼時,他可以充分參與,不僅是為了得到最終的游戲,而且更是享受制作過程,開發編程思維,說不定省了一筆不小的少兒編程費用哈哈哈~

首先和孩子一起制作迷宮,在紙上畫出 5 X 5 的小格子,然后,讓他在格子中畫一條通路,像這樣:

程序員奶爸必修課——帶娃一起寫游戲

繪制迷宮

然后,將這幅圖轉化為一個迷宮矩陣,用 1 表示墻,用 空格 表示通路,需要注意的是網格每條邊線都是墻,連通部分的墻需要打通,成為路。

這時可以和他一起來實現,比如讓他用自己的積木等擺設一個迷宮,而我們來做數字化轉化,最后轉化成的結果是:

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

如果孩子看不清楚,可以將路徑表示出來 哈哈哈:

1 1 1 1 1 1 1 1 1 1 1 ->_____ 1 _____ 1 1 1 1 1 1 | 1 | 1 | 1 1 1 1 ____| 1 | 1 |___ 1 1 | 1 1 1 | 1 1 1 | 1 1 |____ 1 | 1 ____| 1 1 1 1 | 1 | 1 | 1 1 1 1 ____| 1 | 1 |____ 1 1 | 1 1 1 | 1 1 1 | 1 1 |_______| 1 1 1 | 1 1 1 1 1 1 1 1 1 1|/1 

做完了迷宮數字化,就需要將迷宮在電腦上表示出來了。

繪制迷宮

之所以選擇 Turtle,就是因為它會像用筆做圖畫一樣,可以讓孩子充分參與。

找出一張紙,用剛才整理的迷宮數字化結果作為指導繪圖,遇到 1 就畫一個小方格,遇到 空格 就跳過,可以和孩子一起畫,主要是讓他體會過程中的規律。

好了,趁他繪制的時候,我們來實現繪制代碼吧。

首先需要知道 Turtle 的一些特點:

  1. Turtle 的初始坐標在屏幕中心,可以將屏幕分成平面坐標系的四個象限
  2. Turtle 畫筆默認的移動最小單位是一個像素,因此需要做坐標點的初始化
  3. Turtle 畫筆移動都是相對于筆尖的朝向的,因此需要特別注意筆尖朝向

實現的方式和孩子用筆畫是一樣的,從第一個格子畫起:

程序員奶爸必修課——帶娃一起寫游戲

效果

下面看看代碼:

def drawCenteredBox(self, x, y, color): self.t.up() self.t.goto(x - 0.5,    y - 0.5) self.t.color('black', color) self.t.setheading(90) self.t.down() self.t.begin_fill() for _ in range(4): self.t.forward(1) self.t.right(90) self.t.end_fill()
    update()
  • drawCenteredBox 是 迷宮類 Maze 的成員方法,self 指的就是迷宮類本身,可以暫時將其理解為全局變量
  • self.t 是一個 Turtle 模塊實例,可以理解成畫筆
  • up 方法表示抬起筆尖
  • goto 方法的作用是移動到指定的位置,這里需要移動到指定位置的左下角,所以各自減去了 0.5(這里做了坐標值轉化,后面會有說明)
  • color 表示設置顏色,兩個參數分別是筆的顏色和填充顏色
  • setheading 表示讓筆尖朝上,即將筆尖朝向 90 度
  • down 表示落下筆尖,意思是隨后的移動相當于繪制
  • begin_fill 表示準備填充,也就是它會把從調用起到調用 end_fill 為止所繪制的區域做填充
  • 然后是循環四次,用來繪制方格,循環內,每次向前(筆尖朝向)繪制一個單位,向右轉 90 度,這樣就繪制好了一個方格
  • end_fill 即為填充當前繪制的方格
  • update 表示更新一下繪圖區域

看看這個過程,是不是和孩子手工繪制一模一樣!

現在遍歷整個迷宮矩陣,不斷調用 drawCenteredBox 就可以繪制出迷宮了:

程序員奶爸必修課——帶娃一起寫游戲

效果

代碼如下:

def drawMaze(self): for y in range(self.rowsInMaze): for x in range(self.columnsInMaze): if self.mazelist[y][x] == 1: self.drawCenteredBox(x + self.xTranslate, -y + self.yTranslate, 'tan')
  • rowsInMaze、columnsInMaze 表示迷宮矩陣的行和列
  • tan 為沙漠迷彩色[2]的顏色名稱

走出迷宮

迷宮繪制好了,如何走出出呢?

可以先問問孩子,讓他想想辦法。

實現思路也很簡單,就是超一個方向走,如果是墻,就換一個方向,如果不是墻,就繼續走下去,如此往復……

但是,這里可以和孩子做個預演,比如迷宮很大的時候,記不住走過哪些路怎么辦?

探索了一條路,走不通,返回后,不記得走過哪些路,這是非常危險的事情,如果有種方法可以記住走過的路,就好了。

這里我給兒子講了一下忒修斯大戰牛頭怪[3]的古希臘神話傳說,啟發他想出好的方法。

如何用代碼實現呢,只要在迷宮矩陣種,標記一下走過的路就可以了:

PART_OF_PATH = 0 OBSTACLE = 1 TRIED = 3 DEAD_END = 4 def search(maze, startRow, startColumn):  # 從指定的點開始搜索 if maze[startRow][startColumn] == OBSTACLE: return False if maze[startRow][startColumn] == TRIED: return False if maze.isExit(startRow, startColumn): maze.updatePosition(startRow, startColumn, PART_OF_PATH) return True maze.updatePosition(startRow, startColumn, TRIED) found = search(maze, startRow-1, startColumn) or 
            search(maze, startRow, startColumn-1) or 
            search(maze, startRow+1, startColumn) or 
            search(maze, startRow, startColumn+1) if found: maze.updatePosition(startRow, startColumn, PART_OF_PATH) else: maze.updatePosition(startRow, startColumn, DEAD_END) return found 

因為使用了遞歸方式,所以代碼比較簡短,我們來看看:

  • PART_OF_PATH、OBSTACLE、TRIED、DEAD_END 是四個全局變量,分別表示迷宮矩陣中的通路,墻,探索過的路和死路
  • search 方法用于探索迷宮,接受一個迷宮對象,和起始位置
  • 然后看看指定的位置是否為墻、或者是走過的,以及是否是出口
  • 然后繼續探索,講指定的位置標記為已走過
  • 接下來朝四個方向探索,分別是像西、向東、向南、向北
  • 每個方向的探索都是遞歸的調用 search 方法
  • 如果探索的結果是找到了出口,就將當前的位置標記為路線,否則標記為死路

這里還需要看看 updatePosition 方法的實現:

def updatePosition(self, row, col, val=None): if val: self.mazelist[row][col] = val self.moveTurtle(col, row) if val == PART_OF_PATH: color = 'green' elif val == OBSTACLE: color = 'red' elif val == TRIED: color = 'black' elif val == DEAD_END: color = 'red' else: color = None if color: self.dropBreadcrumb(color) def moveTurtle(self, x, y): self.t.up() self.t.setheading(self.t.towards(x+self.xTranslate, -y+self.yTranslate)) self.t.goto(x+self.xTranslate, -y+self.yTranslate) def dropBreadcrumb(self, color): self.t.dot(color)
  • updatePosition 方法本身不復雜,首先對迷宮矩陣做標記,然后將筆尖移動到指定的點,之后判斷標記的值,在指定的點上畫點
  • 移動的方法是 moveTurtle,首先抬起筆尖,然后將筆尖轉向將要移動過去的點
  • Turtle 的 towards 方法會計算一個筆尖當前點到指定點之間的一個夾角,作用是讓筆尖轉向要移動過去的點,其中 xTranslate 和 yTranslate 是在坐標系中像素點的偏移量(后面會有說明)
  • Turtle 的 dot 方法作用是繪制一個點

看一下效果:

程序員奶爸必修課——帶娃一起寫游戲

走出迷宮

更大的挑戰

當孩子看到自己做的迷宮,被小烏龜走出來時,別提有多開心了。

不過,沒多久,他就想要更復雜的迷宮,有多條分支的迷宮。

顯然有手工的方式有點困難,而且無趣。需要讓程序自動生成迷宮。

本來想大干一場,突然想到之前 豆豆 寫的一篇關于迷宮文章[4],找來一看,剛好有迷宮生成算法,太好了。

關于如何動態生成迷宮,請參加 豆豆的文章,其中有詳細說明

分析代碼之后,將其中的迷宮類移植過來,生成的結果之間導入到筆者寫的迷宮類中,將迷宮規模設置為 100 X 100,震撼了:

程序員奶爸必修課——帶娃一起寫游戲

巨型迷宮

看著小烏龜在巨大的迷宮中蹣跚,還有種莫名的悲傷~

有了有了迷宮生成工具,就很多好玩的了:

  • 如何讓烏龜更快的找到出路
  • 如何讓烏龜隨機出現在迷宮中
  • 如何動態設置迷宮的出入口
  • ……

對這些問題,我們一一做了實現,孩子在整個過程中,積極參與,時不時因為好的想法而手舞足蹈,不亦樂乎……

感興趣的讀者可以回復關鍵字,獲得源碼,研究一下解決方案,期待與你交流。

關于坐標系設置

前面留了幾個坑,是關于 Turtle 坐標系的,這里統一做下說明。

第一個問題,坐標單位

默認情況下,Turtle 的坐標單位是一個像素,如果要放大顯示的華,需要計算出來我們使用的單元相當于多少個像素,然后每次計算坐標時都得考慮到這個值,當現實區域發生變化時還得調整這個數值,非常麻煩,而且容易出錯。

所以 Turtle 提供了一個設置我們自己坐標單位的方法 setworldcoordinates,它接受四個參數,分別是坐標系中,左下角的點 x坐標,y坐標,和 右上角的 x坐標、y坐標。

如果將左下角設置為 (-5, -5),右上角設置為 (5, 5),那么 Turtle 就會將坐標原點設置在屏幕中心,并將屏幕分割成 10 X 10 的方塊,每個塊的邊長,相當于一個坐標單位,也就是說,當我們說將筆尖移動到 (3, 4) 這個坐標點時,Turtle 就會從屏幕中心向右移動三個單位,再向上移動4個單位。

這樣就非常方便了,無論屏幕大小如何,像素大小如何,Turtle 都會按照我們的指令,做出正確的響應。

另一個問題是 兩個偏移量 xTranslate和 yTranslate

分別是這樣計算得到的:

self.xTranslate = -columnsInMaze/2 self.yTranslate = rowsInMaze/2 

存在的意義就是從行和列值中,轉化為 Turtle 坐標系的值,比如行列表示法中,(0, 0) 點,在我們變換后的 10 X 10 的坐標系中,對應的坐標點是 (-5, 5)。

因為我們查找數據時用行列表示法比較方便,但在坐標系中,以原點為基準表示比較方便。

總結

好了,關于 Turtle 實現的迷宮就介紹到這里,只是簡單說明了實現思路,和孩子的互動,代碼實現中還要需要細節和問題,限于篇幅,沒有展開,有興趣的讀者可以下載源碼,自己跑跑試試,也許還要更好玩的想法,歡迎在評論去交流。

我們學習代碼不僅可以用來解決問題,完成工作,更多的時候還可以用了娛樂和陪伴孩子,在這個過程中,給予孩子的不僅僅是陪伴,還要處理問題的方式,以及生活的態度。

數據分析咨詢請掃描二維碼

若不方便掃碼,搜微信號:CDAshujufenxi

數據分析師資訊
更多

OK
客服在線
立即咨詢
日韩人妻系列无码专区视频,先锋高清无码,无码免费视欧非,国精产品一区一区三区无码
客服在線
立即咨詢