Go board with canvas tag
July 7th, 2011
2 comments
Here’s my first attempt at a Go board with javascript and the canvas tag.
<!DOCTYPE html> <html> <head> <title>Simple Go board with canvas tag</title> <script language="JavaScript" type="text/javascript"> <!-- // var Go = { nextMove : 'black' }; Go.board = { size : 19, // breaks if > 25 margin : 30, bgColor : '#FFA54F' } Go.apply = function(o, c){ if(o && c && typeof c == 'object'){ for(var prop in c){ o[prop] = c[prop]; } } return o; }; Go.apply(Go.board, { xLabel : 'abcdefghjklmnopqrstuvwxyz', map : new Array(), stoneWidth : 0, stoneHeight : 0, getStarPoints : function(){ // I'd like an algorithm for this var result = new Array(); switch (this.size){ case 19: result.push([4,4],[10,4],[16,4],[4,10],[10,10],[16,10],[4,16],[10,16],[16,16]); break; case 13: result.push([4,4],[10,4],[7,7],[4,10],[10,10]); break; case 9: result.push([3,3],[7,3],[5,5],[3,7],[7,7]); break; } return result; }, getCoords : function(x,y){ return this.map[x][y]; }, buildMap : function(){ var m = (this.margin||0); var hLineGap = (Go.canvas.height-(m*2))/(this.size-1); var vLineGap = (Go.canvas.width-(m*2))/(this.size-1); var x, y, lat, lon; // a convenient moment to determine stone size. this.stoneWidth = vLineGap/2; this.stoneHeight = hLineGap/2; for (lon=0; lon<this.size; lon++){ x = (lon*vLineGap)+m; this.map[lon+1] = []; for (lat=0; lat<this.size; lat++){ y = (lat*hLineGap)+m; this.map[lon+1][lat+1] = [x,y]; } } }, drawBackground : function(){ var c = Go.cxt; c.fillStyle = this.bgColor; c.fillRect(0,0,Go.canvas.width, Go.canvas.height); }, drawStone : function(x,y,color){ var coords = this.getCoords(x,y); if (undefined==coords){return false;} var c = Go.cxt; if (!color){ color = Go.nextMove; Go.nextMove = (color=='black')?'white':'black'; } c.beginPath(); c.arc(coords[0],coords[1],this.stoneWidth,0,Math.PI*2,true); c.fillStyle = color; c.fill(); c.stroke(); }, drawStar : function(x,y){ var coords = this.getCoords(x,y); if (undefined==coords){return false;} var c = Go.cxt; c.beginPath(); c.arc(coords[0],coords[1],4,0,Math.PI*2,true); c.fillStyle = 'black'; c.fill(); c.stroke(); }, drawStars : function(){ var stars = this.getStarPoints(); for (var i=0; i<stars.length; i++){ star = stars[i]; this.drawStar(star[0], star[1]); } }, drawLines : function(){ var c = Go.cxt, fc, tc; for (var i=1; i<=this.size; i++){ c.beginPath(); fc = this.getCoords(1, i); tc = this.getCoords(this.size, i); c.moveTo(fc[0], fc[1]); c.lineTo(tc[0], tc[1]); c.stroke(); } for (var i=1; i<=this.size; i++){ c.beginPath(); fc = this.getCoords(i, 1); tc = this.getCoords(i, this.size); c.moveTo(fc[0], fc[1]); c.lineTo(tc[0], tc[1]); c.stroke(); } }, drawLabels : function(){ var c = Go.cxt, f1, f2; c.textAlign = 'center'; c.textBaseline = 'middle'; for (var i=1; i<=this.size; i++){ f1 = this.getCoords(i, 1); f2 = this.getCoords(i, this.size); c.strokeText(this.xLabel.charAt(i-1).toUpperCase(), f1[0], f1[1]-(this.margin/2)); c.strokeText(this.xLabel.charAt(i-1).toUpperCase(), f2[0], f2[1]+(this.margin/2)); } for (var i=1; i<=this.size; i++){ f1 = this.getCoords(1, i); f2 = this.getCoords(this.size, i); c.strokeText(i, f1[0]-(this.margin/2), f1[1]); c.strokeText(i, f2[0]+(this.margin/2), f2[1]); } }, monitorMouseMove : function(e){ var x, y, mx, my, sw = Go.board.stoneWidth, sh = Go.board.stoneHeight; if(e.offsetX) { mx = e.offsetX; my = e.offsetY; } else if(e.layerX) { mx = e.layerX; my = e.layerY; } x = Math.round((mx+(sw/2))/(2*sw)); y = Math.round((my+(sw/2))/(2*sh)); }, monitorMouseClick : function(e){ // this isn't really perfected.. var x, y, mx, my, sw = Go.board.stoneWidth, sh = Go.board.stoneHeight, m = Go.board.margin; if(e.offsetX) { mx = e.offsetX; my = e.offsetY; } else if(e.layerX) { mx = e.layerX; my = e.layerY; } x = Math.round((mx+(m/2)+(sw/2))/(2*sw)); y = Math.round((my+(m/2)+(sw/2))/(2*sh)); Go.board.drawStone(x,y); } }); var start = function(){ Go.canvas = document.getElementById('goboard'); Go.canvas.onmousemove = Go.board.monitorMouseMove; Go.canvas.onclick = Go.board.monitorMouseClick; Go.cxt = Go.canvas.getContext('2d'); Go.board.buildMap(); Go.board.drawBackground(); Go.board.drawLines(); Go.board.drawStars(); Go.board.drawLabels(); } // --> </script> </head> <body onLoad="start();"> <canvas id="goboard" name="goboard" width="900" height="900"> </canvas> </body> </html>
Categories: Javascript, 囲碁 Go