- 浏览: 111377 次
- 性别:
- 来自: 深圳
博客专栏
-
告诉你什么是优雅的代码
浏览量:23061
最新评论
-
wfm0105:
不支持小数
告诉你什么是优雅的代码(6)------阿拉伯钱数转换为中文形式 -
wfm0105:
daisy_rainbow 写道 不懂这些数组里 ...
告诉你什么是优雅的代码(4)-----智力题的解法(答案) -
恒之疆:
无敌模式有问题
告诉你什么是优雅的代码(11)----html5 之XXOO棋 -
Shengli_fu:
...
告诉你什么是优雅的代码 -
Shengli_fu:
...
告诉你什么是优雅的代码(5)------ 百度之星也是普通人(答案)
结合笔者发过的html5 贪食蛇和中国象棋程序,整合成了一个基于 html5 的象棋打谱程序,该打谱程序暂时还没有什么亮点,只是有别于东萍的打谱程序,它是用 flash 开发的,本程序则不用依赖 falsh, 但却依赖浏览器 ... (万恶的 IE )。技术上也没有什么可圈可点,无非还是在用 canvas API 画画图。在此抛砖引玉,期待更多 html5 的精彩应用。
本程序支持以下棋谱格式,比较简陋
每个棋步由四个字符组成: 棋子纵坐标 + 棋子横坐标 + 目的点纵坐标 + 目的点横坐标
试下功能没有进行行棋规则的限制,如对此有兴趣,可参考笔者中国象棋程序的实现。
试下后可保存棋谱,保存格式同上,棋谱保存后可用于演示。
本程序未来有可能考虑以下扩展
1. 象棋行棋术语显示与定位
2. 多种棋谱格式支持
3. 联网下棋
4. 象棋比赛直播
但也不一定,要看时间,心情与兴趣,毕竟这年头,计划赶不上变化。同好棋友,也可自行扩展,你推倒重来更好。本程序用yangguo licence 进行发布。
Yangguo licence: 任何人有权使用本程序。如要修改源代码,建议通知作者,并提交修改后代码。美女将获得无偿培训,指导。
闲话休提,来看截图:
录入棋谱:
Board类代码
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 ); } }
附件可下载可执行网页,试玩一下吧。
- chess.rar (3.1 KB)
- 下载次数: 814
评论
26 楼
JavaStudyEye
2012-01-02
诸葛太牛了
25 楼
lmh2072005
2011-11-28
学习学习
24 楼
YuanLiang
2011-06-30
yangguo 写道
rainsilence 写道
呵呵。。。你也开始玩html5-canvas了啊
很早就玩过了呀。只是对javascript的一些畸形语法畸形特性有点水土不服。如果不玩那些花招,只是将java“翻译”过去,还是可以玩玩的。
其实javascript也可以写的很漂亮的 可以看 javascript语言精粹
23 楼
kanny87929
2011-06-30
发现你每次都弄个象棋
22 楼
zhoujianghai
2011-06-30
值得学习~
21 楼
tangbohu
2011-06-29
研究下。。。。。。
20 楼
奥义之舞
2011-06-29
rainsilence 写道
yangguo 写道
wenxiang_tune 写道
SVG情何以堪?
优胜劣汰,自然之理也,不必纠结。
svg不但不会淘汰,还会和canvas携手共进。因为html5规范中就有一部分介绍svg的。html5允许svg直接在Html文档中渲染。
可以参照我的这篇文章
http://rainsilence.iteye.com/blog/722321
你说早就知道了,不过有原生的了,谁还用SVG啊,
SVG的事件不过挺爽,如果不用事件还是canvas,
19 楼
yangguo
2011-06-29
chxkyy 写道
楼主使用的编码是GBK,汗一下!
你先汗一下你用汉语发言吧。假洋鬼子。
18 楼
chxkyy
2011-06-29
楼主使用的编码是GBK,汗一下!
17 楼
yangguo
2011-06-29
gtssgtss 写道
askjsp 写道
不错,支持下,呵呵,看起来挺强大的呀
这位美女又来捧诸葛兄的场啦!诸葛兄,再争取下?
美女还能有剩女?
16 楼
yangguo
2011-06-29
rainnguy 写道
奥义之舞 写道
wenxiang_tune 写道
SVG情何以堪?
+1
+1
加你个鬼。又不见你们用svg画些花出来给大家欣赏。让svg情可以堪一下。
15 楼
rainnguy
2011-06-29
奥义之舞 写道
wenxiang_tune 写道
SVG情何以堪?
+1
+1
14 楼
benbenxiongyuan
2011-06-29
对这东西不熟,学习下。
13 楼
rainsilence
2011-06-28
yangguo 写道
wenxiang_tune 写道
SVG情何以堪?
优胜劣汰,自然之理也,不必纠结。
svg不但不会淘汰,还会和canvas携手共进。因为html5规范中就有一部分介绍svg的。html5允许svg直接在Html文档中渲染。
可以参照我的这篇文章
http://rainsilence.iteye.com/blog/722321
12 楼
gabrieltong
2011-06-28
如果没有动画还是svg好一点 , 毕竟事件好维护
11 楼
gtssgtss
2011-06-28
askjsp 写道
不错,支持下,呵呵,看起来挺强大的呀
这位美女又来捧诸葛兄的场啦!诸葛兄,再争取下?
10 楼
yangguo
2011-06-28
wenxiang_tune 写道
SVG情何以堪?
优胜劣汰,自然之理也,不必纠结。
9 楼
奥义之舞
2011-06-28
wenxiang_tune 写道
SVG情何以堪?
+1
8 楼
wenxiang_tune
2011-06-27
SVG情何以堪?
7 楼
askjsp
2011-06-27
不错,支持下,呵呵,看起来挺强大的呀
发表评论
-
shiro 整合dwz 解决登录跳转问题
2014-02-26 11:07 5651在dwz界面操作会话超时时,有两种处理方法。一种是跳 ... -
Ice中间件研究
2011-06-17 15:02 10449Ice中间件研究 简介 Ic ... -
朝花夕拾-----中国象棋
2011-03-10 22:51 2008整理文件,发现昔日写的中国象棋程序,把玩一番,直叹今不如昔,锋 ... -
告诉你什么是优雅的设计(2)--------重构EasyMonitor
2011-01-20 17:33 2239EasyMonitor1.0出来后不久,玩着玩着,我就敏锐 ... -
告诉你什么是优雅的设计(1)--------EasyMonitor1.0
2011-01-19 17:44 2601公司里不知哪个“专家”做的项目,总把tomcat ... -
还原javaeye的崇高文化
2010-12-07 18:57 1493平时对帖子的质量比较苛刻,对一些没内容帖子不免冷嘲热讽。 本来 ... -
html5-贪食蛇
2010-11-30 14:09 1434随着HTML5的插入触碰到RIA的G点,b/s的生产力将进一步 ... -
告诉你什么是优雅的代码(10)----鬼斧神工
2010-11-03 16:06 2376最近逛javaeye得出的体会就是现在的弟弟妹妹确实都很强。动 ... -
告诉你什么是优雅的代码(9)----山寨版猜珍珠
2010-10-08 17:16 1797国庆长假百无聊赖,于是玩玩3366的游戏。 玩到一款小游戏ht ... -
告诉你什么是优雅的代码(8)-----排列组合专题
2010-09-25 14:20 6179http://www.iteye.com/topic/7703 ... -
JAVA程序员情书
2010-09-21 11:55 3600根据网络同名情书改编,版权所有,盗版不究。 我能抽象出整个 ... -
告诉你什么是优雅的代码(7)-----银行作业调度系统
2010-09-20 11:51 2338公告:C1000,请到1号窗口办理,估计用时48秒。 公 ... -
告诉你什么是优雅的代码(6)------阿拉伯钱数转换为中文形式
2010-09-19 14:08 3200http://www.iteye.com/topic/7668 ... -
告诉你什么是优雅的代码(5)------ 百度之星也是普通人(答案)
2010-09-19 09:49 2865最近在写优雅代码系列 ... -
世人谓我太疯癫,我笑世人看不穿
2010-09-17 17:44 1327你来迟了。 首先来看下这个系统的使用方法: publ ... -
告诉你什么是优雅的代码(5)------ 百度之星也是普通人
2010-09-14 16:34 2020今天在挖掘《优雅代码》系列的题材的时候,发现一贴http:// ... -
告诉你什么是优雅的代码(4)-----智力题的解法(答案)
2010-09-08 16:08 2666以下智力题摘自某一帖子。在纸上画了一下之后有了答案。出于职业敏 ... -
告诉你什么是优雅的代码(4)-----智力题的解法
2010-09-08 10:43 1886以下智力题摘自某一帖子。在纸上画了一下之后有了答案。出于职业敏 ... -
告诉你什么是优雅的代码(3)------山寨拼音分词
2010-09-06 16:27 4512早上看见一帖《拼音语法检查》,感觉比较啰嗦,也比较低效。于是自 ... -
用hibernate也能玩出jdbc的感觉
2010-09-03 15:20 1393相信大家都看了那篇《用jdbc也能玩出hibernate的 ...
相关推荐
股市菜鸟必读----“笑傲股市”学习笔记.pdf
论理和实践相结合的测试指导书,适用于测试中阶
20190514-国泰君安-阿里巴巴-BABA.US-笑傲电商江湖,新零售再演倚天屠龙.pdf
20190514-国泰君安-阿里巴巴-BABA.US-笑傲电商江湖,新零售再演倚天屠龙
教程名称:浅蓝辅助学院第二套 - 笑傲江湖ol控件系列教程 教程目录: 【】桌面 【】第1课:什么是控件 【】第1课:数据概述 【】第2课:找输入账号密码控件 【】第3课:编写账号密码控件CALL...
通达信指标——笑傲股林(副图).doc
笑傲股林副图指标 源码 通达信.doc
通达信指标公式源码笑傲股林指标.doc
《笑傲测试》是以武侠小说体裁撰著的软件工程测试项目管理书。全书将软件测试实战的全过程融会于侠义执著,幽默调侃的情境中,系统的则试定义,流程方法,技术规范,管理要点等技术管理信息能在充实而惬意,严谨又...
笑傲测试-软件测试流程方法与实施,欢迎下载,11111111
.NET软件测试自动化之道.pdf Black Box Software Testing.pdf Experiences of Test Automation.pdf how google tests software.pdf ... 笑傲测试-软件测试流程方法与实施.pdf 软件测试新技术与实践.pdf
《笑傲测试》是以武侠小说体裁撰著的软件工程测试项目管理书。全书将软件测试实战的全过程融会于侠义执著,幽默调侃的情境中,系统的则试定义,流程方法,技术规范,管理要点等技术管理信息能在充实而惬意,严谨又...
图形化的工具, 可以解压/压缩 最新的笑傲江湖OL的PCK文件.
笑傲江湖ol辅助 显血/显最大血量 易语言源码 基址+偏移+偏移
FIREWORKS之笑傲江湖
《笑傲测试》讲述了怎么样从一个软件测试门外汉磨练成软件测试行业的资深测试工程师,以及项目管理者,很值得一读。读完这本书,感觉茅塞顿开、前途清晰。
笑傲测试,一部真的不错的讲软件测试的书,喜欢测试的兄弟口语看看
笑傲江湖人物关系数据