python tkinter實現俄羅斯方塊基礎版——一、基礎界面

本教程爲我在b站投稿的視頻教程av81480858 對應的文字版,項目最終效果見投稿簡介部分,視頻部分講解的比較詳細,覺得文字版不夠詳細的可以去看視頻。

本項目最終代碼已上傳github: https://github.com/BigShuang/Tetris 的1_BASIC文件夾
。其中1234分別對應本項目教程每一部分的最終代碼,所以想看完整代碼直接看004.py就好。

本項目通過python自帶庫tkinter實現,無需安裝第三方庫
本項目基於python3版本開發(如果你的是python2.x,運行可能會有問題)

總目錄

一、基礎界面

二、界面動起來

三、生成、移動、固定、消除

四、消除與得分

======================= 大爽歌作,made by big shuang =======================

一、基礎界面

1、搭建基礎窗體

使用tkinter庫實現基礎窗體,不加入任何功能只需如下三行代碼

import tkinter as tk
 
win = tk.Tk()
win.mainloop()

運行代碼生成的窗口如下
在這裏插入圖片描述
接下來我們需要在窗體裏面,添加一個畫布容器用來“裝”俄羅斯方塊,就是讓這個畫布作爲面板,俄羅斯方塊的移動和繪製均在這個畫板上實現。

這裏我們設定一些俄羅斯方塊遊戲參數

  • 行數爲R(取20)
  • 列數爲C(取12)
  • 俄羅斯方塊的邊長爲cell_size(取30)

通過tkinger的畫布類Canvas實現的代碼如下

import tkinter as tk
 
cell_size=30
C = 12
R = 20
height = R*cell_size
width = C*cell_size
 
win = tk.Tk()
canvas = tk.Canvas(win, width=width, height=height)
canvas.pack()
 
win.mainloop()

此時界面的長寬就變成我們所需要的了
接下來在畫板上繪製俄羅斯方塊空白位
首先建立一個函數draw_cell_by_cr,用於在畫板上繪製單個俄羅斯方塊
然後建立一個函數draw_blank_board,用於在畫板上繪製所有空白方塊(也就是空白方塊板,爲了和背景區分,所以設置空白方塊爲輕灰色)
此時整體代碼如下:

import tkinter as tk
 
cell_size = 30
C = 12
R = 20
height = R * cell_size
width = C * cell_size
 
 
def draw_cell_by_cr(canvas, c, r, color="#CCCCCC"):
    """
    :param canvas: 畫板,用於繪製一個方塊的Canvas對象
    :param c: 方塊所在列
    :param r: 方塊所在行
    :param color: 方塊顏色,默認爲#CCCCCC,輕灰色
    :return:
    """
    x0 = c * cell_size
    y0 = r * cell_size
    x1 = c * cell_size + cell_size
    y1 = r * cell_size + cell_size
    canvas.create_rectangle(x0, y0, x1, y1, fill=color, outline="white", width=2)
 
 
# 繪製空白麪板
def draw_blank_board(canvas):
    for ri in range(R):
        for ci in range(C):
            draw_cell_by_cr(canvas, ci, ri)
 
 
win = tk.Tk()
canvas = tk.Canvas(win, width=width, height=height, )
canvas.pack()
 
draw_blank_board(canvas)
 
win.mainloop()

此時運行代碼生成的窗口如下
在這裏插入圖片描述

2、繪製o形俄羅斯方塊

先從最簡單的o型俄羅斯方塊(即田字格,如下圖)
在這裏插入圖片描述
我們先要記錄每各形狀所有格子的座標
以格子所在行序號爲縱座標,所在列序號爲橫座標
以田字格中點爲原點,則o型俄羅斯方塊的四個格子的座標如下圖所示
在這裏插入圖片描述
用列表和元組記錄爲

[
    (-1, -1),
    (0, -1),
    (-1, 0),
    (0, 0)
]

我們將俄羅斯方塊形狀字符串和座標列表的映射關係存到字典SHAPES裏(映射關係這裏可以理解爲一一對應的關係)
同時建立一個字典SHAPESCOLOR,來記錄俄羅斯方塊形狀字符串和顏色的一一對應關係。
由於一個形狀可以看成多個方格組成的,所以我們可以新建函數draw_cells用來繪製這個形狀
最後選擇一個地方來繪製這個形狀。

# 定義形狀
SHAPES = {
    "O": [(-1, -1), (0, -1), (-1, 0), (0, 0)],
}
 
# 定義形狀的顏色
SHAPESCOLOR = {
    "O": "blue",
}
 
def draw_cells(canvas, c, r, cell_list, color="#CCCCCC"):
    """
    繪製指定形狀指定顏色的俄羅斯方塊
    :param canvas: 畫板
    :param r: 該形狀設定的原點所在的行
    :param c: 該形狀設定的原點所在的列
    :param cell_list: 該形狀各個方格相對自身所處位置
    :param color: 該形狀顏色
    :return:
    """
    for cell in cell_list:
        cell_c, cell_r = cell
        ci = cell_c + c
        ri = cell_r + r
        # 判斷該位置方格在畫板內部(畫板外部的方格不再繪製)
        if 0 <= c < C and 0 <= r < R:
            draw_cell_by_cr(canvas, ci, ri, color)
 
 
# 下面這行代碼放在draw_blank_board(canvas) 下面
# 任取一個位置,如(3,3)繪製一個o型俄羅斯方塊,用於展示
draw_cells(canvas, 3, 3, SHAPES['O'], SHAPESCOLOR['O'])
# 上面這行代碼放在win.mainloop()上面

此時運行代碼生成的窗口如下
在這裏插入圖片描述

3、其他俄羅斯方塊

俄羅斯方塊主流分七種,除去上面的O型,其他六俄羅斯方塊如圖所示
在這裏插入圖片描述
對應的,要在SHAPES和SHAPESCOLOR中添加其他方塊的座標和顏色,添加後如下

SHAPES = {
    "Z": [(-1, -1), (0, -1), (0, 0), (1, 0)],
    "O": [(-1, -1), (0, -1), (-1, 0), (0, 0)],
    "S": [(-1, 0), (0, 0), (0, -1), (1, -1)],
    "T": [(-1, 0), (0, 0), (0, -1), (1, 0)],
    "I": [(0, 1), (0, 0), (0, -1), (0, -2)],
    "L": [(-1, 0), (0, 0), (-1, -1), (-1, -2)],
    "J": [(-1, 0), (0, 0), (0, -1), (0, -2)]
}
 
SHAPESCOLOR = {
    "O": "blue",
    "Z": "Cyan",
    "S": "red",
    "T": "yellow",
    "I": "green",
    "L": "purple",
    "J": "orange",
}

將原來繪製O型俄羅斯方塊處的代碼改成如下代碼,將這七種俄羅斯方塊繪製出來

draw_cells(canvas, 3, 3, SHAPES['O'], SHAPESCOLOR['O'])
draw_cells(canvas, 3, 8, SHAPES['S'], SHAPESCOLOR['S'])
draw_cells(canvas, 3, 13, SHAPES['T'], SHAPESCOLOR['T'])
draw_cells(canvas, 8, 3, SHAPES['I'], SHAPESCOLOR['I'])
draw_cells(canvas, 8, 8, SHAPES['L'], SHAPESCOLOR['L'])
draw_cells(canvas, 8, 13, SHAPES['J'], SHAPESCOLOR['J'])
draw_cells(canvas, 5, 18, SHAPES['Z'], SHAPESCOLOR['Z'])

本部分最終代碼見https://github.com/BigShuang/Tetris/blob/master/1_BASIC/001.py, 繪製出來的效果如圖
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章