下載本文檔
版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
【移動應用開發(fā)技術】自己寫的HTML5Canvas+Javascript五
看到一些曾經只會灌水的網友，在學習了前端之后，已經能寫出下載量幾千幾萬的腳本、樣式，幫助大眾，成為受歡迎的人，感覺滿羨慕的。我也想學會前端技術，變得受歡迎呀。于是心血來潮，開始學習前端知識，并寫下了這個小練習?；舅悸肥沁@樣的：使用Canvas繪制棋盤、棋子。用二維數組保存棋盤狀態(tài)。設置一個flag，用以標識落子順序。點擊時，在數組中檢測當前點擊位置是否存在棋子，若存在，則不落子；如游戲已結束，亦不落子。落子時，更新數組，并將當前落子所在的行、列、左上-右下列、左下-右上列四個方向的棋盤狀態(tài)寫入到一維數組中，用以判斷新落子是否形成了五子連珠。若形成了五子連珠，提示勝利，并結束游戲；反之，則交換順序，繼續(xù)進行游戲。效果圖：
代碼如下：
1
<!DOCTYPE
html>
2
<html
lang="zh-CN">
3
<meta
charset="utf-8">
4
<head><title>五子棋</title></head>
5
<body>
6
<canvas
id="myCanvas"
width="560"
height="560"
>
7
您的瀏覽器不支持
HTML5
canvas
標簽。</canvas>
<br/>
8
<button
id="reset"
onclick="controller.init(ctx)">重置</button>
9
</body>
10
<script>
11
var
controller
=
{
12
round:true,
13
color:"black",
14
whiteTable:new
Array(),
15
blackTable:new
Array(),
16
row:0,
17
col:0,
18
over:false,
19
trans:function()
{
20
this.round
=
!this.round;
21
if
(!this.round)
{
22
this.blackTable[this.row][this.col]
=
1;
23
this.ifWin(this.blackTable)
24
this.color
=
"white";
25
}
26
else
{
27
this.whiteTable[this.row][this.col]
=
1;
28
this.ifWin(this.whiteTable)
29
this.color
=
"black";
30
}
31
},
32
ifWin:function(table)
{
33
var
arr1
=
new
Array();
34
var
arr2
=
new
Array();
35
var
arr3
=
new
Array();
36
var
arr4
=
new
Array();
37
var
n
=
0;
38
for(x
=
0;
x<=
lineNums;
x++)
{
39
for(y
=
0;
y
<=
lineNums;
y++)
40
{
41
var
x1
=
this.row
-
n;
42
var
x2
=
this.row
+
n;
43
var
y1
=
this.col
-
n;
44
var
y2
=
this.col
+
n;
45
if(y
==
this.col)
{
46
arr1[x]
=
table[x][y];
47
}
48
if(x
==
this.row)
{
49
arr2[y]
=
table[x][y];
50
}
51
}
52
if(this.inBounds(x1)
&&
this.inBounds(y2))
{
53
arr3[x1]
=
table[x1][y2];
54
}
55
if(this.inBounds(x1)
&&
this.inBounds(y1))
{
56
arr4[x1]
=
table[x1][y1];
57
}
58
if(this.inBounds(x2)
&&
this.inBounds(y1))
{
59
arr3[x2]
=
table[x2][y1];
60
}
61
if(this.inBounds(x2)
&&
this.inBounds(y2))
{
62
arr4[x2]
=
table[x2][y2];
63
}
64
n
=
n
+
1;
65
}
66
this.getSum(arr1,
this.row);
67
this.getSum(arr2,
this.col);
68
this.getSum(arr3,
this.row);
69
this.getSum(arr4,
this.row);
70
},
71
inBounds:function(i)
{
72
if(i>=0
&&
i<=15){
73
return
true;
74
}
75
else{
76
return
false;
77
}
78
},
79
getSum:function(array,
pos)
{
80
num
=
5;
81
posr
=
pos
+
1;
82
while(num
>
0){
83
if(array[pos]>0
&&
this.inBounds(pos))
{
84
num
=
num
-
1;
85
pos
=
pos
-
1;
86
}
87
else{
88
break;
89
}
90
}
91
while(num
>
0){
92
if(array[posr]>0
&&
this.inBounds(pos))
{
93
num
=
num
-
1;
94
posr
=
posr
+
1;
95
}
96
else
{
97
break;
98
}
99
}100
if(num
==
0)
{101
this.over
=
true;102
this.gameOver();103
}
104
},105
exist:function(x,
y)
{106
this.row
=
x
/
ratio;107
this.col
=
y
/
ratio;108
var
nums
=
this.whiteTable[this.row][this.col]
+
this.blackTable[this.row][this.col];109
if(
nums
>
0
{110
return
true;111
}112
else{113
return
false;114
}115
},116
gameOver:function()
{117
ctx.font="30px
Arial";118
ctx.fillStyle
=
"#FF0000";119
if(this.round)
{120
ctx.fillText("白棋勝利",240,240);121
}122
else
{123
ctx.fillText("黑棋勝利",240,240);124
}125
},126
init:function()
{127
this.round
=
true;128
this.color
=
"black";129
this.over
=
false;130
this.drawBoard();131
for(i
=
0;
i<=
lineNums;
i++)
{
132
this.whiteTable[i]=new
Array();133
this.blackTable[i]=new
Array();134
for(n
=
0;
n
<=
lineNums;
n++)
{
135
this.whiteTable[i][n]=0;
136
this.blackTable[i][n]=0;137
}
138
}
139
},140
drawBoard:function()
{141
ctx.beginPath();142
ctx.clearRect(0,0,width,width);143
ctx.fillStyle
=
"#FFBB00";144
ctx.fillRect(0,0,width,width);145
for(var
i
=
1;
i
<
(lineNums
-
1);
i++)
{146
ctx.moveTo(i
*
ratio,
0);147
ctx.lineTo(i
*
ratio,
width);148
ctx.stroke();149
ctx.moveTo(0,
i
*
ratio);150
ctx.lineTo(width,
i
*
ratio);151
ctx.stroke();152
}153
},154
drawPiece:function(posX,
posY)
{155
ctx.beginPath();156
ctx.arc(posX,
posY,
ratio/2,
0,
2*Math.PI);157
ctx.fillStyle
=
this.color;158
ctx.fill();159
ctx.stroke();
160
}161
};
162
//獲取點擊位置163
function
getMousePos(canvas,
evt)
{
164
var
rect
=
canvas.getBoundingClientRect();
165
return
{
166
x:
evt.clientX
-
rect.left
*
(canvas.width
/
rect.width),167
y:
evt.clientY
-
rect.top
*
(canvas.height
/
rect.height)168
}169
}170
171
function
getNode(pos)
{172
return
((pos
/
ratio).toFixed())
*
ratio;173
}174
1
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年版的軟件購買與技術支持合同
- 服裝銷售店長下半年工作計劃10篇
- 春季工作計劃模板8篇
- 2025年度全球十大風險報告
- 創(chuàng)建文明城市倡議書范文合集九篇
- 員工辭職申請書匯編6篇
- 2025年高模量玻璃纖維布項目發(fā)展計劃
- 新安江生態(tài)補償報告
- 煤業(yè)企業(yè)調度室管理制度匯編
- 計劃生育-婦產科教學課件
- 新入職員工年終工作總結課件
- 靜脈導管維護
- 年度先進員工選票標準格式
- 中國移動集團客戶經理的工作總結
- 中醫(yī)護理質量指標
- 患者告知及知情同意簽字制度
- 公司各中心事業(yè)部獨立核算運營實施方案
- 幼兒園大班綜合《我們和手機》課件
- 中小企業(yè)內部控制與風險管理（第二版）項目五：銷售業(yè)務內部控制與風險管理
- 中鐵二局工程項目全員安全教育培訓考試試題（普工）附答案
- 08坦白檢舉教育
評論
0/150
提交評論