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

作者：巨龍-埃特│2014-07-05 02:20:29│巴幣：18│人氣：2656

接續上個教學

在教學1的資料夾下新增一個文字文件
更名為"style.css"

在內文中定義棋盤物件的格式

/*棋盤本體
寬高各為544*544px(15*15格子加上邊界一共是17*17格)
*/
.Board{
width:544px;
height:544px;
}

/*棋格
寬高各為32*32px
排列方式為絕對位置(可用x,y座標定義位置)
*/
.Cell{
width:32px;
height:32px;
position:absolute;
}

/*圖片
寬高各為32*32px
*/
img{
width:32px;
height:32px;
}

現在打開index.html
在<head>的下面
插入教學2的Gomoku.js
以及剛剛完成的style.css

寫法如下

接著在<body>下面插入設定為棋盤物件格式的區塊

現在已經完成棋盤物件的設定
你可以試著用瀏覽器打開
但因為還沒編寫JS的關係
棋盤並無拼貼
現在打開Gomoku.js

新增兩變數
var piece=[];//儲存棋盤物件
var boardPiece; //儲存棋盤本體

並且將裡面的init()方法改寫成下表

//初始化棋盤物件
function init(){
//取得棋盤本體
boardPiece = document.getElementById("board");
//依序取得棋盤本體內的元件，將之存入piece後並移除
while(boardPiece.firstChild){
//檢查是否為棋盤物件
if (typeof boardPiece.firstChild.id != 'undefined'){
piece.push(boardPiece.firstChild);
}
boardPiece .removeChild(boardPiece.firstChild);
}
}

以及showBoard()方法改下成下表

//進行棋盤拼貼
function showBoard(){
//用來儲存從piece中複製的棋盤元件
var clonePiece;
//以二重迴圈依序拼貼棋盤
for(var y=0; y<17; y++){
for(var x=0; x<17; x++){
//左上邊界
if(x==0 && y==0){
clonePiece= piece[0].cloneNode(true);
//右上邊界
}else if(x==16 && y == 0){
clonePiece = piece[1].cloneNode(true);
//右下邊界
}else if(x==16 && y == 16){
clonePiece = piece[2].cloneNode(true);
//左下邊界
}else if(x==0 && y == 16){
clonePiece = piece[3].cloneNode(true);
//上邊界
}else if(y==0){
clonePiece = piece[4].cloneNode(true);
//右邊界
}else if(x==16){
clonePiece = piece[5].cloneNode(true);
//下邊界
}else if(y==16){
clonePiece = piece[6].cloneNode(true);
//左邊界
}else if(x==0){
clonePiece = piece[7].cloneNode(true);
//棋格
}else{
clonePiece = piece[8].cloneNode(true);
//將棋格以x方向到y方向排列
board[(y-1)*15+(x-1)]=0;
//以棋格名稱作為儲存媒介
clonePiece.name="("+y+"-1)*15+("+x+"-1)";
//設定滑鼠事件
clonePiece.onclick = function(){
//輸出棋格座標位置(y座標*15+x座標)
alert("you click : "+eval(this.name));
}
}
//設定棋格座標
clonePiece.style.left=x*32+"px";
clonePiece.style.top=y*32+"px";
//將棋格加入棋盤本體
boardPiece .appendChild(clonePiece);
}
}
}

現在用瀏覽器打開index.html
你會發現....