1 (
function (doc, win) {
2 var options =
{
3 row: 9
,
4 line: 9
,
5 width: 360
,
6 height: 360
7 };
8 var tempSteps =
[];
9 var stars =
{};
10 var step = 0
;
11 var canvas = document.createElement('canvas'
);
12 var qizi = { white: '○', black: '●'
};
13 var currentColor = 'white'
;
14 function ReStart() {
15 step = 0
;
16 stars =
{};
17 CreateGame();
18 }
19 function CreateGame(option) {
20 if (option &&
option.line) {
21 option.width = option.line * 40
;
22 }
23 if (option &&
option.row) {
24 option.height = option.row * 40
;
25 }
26 option = options =
Extend(options, option);
27 canvas.width =
option.width;
28 canvas.height =
option.height;
29 canvas.style.border = '1px solid red'
;
30 var context = canvas.getContext('2d'
);
31 context.clearRect(0, 0
, option.width, option.height);
32 function DrawLine(a, b, c, d, e) {
33 if (!
e) {
34 e = '#808080'
;
35 }
36 context.beginPath();
37 context.strokeStyle =
e;
38 context.moveTo(a, b);
39 context.lineTo(c, d);
40 context.stroke();
41 }
42 function DrawText(x, y, color) {
43 context.font = '65px Arial'
;
44 context.fillText(qizi[color], x, y);
45 context.stroke();
46 }
47 var itemWidth = option.width /
option.line;
48 var itemHeight = option.height /
option.row;
49 for (
var i = 0; i < option.row; i++
) {
50 DrawLine(0, i * itemHeight, option.width, i *
itemHeight);
51 }
52 for (
var i = 0; i < option.line; i++
) {
53 DrawLine(i * itemWidth, 0, i *
itemWidth, option.height);
54 }
55 var lineBegin =
{},
56 lineEnd =
{};
57 for (
var i = 0; i < option.row; i++
) {
58 if (!
stars.hasOwnProperty(i)) {
59 stars[i] =
{};
60 }
61 for (
var j = 0; j < option.line; j++
) {
62 if (!
stars[i].hasOwnProperty(j)) {
63 stars[i][j] = { color:
false };
64 }
65 var tempObj =
{
66 beginLeft: j *
itemWidth,
67 endLeft: itemWidth * (j + 1
),
68 beginTop: i *
itemHeight,
69 endTop: itemHeight * (i + 1
)
70 };
71 stars[i][j] =
Extend(stars[i][j], tempObj);
72 if (stars[i][j]['color'
]) {
73 DrawText(stars[i][j]['beginLeft'], stars[i][j]['endTop'], stars[i][j]['color'
]);
74 }
75 if (stars[i][j]['winbegin']) {
//五子的开始点
76 lineBegin['x'] = (stars[i][j]['beginLeft'] + stars[i][j].endLeft) / 2
;
77 lineBegin['y'] = (stars[i][j].beginTop + stars[i][j].endTop) / 2
;
78 }
79 if (stars[i][j]['winend']) {
//五子的结束点
80 lineEnd['x'] = (stars[i][j]['beginLeft'] + stars[i][j].endLeft) / 2
;
81 lineEnd['y'] = (stars[i][j].beginTop + stars[i][j].endTop) / 2
;
82 }
83 }
84 }
85 DrawLine(lineBegin['x'], lineBegin['y'], lineEnd['x'], lineEnd['y'
]);
86 canvas.onclick =
function (e) {
87 e = e ||
event;
88 var ol =
canvas.offsetLeft;
89 var ot =
canvas.offsetTop;
90 var left = e.x+win.scrollX -
ol;
91 var top = e.y+win.scrollY-
ot;
92 var lc = parseInt(left /
itemWidth);
93 var tc = parseInt(top /
itemHeight);
94 tempSteps.push({x:tc,y:lc});
95 if (!stars[tc][lc]['color'
]) {
96 stars[tc][lc]['color'] =
currentColor;
97 currentColor = currentColor == 'white' ? 'black' : 'white'
;
98 CreateGame();
99 Win(tc, lc, stars[tc][lc]['color'
]);
100 }
101 };
102 canvas.oncontextmenu =
function () {
103 if (tempSteps.length!=0
) {
104 var lastStep =
tempSteps.pop();
105 stars[lastStep['x']][lastStep['y']].color =
false;
106 CreateGame();
107 currentColor = currentColor == 'white' ? 'black' : 'white'
;
108 }
109 return false;
110 };
111
112 }
113 doc.Five =
function (dom, option) {
114 canvas = doc.createElement('canvas'
);
115 if (!(canvas.getContext&&canvas.getContext('2d'
))) {
116 throw new Error('您的浏览器不支持canvas,请使用谷歌或者火狐等先进的浏览器'
);
117 }
118 dom =
doc.getElementById(dom);
119 dom.appendChild(canvas);
120 CreateGame(option);
121 };
122 function Win(i, j, color) {
123 var counter = 0
;
124 for (
var m = -5; m < 5; m++) {
//只加横向
125 if (stars[i].hasOwnProperty(j + m) && stars[i][j + m]['color'] ==
color) {
126 counter++
;
127 if (counter >= 5
) {
128 stars[i][j + m - 4]['winbegin'] =
true;
129 stars[i][j + m]['winend'] =
true;
130 CreateGame();
131 alert(color + ' Win'
);
132 ReStart();
133 }
134 }
else {
135 counter = 0
;
136 }
137 }
138 var hcounter = 0
;
139 for (
var m = -5; m < 5; m++) {
//只加
140 if (stars.hasOwnProperty(i + m) && stars[i + m][j]['color'] ==
color) {
141 hcounter++
;
142 if (hcounter >= 5
) {
143 stars[i + m - 4][j]['winbegin'] =
true;
144 stars[i + m][j]['winend'] =
true;
145 CreateGame();
146 alert(color + ' Win'
);
147 ReStart();
148 }
149 }
else {
150 hcounter = 0
;
151 }
152 }
153 var counter3 = 0
;
154 for (
var m = -5; m < 5; m++) {
//两个一起加
155 if (stars.hasOwnProperty(i + m) && stars[i + m].hasOwnProperty(j + m) && stars[i + m][j + m]['color'] ==
color) {
156 counter3++
;
157 if (counter3 >= 5
) {
158 stars[i + m - 4][j + m - 4]['winbegin'] =
true;
159 stars[i + m][j + m]['winend'] =
true;
160 CreateGame();
161 alert(color + ' Win'
);
162 ReStart();
163 }
164 }
else {
165 counter3 = 0
;
166 }
167 }
168 var counter4 = 0
;
169 for (
var m = -5; m < 5; m++) {
//一加一减
170 if (stars.hasOwnProperty(i + m) && stars[i + m].hasOwnProperty(j - m) && stars[i + m][j - m]['color'] ==
color) {
171 counter4++
;
172 if (counter4 >= 5
) {
173 stars[i + m - 4][j - m + 4]['winbegin'] =
true;
174 stars[i + m][j - m]['winend'] =
true;
175 CreateGame();
176 alert(color + ' Win'
);
177 ReStart();
178 }
179 }
else {
180 counter4 = 0
;
181 }
182 }
183 }
184 function Extend() {
185 var length =
arguments.length;
186 if (length <= 1
) {
187 return arguments[0
];
188 }
189 var result =
{};
190 for (
var i = 0; i < length; i++
) {
191 for (
var a
in arguments[i]) {
192 result[a] =
arguments[i][a];
193 }
194 }
195 return result;
196 }
197 })(document, window);
View Code
调用 document.Five('div',option);
右键悔棋
转载于:https://www.cnblogs.com/hmds/p/3237960.html
相关资源：基于javascript canvas实现五子棋游戏
