下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】自己写的HTML5Canvas+Javascript五
看到一些曾经只会灌水的网友，在学习了前端之后，已经能写出下载量几千几万的脚本、样式，帮助大众，成为受欢迎的人，感觉满羡慕的。我也想学会前端技术，变得受欢迎呀。于是心血来潮，开始学习前端知识，并写下了这个小练习。基本思路是这样的：使用Canvas绘制棋盘、棋子。用二维数组保存棋盘状态。设置一个flag，用以标识落子顺序。点击时，在数组中检测当前点击位置是否存在棋子，若存在，则不落子；如游戏已结束，亦不落子。落子时，更新数组，并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中，用以判断新落子是否形成了五子连珠。若形成了五子连珠，提示胜利，并结束游戏；反之，则交换顺序，继续进行游戏。效果图：
代码如下：
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. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年度高新技术研发厂房租赁合同3篇
- 2024版汽车租赁合同样本6篇
- 二零二五年度驾校学员驾驶技能竞赛组织与管理合同3篇
- 二零二四企业销售合同合规性审核与风险防范协议3篇
- 2025年度西餐厅桌椅设计采购及装修合同模板3篇
- 2025年度科技企业战略合作伙伴股权调整协议书3篇
- 二零二五年度航空航天器打胶工艺优化合同2篇
- 2025版汽车金融临时借款合同范例4篇
- 二零二五年度环保产品认证服务合同环保条款3篇
- 二零二四年农产品电商平台会员服务及积分奖励合同3篇
- 二零二五年度无人驾驶车辆测试合同免责协议书
- 北京市海淀区2024-2025学年高一上学期期末考试历史试题（含答案）
- 常用口服药品的正确使用方法
- 2025年湖北华中科技大学招聘实验技术人员52名历年高频重点提升（共500题）附带答案详解
- 2024年钻探工程劳务协作协议样式版B版
- 《心肺复苏机救治院内心搏骤停患者护理专家共识》解读
- 计算机二级WPS考试试题
- 智联招聘行测题库及答案
- 2023中华护理学会团体标准-注射相关感染预防与控制
- GB∕T 2099.1-2021 家用和类似用途插头插座 第1部分：通用要求
- 超洁净管道(CL-PVC)施工技术
评论
0/150
提交评论