1. 程式人生 > 其它 >addEventListener與onclick的區別

addEventListener與onclick的區別

** 前言 **

寫程式已經丟掉很長一段時間了,最近覺得完全把技術丟掉可能是個死路,還是應該撿起來,所以打算借CSDN來記錄學習過程, 由於以前沒事的時候斷斷續續學習過python和用flask框架寫過點web,所以第一步想撿起python,但是,單純學習python有點枯燥,正好看到pygame,感覺還挺簡單,所以想先寫個小遊戲練練手。

準備

python基礎相關準備:

  1. python基礎知識準備,廖雪峰的python基礎知識簡單好學,熟悉python基本的語法, 連結地址
  2. pygame的基礎知識,參考目光部落格的“用Python和Pygame寫遊戲-從入門到精通”, 連結地址
  3. 安裝python 3.8.0 在python官網下載,不多說。
  4. 安裝pygame,命令:pip install pygame
  5. 如安裝較慢,可以參考如下命令,更改pip源為國內映象站點:
    pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

計劃

準備完成五子棋單機人機遊戲,目前已完成介面以及判定輸贏等功能,還未加入電腦AI,以後有時間再加(不知是否會坑),目前實現主要功能如下:

  1. 五子棋介面的繪製,滑鼠左鍵點選落子(黑子先下,黑白子交替順序)。
  2. 判定黑子或白子五子連珠。
  3. 一方勝利後彈出提示,結束遊戲。

遊戲介面是下面這個樣子:

開始

設計思路

整個遊戲的核心是將棋盤分成兩個層面,第一個層面是物理層面上的,代表在物理畫素的位置,主要用於繪圖等操作,另外一個層面是將棋盤抽象成15*15的一個矩陣,黑子和白子是落在這個矩陣上的某個位置,具體位置用座標(i,j)(0<=i,j<15)來表示,主要用於判斷輸贏和落子等。

  1. 棋盤的繪製,網上有棋盤和黑白子的圖片資源可以下載使用,我下載後由於棋盤圖片格子線畫素位置不太精確,所以自己用ps做了一張544544的木質背景圖,然後用程式來繪製棋盤線(如果PS更熟悉點的話,建議棋盤格線之類就畫在棋盤背景圖上),棋盤格線上下左右空20畫素,棋盤格子大小36畫素,網上下載的棋子大小是3232畫素的。
  2. 輸贏的判斷,由於未出輸贏的時候肯定沒有五子連成線的,所以只需要判斷最後落子位置的橫、豎、斜、反斜四個方向上有沒有五子連成線即可。

主要程式碼

1、main函式,pygame的主要控制流程,縮寫程式碼如下:

    def main():
     pygame.init() #pygame初始化
     size = width,height = 544,544
     screen = pygame.display.set_mode(size, 0, 32)
     pygame.display.set_caption('五子棋')
     font = pygame.font.Font('simhei.ttf', 48)
     clock = pygame.time.Clock() #設定時鐘
     game_over = False
     renju = Renju() # Renju是核心類,實現落子及輸贏判斷等
     renju.init() # 初始化
    
     while True:
     clock.tick(20) # 設定幀率
     for event in pygame.event.get():
     if event.type == pygame.QUIT:
     sys.exit()
     if event.type == pygame.MOUSEBUTTONDOWN and (not game_over):
     if event.button == 1: # 按下的是滑鼠左鍵
      i,j = renju.get_coord(event.pos) # 將物理座標轉換成矩陣的邏輯座標
      if renju.check_at(i, j): # 檢查(i,j)位置能否被佔用,如未被佔用返回True
      renju.drop_at(i, j) # 在(i,j)位置落子,該函式將黑子或者白子畫在棋盤上
      if renju.check_over(): # 檢查是否存在五子連線,如存在則返回True
      text = ''
      if renju.black_turn: #check_at會切換落子的順序,所以輪到黑方落子,意味著最後落子方是白方,所以白方順利
      text = '白方獲勝,遊戲結束!'
      else:
      text = '黑方獲勝,遊戲結束!'
      gameover_text = font.render(text, True, (255,0,0))
      renju.chessboard().blit(gameover_text, (round(width/2-gameover_text.get_width()/2), round(height/2-gameover_text.get_height()/2)))
      game_over = True
      else:
      print('此位置已佔用,不能在此落子')
     
     screen.blit(renju.chessboard(),(0,0))
     pygame.display.update()
     pygame.quit()

2、renju類,核心類,落子及判斷輸贏等操作,程式碼如下:

    Position = namedtuple('Position', ['x', 'y'])
    
    class Renju(object):
     
     background_filename = 'chessboard.png'
     white_chessball_filename = 'white_chessball.png'
     black_chessball_filename = 'black_chessball.png'
     top, left, space, lines = (20, 20, 36, 15) # 棋盤格子位置相關???
     color = (0, 0, 0) # 棋盤格子線顏色
     
     black_turn = True # 黑子先手
     ball_coord = [] # 記錄黑子和白子邏輯位置
     
     def init(self):
     try:
     self._chessboard = pygame.image.load(self.background_filename)
     self._white_chessball = pygame.image.load(self.white_chessball_filename).convert_alpha()
     self._black_chessball = pygame.image.load(self.black_chessball_filename).convert_alpha()
     self.font = pygame.font.SysFont('arial', 16)
     self.ball_rect = self._white_chessball.get_rect()
     self.points = [[] for i in range(self.lines)]
     for i in range(self.lines):
     for j in range(self.lines):
      self.points[i].append(Position(self.left + i*self.space, self.top + j*self.space))
     self._draw_board()
     except pygame.error as e:
     print(e)
     sys.exit()
     
     def chessboard(self):
     return self._chessboard
     
     # 在(i,j)位置落子 
     def drop_at(self, i, j):
     pos_x = self.points[i][j].x - int(self.ball_rect.width/2)
     pos_y = self.points[i][j].y - int(self.ball_rect.height/2)
    
     ball_pos = {'type':0 if self.black_turn else 1, 'coord':Position(i,j)}
     if self.black_turn: # 輪到黑子下
     self._chessboard.blit(self._black_chessball, (pos_x, pos_y))
     else:
     self._chessboard.blit(self._white_chessball, (pos_x, pos_y)) 
     
     self.ball_coord.append(ball_pos) # 記錄已落子資訊
     self.black_turn = not self.black_turn # 切換黑白子順序
     
     # 畫棋盤上的格子線,如果棋盤背景圖做的足夠精確,可省略此步驟
     def _draw_board(self): 
     # 畫座標數字
     for i in range(1, self.lines):
     coord_text = self.font.render(str(i), True, self.color)
     self._chessboard.blit(coord_text, (self.points[i][0].x-round(coord_text.get_width()/2), self.points[i][0].y-coord_text.get_height()))
     self._chessboard.blit(coord_text, (self.points[0][i].x-coord_text.get_width(), self.points[0][i].y-round(coord_text.get_height()/2)))
     
     for x in range(self.lines):
     # 畫橫線
     pygame.draw.line(self._chessboard, self.color, self.points[0][x], self.points[self.lines-1][x])
     # 畫豎線
     pygame.draw.line(self._chessboard, self.color, self.points[x][0], self.points[x][self.lines-1])
     
     # 判斷是否已產生勝方
     def check_over(self):
     if len(self.ball_coord)>8: # 只有黑白子已下4枚以上才判斷
     direct = [(1,0),(0,1),(1,1),(1,-1)] #橫、豎、斜、反斜 四個方向檢查
     for d in direct:
     if self._check_direct(d):
      return True
     return False
     
     # 判斷最後一個棋子某個方向是否連成5子,direct:(1,0),(0,1),(1,1),(1,-1)
     def _check_direct(self, direct):
     dt_x, dt_y = direct 
     last = self.ball_coord[-1]
     line_ball = [] # 存放在一條線上的棋子
     for ball in self.ball_coord:
     if ball['type'] == last['type']:
     x = ball['coord'].x - last['coord'].x 
     y = ball['coord'].y - last['coord'].y
     if dt_x == 0:
      if x == 0:
      line_ball.append(ball['coord'])
      continue
     if dt_y == 0:
      if y == 0:
      line_ball.append(ball['coord'])
      continue
     if x*dt_y == y*dt_x:
      line_ball.append(ball['coord'])
    
     if len(line_ball) >= 5: # 只有5子及以上才繼續判斷
     sorted_line = sorted(line_ball)
     for i,item in enumerate(sorted_line): 
     index = i+4
     if index < len(sorted_line):
      if dt_x == 0:
      y1 = item.y
      y2 = sorted_line[index].y
      if abs(y1-y2) == 4: # 此點和第5個點比較y值,如相差為4則連成5子
      return True
      else:
      x1 = item.x
      x2 = sorted_line[index].x
      if abs(x1-x2) == 4: # 此點和第5個點比較x值,如相差為4則連成5子
      return True
     else:
      break
     return False
     
     # 檢查(i,j)位置是否已佔用 
     def check_at(self, i, j):
     for item in self.ball_coord:
     if (i,j) == item['coord']:
     return False
     return True
     
     # 通過物理座標獲取邏輯座標 
     def get_coord(self, pos):
     x, y = pos
     i, j = (0, 0)
     oppo_x = x - self.left
     if oppo_x > 0:
     i = round(oppo_x / self.space) # 四捨五入取整
     oppo_y = y - self.top
     if oppo_y > 0:
     j = round(oppo_y / self.space)
     return (i, j)

Renju類有幾個函式說明:

  • init()方法主要做了幾件事:
    • 載入資源,建立了_chessboard這個棋盤的surface物件
    • 計算棋盤所有落子點的物理座標,並存放如points屬性中,points是個二維陣列,這樣points[i][j]就可以表示邏輯位置(i,j)所對應的物理座標了。
    • 呼叫_draw_board()方法,在_chessboard上畫格線及標註等。
  • drop_at(i,j)方法,在邏輯位置(i,j)落子,至於是落白子和黑子通過Renju類的控制開關black_turn來決定。畫圖,並將已落子資訊存入ball_coord列表中。
  • check_at(i,j)方法,通過遍歷ball_coord列表來檢視(i,j)位置是否能落子。
  • check_over()方法判斷是否存在五子連線的情況,主要通過呼叫_check_direct方法分別判斷四個方向上的情況。
  • _check_direct(direct)方法是判斷五子連線的主要邏輯,通過判斷最後一顆落子的某個方向落子實現。

結束

主要功能大概是這些,原始碼及程式中用到的圖片等可以在我的資源中下載,或者github下載, [ 下載地址

](https://github.com/zhazh1985/renju)

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對指令碼之家的支援。