HTML5-笑傲弈林
结合笔者发过的html5 贪食蛇和中国象棋程序,整合成了一个基于 html5 的象棋打谱程序,该打谱程序暂时还没有什么亮点,只是有别于东萍的打谱程序,它是用 flash 开发的,本程序则不用依赖 falsh, 但却依赖浏览器 ... (万恶的 IE )。技术上也没有什么可圈可点,无非还是在用 canvas API 画画图。在此抛砖引玉,期待更多 html5 的精彩应用。
本程序支持以下棋谱格式,比较简陋
每个棋步由四个字符组成: 棋子纵坐标 + 棋子横坐标 + 目的点纵坐标 + 目的点横坐标
试下功能没有进行行棋规则的限制,如对此有兴趣,可参考笔者中国象棋程序的实现。
试下后可保存棋谱,保存格式同上,棋谱保存后可用于演示。
本程序未来有可能考虑以下扩展
1. 象棋行棋术语显示与定位
2. 多种棋谱格式支持
3. 联网下棋
4. 象棋比赛直播
但也不一定,要看时间,心情与兴趣,毕竟这年头,计划赶不上变化。同好棋友,也可自行扩展,你推倒重来更好。本程序用yangguo licence 进行发布。
Yangguo licence: 任何人有权使用本程序。如要修改源代码,建议通知作者,并提交修改后代码。美女将获得无偿培训,指导。
闲话休提,来看截图:
录入棋谱:
javascript代码:
本程序支持以下棋谱格式,比较简陋
每个棋步由四个字符组成: 棋子纵坐标 + 棋子横坐标 + 目的点纵坐标 + 目的点横坐标
试下功能没有进行行棋规则的限制,如对此有兴趣,可参考笔者中国象棋程序的实现。
试下后可保存棋谱,保存格式同上,棋谱保存后可用于演示。
本程序未来有可能考虑以下扩展
1. 象棋行棋术语显示与定位
2. 多种棋谱格式支持
3. 联网下棋
4. 象棋比赛直播
但也不一定,要看时间,心情与兴趣,毕竟这年头,计划赶不上变化。同好棋友,也可自行扩展,你推倒重来更好。本程序用yangguo licence 进行发布。
Yangguo licence: 任何人有权使用本程序。如要修改源代码,建议通知作者,并提交修改后代码。美女将获得无偿培训,指导。
闲话休提,来看截图:
录入棋谱:
javascript代码:
- function Board(pen){
- this.board = [];
- this.init = function(){
- this.board = new Array(
- [8,9,10,11,12,11,10,9,8],
- [0,0,0,0,0,0,0,0,0],
- [0,13,0,0,0,0,0,13,0],
- [14,0,14,0,14,0,14,0,14],
- [0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0],
- [7,0,7,0,7,0,7,0,7],
- [0,6,0,0,0,0,0,6,0],
- [0,0,0,0,0,0,0,0,0],
- [1,2,3,4,5,4,3,2,1]
- );
-
- }
- 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);
- else
- drawStat(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[i],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[i][j] != 0){
- //alert(chessChar[2]);
- if(this.board[i][j] <= 7)
- drawChess(this.cxt,chessChar[this.board[i][j]],j*dis + padder,i*dis + padder,"red");
- else
- drawChess(this.cxt,chessChar[this.board[i][j]],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[ex][ey] = this.board[sx][sy];
- this.board[sx][sy] = 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.cur++];
- this.move(num.charCodeAt(0) - 65,num[1] - 1,num.charCodeAt(2) - 65,num[3] - 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[i];
- this.move(num.charCodeAt(0) - 65,num[1] - 1,num.charCodeAt(2) - 65,num[3] - 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;
- else
- px = e.pageX - x + dis;
- if(y<=range)
- py = e.pageY - y;
- else
- py = e.pageY - y + dis;
-
- var i = (px - padder)/dis;
- var j = (py - padder)/dis;
-
- if(!this.choosed){
- if(this.board[j][i] != 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 );
- }
- }
- function Board(pen){
- this.board = [];
- this.init = function(){
- this.board = new Array(
- [8,9,10,11,12,11,10,9,8],
- [0,0,0,0,0,0,0,0,0],
- [0,13,0,0,0,0,0,13,0],
- [14,0,14,0,14,0,14,0,14],
- [0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0],
- [7,0,7,0,7,0,7,0,7],
- [0,6,0,0,0,0,0,6,0],
- [0,0,0,0,0,0,0,0,0],
- [1,2,3,4,5,4,3,2,1]
- );
-
- }
- 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);
- else
- drawStat(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[i],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[i][j] != 0){
- //alert(chessChar[2]);
- if(this.board[i][j] <= 7)
- drawChess(this.cxt,chessChar[this.board[i][j]],j*dis + padder,i*dis + padder,"red");
- else
- drawChess(this.cxt,chessChar[this.board[i][j]],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[ex][ey] = this.board[sx][sy];
- this.board[sx][sy] = 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.cur++];
- this.move(num.charCodeAt(0) - 65,num[1] - 1,num.charCodeAt(2) - 65,num[3] - 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[i];
- this.move(num.charCodeAt(0) - 65,num[1] - 1,num.charCodeAt(2) - 65,num[3] - 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;
- else
- px = e.pageX - x + dis;
- if(y<=range)
- py = e.pageY - y;
- else
- py = e.pageY - y + dis;
-
- var i = (px - padder)/dis;
- var j = (py - padder)/dis;
- if(!this.choosed){
- if(this.board[j][i] != 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 );
- }
- }
【HTML5-笑傲弈林】相关文章
1. HTML5-笑傲弈林
2. 微软官方HTML5九宫格Demo:HTML5九宫格Sudoku在线演示
6. HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
7. HTML5架构(HTML5 Boilerplates )
本文来源:https://www.51html5.com/a2116.html
﹝HTML5-笑傲弈林﹞相关内容
- 国内最有爱心的HTML5作品,IT男为女友做HTML5网站
- 外媒评:html5将掀起网络革命,Flash命运已定,或死亡或支持html5!
- AppMobi开源它的移动HTML5技术 想要做HTML5领域的Red Hat
- 欧朋杀入HTML5时代,推HTML5手机浏览器体验版
- Adobe、标准和HTML5 -HTML5 and CSS3 开发
- 2DHTML5游戏是根本 3DHTML5游戏是方向
- HTML5已死;HTML5长生!
- 帮助你开发基于HTML5的网站原型页面 - HTML5 Bones
- HTML5 的未来 - HTML5 还能走多远?
- HTML5 Maker – 在线轻松制作 HTML5 动画效果