H5+C3+JS實現雙人對戰五子棋遊戲（UI篇）
阿新 • • 發佈：2018-11-11
本篇文章實現的是雙人對戰模式，主要是實現除人機AI演算法和判斷輸贏之外的其他功能，下一篇將會發布AI
框架搭建
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!Doctype html>
<
html
>
<
head
>
<!-- 百度爬蟲優化 -->
<
meta
http-equiv
=
"author"
content
=
"成兮，緣分五月"
/>
<
metahttp-equiv
=
"Keywords"
cotent
=
"五子棋，人機大戰，單人遊戲，雙人遊戲，小遊戲"
/>
<
meta
Charset
=
"utf-8"
/>
<
title
>愛淘寶-五子棋</
title
>
<
style
>
#chess {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9;
}
#chess:hover{
cursor: pointer;
}
</
style
>
<
script
>
window.onload = function() {
} ;
</
script
>
</
head
>
<
body
>
<!-- 棋盤 -->
<
canvas
id
=
"chess"
width
=
"450px"
height
=
"450px"
></
canvas
>
</
body
>
</
html
>
|
定義一些需要用到的全域性變數
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script>
//獲取棋盤canvas
var
chess = document.getElementById(
"chess"
);
//獲取2d畫布
var
context = chess.getContext(
'2d'
);
//指定當前是否黑色下，只在UI中使用
var
me =
true
;
//指定當前位置是否下了其，1代表黑，2代表白，0代表空
var
curIndex = [];
for
(
var
i =0; i <15; i++) {
curIndex[i] = [];
for
(
var
j =0; j <15; j++)
curIndex[i][j] = 0;
}
</script>
|
使用canvas繪製棋盤
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script>
function
drawtable() {
//我們設定棋盤總共15根橫線15根匯流排，左右上下都有15px的邊距，其中每個棋子相距30px,因此繪製棋盤從15px開始
for
(
var
i =0; i <15; i++)
for
(
var
j =0; j <15; j++)
{
//繪製橫線
context.moveTo(15, 15 +j *30);
context.lineTo(435, 15 +j *30);
//繪製豎線
context.moveTo(15 +j *30, 15);
context.lineTo(15 +j *30, 435);
//使用灰色描邊
context.strokeStyle =
"#bfbfbf"
;
context.stroke();
}
};
drawtable();
</script>
|
棋盤的onclick事件：在該位置上繪製一個棋子，每次點選黑白相間
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script>
chess.onclick =
function
(event) {
//獲取要下的棋子的位置
var
x = Math.floor(event.offsetX /30);
var
y = Math.floor(event.offsetY /30);
//判斷該點是否已被下了
if
(curIndex[x][y] != 0)
return
;
//開始繪製
context.beginPath();
//繪製指定圓
context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI);
//進行填充
if
(me) {
context.fillStyle =
"#636766"
;
curIndex[x][y] = 1;
me =
false
;
}
else
{
context.fillStyle =
"#b9b9b9"
;
curIndex[x][y] = 2;
me =
true
;
}
context.fill();
//結束繪製
context.closePath();
};
</script>
|