2017年6月22日 星期四

小山的 C# 教學-第42課-五子棋小遊戲(三)-用滑鼠建立棋子

本課簡介

本課繼續製作五子棋小遊戲
這次的重點在於如何藉由滑鼠的點按來在對應的位置建立棋子
此外本課也稍微介紹了一個重要的概念:事件 Events

教學影片

注意:影片有高畫質 720P 的選項,可以看得更清楚喔!



重點提示

製作重點

  • 視窗可以接受所謂的事件,也就是發生在這個視窗上的一些預先定義好的刺激
  • 接受到事件之後,視窗可以對事件做出反應,預設的情況是甚麼都不做
  • 此次利用 MouseDown 事件來接受滑鼠點按的刺激
  • 棋子顯示的位置需要另外調整

製作步驟

  1. 在 Visual Studio 的事件視窗中對 MouseDown 點兩下建立處理 MouseDown 事件的 method
  2. 取出 MouseEventArgs 的參數 e 之中的 X, Y 來取得滑鼠點按的座標
  3. 將滑鼠座標傳入並建立一個 BlackPiece
  4. 建立一個名為 IMAGE_WIDTH 的常數,代表圖片的寬度
  5. 將 Piece 中的 Size 改為用 IMAGE_WIDTH 表示
  6. 將 Piece 中的 Location 改為 x - IMAGE_WIDTH 與 y - IMAGE_WIDTH

細節提醒

  • PictureBox 的 Location 屬性指的是 PictureBox 左上角的位置,而不是中心的位置。為了要讓棋子正確地顯示,因此取得滑鼠的點按位置後,必須要將座標的 X、Y 方向分別減掉圖片一半寬度的距離,才能得到 PictureBox 真正開顯示的位置。

練習


練習一下 Event 的使用:
嘗試讓程式在按下鍵盤上的 Enter 鍵時,跳出一個 MessageBox 顯示「Hello」。

提示

  1. 按下鍵盤按鍵的事件叫做 KeyDown
  2. 關於 KeyDown 事件之中,KeyEventArgs 這個參數的使用方式,可以參考這篇官方的文章:https://msdn.microsoft.com/zh-tw/library/system.windows.forms.keyeventargs.keycode(v=vs.110).aspx

6 則留言:

  1. Funny and great! Hope the next lesson.

    回覆刪除
  2. 好期待下一課
    請問小山老師
    是否能夠如上給文字上的重點提示、步驟等
    小弟我想先嘗試做下去看看
    謝謝!!!
    你真的很用心
    加油,後面還有很多沒教的唷~~

    回覆刪除
  3. 小山老師
    感謝您無私的分享喔

    建議您可以使用 ZoomIt 這個軟體輔助畫圖,截圖

    回覆刪除
  4. 我一直有個疑問
    棋盤 大小750,750
    backgroung 也設定成 strengh

    但是詭異的是:
    為啥棋子50,50
    看起來卻明顯比棋盤比例大很多
    找很久還是找不到哪個屬性可以把棋子改小一點....
    豆頁疼

    回覆刪除