[JQuery] 井字遊戲
把井字遊戲轉換成 Web 版,用 JQery 來 操作,順便練習一下 JQery 首先先建立一個 HTML 網頁,頁面設計如下
<body>
<div>
<span> 井字遊戲 </span><input type="button" id="btnStart" value="開始遊戲" />
</div>
<hr />
<div id="dvTTT">
</div>
</body>
再來開始撰寫 JavaScript
$(function () {
var isGameOver = false; //有連線成功則結束
var isO = true; //點選是 O 還是 X
var WinGroup = [[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]];
for (var i = 0; i < 9; i++) {
$("#dvTTT").append("<div class='TTTCell' id='TCell" + i + "' ><span id='TCtxt" + i + "'>Test</span></div>");
}
//設定遊戲開始的按鍵文字、顏色、字型
function initButtons() {
isGameOver = false;
isO = true;
$(".TTTCell").children().text("").css({ "background-color": "#e57f7f", "font-size": "35px", "font-weight": "bold", "font-family": "Arial" });
}
$("#btnStart").click(function () {
initButtons();
});
$(".TTTCell").click(function () {
var thisid = "#" + this.id;
if (isGameOver) {
alert("遊戲結束....請重新開始遊戲!");
return;
}
if ($(thisid).text() != "") {
alert("這個按鍵已經選擇了,請點選其他位置!");
return;
}
if (isO)
$(thisid).children().text("O").css({ "background-color": "#90ee90" });
else
$(thisid).children().text("X").css({ "background-color": "#cfcf11" });
isO = !isO;
var GameStatus = CheckWinGroup();
isGameOver = GameStatus[1];
//有人獲勝
if (GameStatus[0]) {
alert("遊戲結束....\r\n" + $(thisid).children().text() + " 獲勝\r\n是否重新開始遊戲");
return;
}
//和局
if (GameStatus[1]) {
alert("遊戲結束....\r\n和局\r\n是否重新開始遊戲", "遊戲結束");
}
});
function CheckWinGroup() {
//gameWinOver {是否有人獲勝, 是否遊戲結束(或是平局)}
var gameWinOver = [false, false];
var btnIsUse = 1;
for (var i = 0; i < 8; i++) {
var a = WinGroup[i][0];
var b = WinGroup[i][1];
var c = WinGroup[i][2];
var b1 = "#" +$(".TTTCell").eq(a).children()[0].id ;
var b2 = "#" + $(".TTTCell").eq(b).children()[0].id;
var b3 = "#" + $(".TTTCell").eq(c).children()[0].id;
//沒有連線就繼續
if ($(b1).text() == "" || $(b2).text() == "" || $(b3).text() == "")
continue;
//連線成功,遊戲結束
if ($(b1).text() == $(b2).text() && $(b2).text() == $(b3).text()) {
$(b1 + ", " + b2+ ", " + b3).css({ "background-color": "#1b9580", "font-size": "65px", "font-weight": "bold", "font-family": "Arial" });
gameWinOver = [true, true];
break;
}
//九格填完,顯示結束
if ($(".TTTCell").eq(i).children().text() != "") {
btnIsUse++;
gameWinOver[1] = (btnIsUse == 9) ? true : false;
}
}
return gameWinOver;
}
initButtons();
});
然後設定 CSS
<style type="text/css">
#dvTTT
{
width: 360px; height: 360px;
border: solid 5px black;
padding: 0px;
}
.TTTCell
{
float: left;
width: 106px;
height: 106px;
border-top: solid 2px white;
border-left: solid 2px white;
border-right: solid 2px gray;
border-bottom: solid 2px gray;
margin:5px 5px 5px 5px;
cursor:pointer;
}
.TTTCell span
{
display:table-cell;
width: 106px;
height: 106px;
vertical-align:middle;
text-align:center;
}
</style>
呈現畫面:
JQuery 版本:1.10.2
範例檔案 下載