html5--笑傲弈林
结合笔者发过的html5贪食蛇和中国象棋程序，整合成了一个基于html5的象棋打谱程序，该打谱程序暂时还没有什么亮点，只是有别于东萍的打谱程序，它是用flash开发的，本程序则不用依赖falsh,但却依赖浏览器...（万恶的IE）。技术上也没有什么可圈可点，无非还是在用canvas API画画图。在此抛砖引玉，期待更多html5的精彩应用。
本程序支持以下棋谱格式，比较简陋
每个棋步由四个字符组成： 棋子纵坐标 + 棋子横坐标 + 目的点纵坐标 + 目的点横坐标
试下功能没有进行行棋规则的限制，如对此有兴趣，可参考笔者中国象棋程序的实现。
试下后可保存棋谱，保存格式同上，棋谱保存后可用于演示。
本程序未来有可能考虑以下扩展
1.象棋行棋术语显示与定位
2.多种棋谱格式支持
3.联网下棋
4.象棋比赛直播
但也不一定，要看时间，心情与兴趣，毕竟这年头，计划赶不上变化。同好棋友，也可自行扩展，你推倒重来更好。本程序用yangguo licence进行发布。
Yangguo licence: 任何人有权使用本程序。如要修改源代码，建议通知作者，并提交修改后代码。美女将获得无偿培训，指导。
闲话休提，来看截图：
http://www.agoit.com/upload/picture/pic/92928/f31bc893-85db-3304-82b7-513c95f9731e.png
录入棋谱：
http://www.agoit.com/upload/picture/pic/92930/11f899be-27d1-31e2-be8c-3ac0db1332bc.png
Board类代码
function Board(pen){this.board = [];this.init = function(){this.board = new Array(,,,,,,,,,);}this.init();this.step = [];this.memory = [];this.cur = 0;this.choosed = false;this.chooseX = 0;this.chooseY = 0;this.id = -1;this.cxt = pen;var padder = 50;var dis = 50;var chessSize = 23;var statLength = dis/4;var statDis = dis/7;var range = chessSize;var WIDTH = 8*dis;var HEIGHT = 9*dis;var letter = "ABCDEFGHIJKLMN";var chessChar = ["","车","马","相","士","帅","炮","兵","车","马","象","士","将","炮","卒"];this.clearAll = function(){this.cxt.clearRect(0,0,WIDTH + padder + dis,HEIGHT + padder + dis);}this.drawBoard = function(){this.cxt.fillStyle = "#FDF5E6";this.cxt.fillRect(padder - 8,padder - 8,WIDTH +16,HEIGHT +16);this.cxt.moveTo(padder,padder);this.cxt.strokeStyle = "black";for(i=0;i<10;i++){this.cxt.moveTo(padder,padder + i*dis);this.cxt.lineTo(WIDTH + padder,padder + i*dis);}this.cxt.moveTo(padder,padder);this.cxt.lineTo(padder,HEIGHT + padder);this.cxt.moveTo(padder + WIDTH,padder);this.cxt.lineTo(padder + WIDTH,HEIGHT + padder);for(i=1;i<8;i++){this.cxt.moveTo(padder + i*dis,padder);this.cxt.lineTo(padder + i*dis,4*dis + padder);this.cxt.moveTo(padder + i*dis,HEIGHT + padder);this.cxt.lineTo(padder + i*dis,5*dis + padder);}this.cxt.moveTo(padder + 3*dis,padder);this.cxt.lineTo(padder + 5*dis,2*dis + padder);this.cxt.moveTo(padder + 5*dis,padder);this.cxt.lineTo(padder + 3*dis,2*dis + padder);this.cxt.moveTo(padder + 3*dis,padder + HEIGHT);this.cxt.lineTo(padder + 5*dis,7*dis + padder);this.cxt.moveTo(padder + 5*dis,padder + HEIGHT);this.cxt.lineTo(padder + 3*dis,7*dis + padder);drawStat(this.cxt,padder + dis,padder + 2*dis);drawStat(this.cxt,padder + 7*dis,padder + 2*dis);drawStat(this.cxt,padder + dis,padder + 7*dis);drawStat(this.cxt,padder + 7*dis,padder + 7*dis);for(i=3;i<9;i=i+3){for(j=0;j<9;j=j+2){if(j == 0 )drawRight(this.cxt,padder + j*dis,padder + i*dis);else if(j == 8)drawLeft(this.cxt,padder + j*dis,padder + i*dis);elsedrawStat(this.cxt,padder + j*dis,padder + i*dis);}}this.cxt.rect(padder - 8,padder - 8,WIDTH +16,HEIGHT +16);this.cxt.stroke();this.cxt.font = "15px 宋体";for(i=1;i<=9;i++){this.cxt.strokeText(i,padder + (i-1)*dis,padder + HEIGHT +40);}for(i=0;i<=9;i++){this.cxt.strokeText(letter,8,padder + i*dis);}}this.draw = function(){this.clearAll();this.drawBoard();for(i=0;i<10;i++){for(j=0;j<9;j++){if(this.board != 0){//alert(chessChar);if(this.board <= 7)drawChess(this.cxt,chessChar],j*dis + padder,i*dis + padder,"red");elsedrawChess(this.cxt,chessChar],j*dis + padder,i*dis + padder,"black");}}}}this.startTryPlay = function(){this.memory = this.step;this.memory.length = this.cur;}this.endTryPlay = function(){this.react();this.draw();var code = this.memory.join(" ");return code;}this.stopAutoPlay = function(){clearInterval(this.id);}this.move = function(sx,sy,ex,ey){this.board = this.board;this.board = 0;}this.changeBook = function(step){this.step = step;this.cur = 0;this.init();this.draw();}this.next = function(){if(this.cur < this.step.length){var num = this.step;this.move(num.charCodeAt(0) - 65,num - 1,num.charCodeAt(2) - 65,num - 1);}else{if(this.id != -1){clearInterval(this.id);alert("演示结束");this.id = -1;}}}this.prev = function(){if(this.cur > 0){this.cur--;this.react();}}this.react = function(){this.init();for(i=0;i<this.cur;i++){var num = this.step;this.move(num.charCodeAt(0) - 65,num - 1,num.charCodeAt(2) - 65,num - 1);}}this.autoPlay = function(){this.id = setInterval("this.next()",1000);}this.play = function(e){var x = (e.pageX - padder)%dis;var y = (e.pageY - padder)%dis;var px = 0;var py = 0;if(x<=range || x>=(dis - range)){if(y<=range || y>=(dis-range)){if(x<=range) px = e.pageX - x;elsepx = e.pageX - x + dis;if(y<=range) py = e.pageY - y;elsepy = e.pageY - y + dis; var i = (px - padder)/dis;var j = (py - padder)/dis;if(!this.choosed){if(this.board != 0){this.choosed = true;this.chooseX = i;this.chooseY = j;drawBorder(this.cxt,px,py);} }else{if(i == this.chooseX && j == this.chooseY)return;this.move(this.chooseY,this.chooseX,j,i);var code = String.fromCharCode(65 + this.chooseY,this.chooseX + 49,65 + j,i+49);this.memory.push(code);this.draw();this.choosed = false;}}}}function drawBorder(cxt,x,y){//cxt.beginPath(); cxt.strokeStyle = "blue";cxt.strokeRect(x-chessSize,y-chessSize,2*chessSize,2*chessSize);}function drawChess(cxt,chess,x,y,color){cxt.beginPath();drawCircle(cxt,x,y,chessSize);cxt.fillStyle="#FFDAB9";cxt.fill();cxt.beginPath();drawCircle(cxt,x,y - 1,chessSize - 1);cxt.strokeStyle = "white";cxt.stroke();cxt.beginPath();cxt.font = "30px 宋体";cxt.textAlign = 'center';cxt.strokeStyle = color;cxt.strokeText(chess,x,y + 10);}function drawCircle(cxt,x,y,radius){cxt.arc(x,y,radius,0,2*Math.PI,false);}function drawStat(cxt,x,y){drawLeft(cxt,x,y);drawRight(cxt,x,y);}function drawLeft(cxt,x,y){cxt.moveTo(x - statDis,y - statDis);cxt.lineTo(x-statDis,y - statDis - statLength);cxt.moveTo(x-statDis,y-statDis);cxt.lineTo(x-statDis - statLength,y - statDis);cxt.moveTo(x-statDis,y+statDis);cxt.lineTo(x-statDis,y + statDis + statLength);cxt.moveTo(x-statDis,y+statDis);cxt.lineTo(x-statDis - statLength,y + statDis);}function drawRight(cxt,x,y){cxt.moveTo(x+statDis,y-statDis);cxt.lineTo(x+statDis,y - statDis - statLength);cxt.moveTo(x+statDis,y-statDis);cxt.lineTo(x+statDis + statLength,y - statDis );cxt.moveTo(x+statDis,y+statDis);cxt.lineTo(x+statDis,y + statDis + statLength);cxt.moveTo(x+statDis,y+statDis);cxt.lineTo(x+statDis + statLength,y + statDis );}} 附件可下载可执行网页，试玩一下吧。
页:
[1]