使用javascript canvas实现的五子棋
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);
调用 document.Five('div',option);
右键悔棋
