原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
HTML黑白五子棋
html5 黑白棋，与之前的canvas游戏不一样，五子棋的游戏思路，canvas不需要每次都清楚渲染一遍，而是在原来的基础上绘制。由于没有时间限制，因此不需要动画主循环。
五子棋的棋子采用两者png 图片，用 canvas的 image 接口绘制棋子。
写这个主要是实现下二维数组的使用。游戏很简单，没有AI对弈。自己和自己玩。
算法介绍
准备一个二维数组map，通过二维数组构造一个点。点的值若为0 则表示空，为1 则表示有白棋，为2 则有黑棋站位。
捕捉鼠标事件，如果是白棋则讲map的点填上相应的表示。通过当前的点，循环左右上下，左上右下等八个方向，如果有连续的 1或者2 则表示白棋或黑棋赢。
需要注意是如何理解两个循环变量的循环。代码如下
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 !DOCTYPE html
html
head
????meta http-equiv=Content-Type content=text/html; charset=utf-8 /
????title五子棋/title
????style type=text/css
????????body {
????????????margin: 10px;
????????}
????/style
???????????????
/head
body
????div
????????canvas width=640 id=canvas onmousedown=play(event) height=640你的浏览器不支持HTML5 canvas? ，请使用 google chrome 浏览器 打开.
????????/canvas
????/div
????script type=text/javascript src=js/gobang.js/script
/body
/html js
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148 var canvas? = document.getElementById(canvas);
var ctn???? = canvas.getContext(2d);
??????????
var isWhite = true;?? // 是否轮到白棋走
var isWell? = false;? // 是否赢了
??????????
var imgBlack???? = new Image();
????imgBlack.src = img/b.png;
var imgWhite???? = new Image();
????imgWhite.src = img/w.png;
??????????
var chessData = []; //var chessData = new Array(15)
??????????
init();
//初始化棋盘
??????????
function init() {
????for (var i = 0; i = 640; i += 40) {
????????//绘制横线
????????ctn.beginPath();
????????ctn.moveTo(0, i);
????????ctn.lineTo(640, i)
????????ctn.closePath();
????????ctn.stroke();
????????//绘制竖线
????????ctn.beginPath();
????????ctn.moveTo(i, 0);
????????ctn.lineTo(i, 640);
?
您可能关注的文档
最近下载
- 草牧场转让合同5篇.docx VIP
- （四级）保育师理论学习考试题库（浓缩300题）.docx VIP
- 2025四级保育师资格考试题库及答案（浓缩400题）.docx VIP
- 实施指南《GB_T10068-2020轴中心高为56mm及以上电机的机械振动振动的测量、评定及限值》实施指南.docx VIP
- 中小学生常见病防治课件.pptx VIP
- 1.1 原始社会的解体和阶级社会的演进：原始社会 课件-【新教材】高中政治统编版（2019）必修一(共29张PPT).pptx VIP
- 铝方通吊顶施工技术交底.pptx VIP
- DB23T1501-2013 水利堤（岸）坡防护工程格宾与雷诺护垫施工技术规范.pdf VIP
- 华为极简站点解决方案opm200.pdf VIP
- 北师大版七年级数学下册第二章测试题及答案下载.doc VIP
文档评论（0）