【JavaScript】如何製作純網頁遊戲2

接續上一部，製作一個簡單遊戲
好比像是"五子棋"
依據wiki上五子棋的遊戲規則(本教學以Gomoku規則為準)

1.黑白雙方輪流落子。
編成解讀:設定一個變數控制回合

2.盤上第三手棋後執白方有權選擇交換。
編成解讀:設定一個變數紀錄下棋次數，達到3時讓白方選擇是否更換棋色

3.首先在橫、豎、斜方向上成五（連續五個己方棋子）者為勝。
編成解讀:勝利條件是在黑白任一方率先達到
橫:←,→
豎:↓,↑
斜:↖,↗,↗,↘
共8種方向達到5連自方棋色，則贏得比賽

4.超過五子以上不算贏也不算輸。
編成解讀:只有5連自方棋色才是贏棋條件

首先在教學1的資料夾底下，新增一個文字文件，更名為"Gomoku.js"


打開檔案
定義3個變數
turn(控制回合使用)
pass(黑白雙方下棋數)
board(陣列，儲存棋盤資訊使用)

接著定義3個方法
onload(進入點)
init(初始化棋盤物件)
showBoard(將棋盤物件拼貼成棋盤)

看起來大概會是下面這個樣子

var turn=1; //初始值1代表黑方，2代表白方 var pass=0; //初始值0表示尚未下棋 var board=[]; //初始值為空陣列 //初始化棋盤物件 function init(){ } //進行棋盤拼貼 function showBoard(){ } //程式進入點 //依序進行初始化物件與拼貼 onload=function(){ init(); showBoard(); }

不知道有沒有語法錯誤
畢竟是用文件編輯器直接打的
本龍沒錢買dreamweaver所以不得已才直接這樣寫*失敗貌*

算了，回到正題
接著要製作棋盤物件進行拼貼
打開小畫家.....*無力*
繪製出下列檔案(或是你想直接copy教學的圖檔也行)

black.png

做為黑棋使用

white.png

做為白棋使用

cell.png

作為可放置棋子的空區塊

board1.png

作為棋盤左上邊界

board2.png

作為棋盤右上邊界

board3.png

作為棋盤右下邊界

board4.png

作為棋盤左下邊界

board5.png

作為棋盤上邊界

board6.png

作為棋盤右邊界

board7.png

作為棋盤下邊界

board8.png

作為棋盤左邊界

下一個教學將說明如何用css定義棋盤格式
以及用javascript在網頁上拼貼棋盤