JS实现人机大战之五子棋（UI篇）_技术问答

首页免费课 JS实现人机大战之五子棋（UI篇）问答

JS实现人机大战之五子棋（UI篇）

                
                程序员面试辅导
            全栈工程师

                    查看讲师更多课程 
                    程序员面试辅导讲师的其他课程
                
基于websocket的火拼俄罗斯（升级版）
中级·21257
免费课程
                                
基于websocket的火拼俄罗斯（单机版）
中级·31680
免费课程
                                
基于Websocket的火拼俄罗斯（基础）
中级·34066
免费课程
                                
Handlebars模板引擎
中级·13083
免费课程
                                
JS实现人机大战之五子棋（AI篇）
中级·43146
免费课程
                                
Velocity.js实现弹出式相框
中级·27006
免费课程
                                
                难度中级
            
                时长30分
            
                学习人数
            
综合评分9.67
                            167人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

__xue

var context=chess.getContext('2d');报错

2 2-2 画棋盘

2016-08-15

慕神7509951

老师讲了30分钟，但我却看了3个小时才搞懂，谢谢老师的讲解，明天去看AI啦，有时候觉得看了那么多的基础，看多了就烦了，只有在实践中才感觉他的价值所在，可能都因为自己平时时间太少了，以后会多多关注老师的课程，多多实践

0 3-1 案例总结

2016-08-13

是蒾摧毁了硪

里面的图片什么的能过得吗？

1 2-4 画棋子

2016-08-07

jfhdibrbfjd

边做边听累死我了终于做完了

1 3-1 案例总结

2016-07-15

Merlini_zc

调用的话直接写在window.onload里面就可以了
chess.onmousemove = changeCursor;

0 3-1 案例总结

2016-07-13

Merlini_zc

var distance = Math.hypot(a, b);
var chessRange = Math.sqrt(50, 2);
if(distance < chessRange) {
chess.style.cursor = "pointer";
}
}
}
}

1 3-1 案例总结

2016-07-13

Merlini_zc

function changeCursor(e) {
chess.style.cursor = "default";
var x = e.offsetX;
var y = e.offsetY;
for(var i=0;i<15;i++) {
for(var j=0;j<15;j++) {
var a = x - (15 + i*30);
var b = y - (15 + j*30);

0 3-1 案例总结

2016-07-13

Merlini_zc

我做了一个比较精确的鼠标变换，就是在交叉处半径为5的范围内，鼠标变成手了。大家可以参考一下

1 3-1 案例总结

2016-07-13

精慕门2904192

讲的好！！！

0 3-1 案例总结

2016-07-13

昨夜秋风起

老师讲的真好，很吊

0 3-1 案例总结

2016-07-10

昇笙不息

跟着做了一遍，受益匪浅，虽然自己还是独立做不了，但是现在已经能把里面的代码弄懂。谢谢老师！

2 2-5 落子实现

2016-07-06

阿柴chai

老师讲的很棒，个个问题都讲得很清楚，谢谢老师，思密达

0 3-1 案例总结

2016-06-27

磐石0123456789

斜线哪一步就画不出来

2 2-2 画棋盘

2016-06-24

undertale

只有对角线棋子有渐变效果的看这里.
@磅礴
渐变设置那里改成 var gradient = ctx.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);

我运行后有和你相同的问题，然后开始分析为什么只有对角线有效果，对角线上的点的特性就是i,j坐标是相同的，然后就找到了错误。

3 2-5 落子实现

2016-06-24

专注前端的全栈

看着好像很简单，其实很牛逼，点个赞

0 3-1 案例总结

2016-06-22

首页上一页 4 5 6 7 8 9 10 下一页尾页

开始学习

课程须知: 本课程是前端中级课程 1、JS基础知识 2、Canvas基础知识

老师告诉你能学到什么？: 1、canvas绘制五子棋棋盘 2、canvas绘制黑白棋子 3、五子棋交互逻辑处理

微信扫码，参与3人拼团

热搜

最近搜索清空

JS实现人机大战之五子棋（UI篇）