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

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

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

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

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

全部评论问答未解决精华

慕粉3984184

讲得很好，我听懂了

0 3-1 案例总结

2017-06-11

qq_F_71

我也想自己写个小程序

0 1-2 案例演示

2017-06-08

qq_F_71

吊炸天了哈

1 1-1 课程介绍

2017-06-08

亭亭如盖矣

if(chessBoard[i][j] ==0){
step(i , j , type);
chessBoard[i][j] = 1 ;
type = !type;
}
简单粗暴
修复点击俩次旗子再向空白处下同色旗子的情况
修复点击俩次变色的情况

1 2-5 落子实现

2017-06-08

hezibin

相当不错的课，这学到了很多东西

0 3-1 案例总结

2017-05-17

真理落

这样限制一下点击的范围会好一点，不然很容易点歪。

chess.onclick = function(e){
var x = e.offsetX;
var y = e.offsetY;
var ti = x % 30 / 30;
var tj = y % 30 / 30;
if(ti >= 0.2 && tj <= 0.8){
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
oneStep(i, j, true);
}

}

2 2-5 落子实现

2017-05-14

早_晨

sublime text3 啊啊 !!!!

0 2-1 页面结构搭建

2017-05-11

qq_脸滚键盘_0

最值得学习的是布局，canvas长宽为450px，棋盘长宽为435px恰当地留出15px。使得click点击的坐标判断范围刚好等于以棋盘第i行j列为中心的30px正方形范围

2 3-1 案例总结

2017-04-24

陈瑞__

有没有源代码啊，我这出错出的厉害

1 2-4 画棋子

2017-04-24

谭谭悦

项目代码分享：https://github.com/littlelittlemoon/Gobang

4 1-1 课程介绍

2017-04-12

love丶技术

感谢老师。

1 3-1 案例总结

2017-04-11

weibo_吉大熊先生_0

//设置棋盘背景图片
var logo=new Image();
logo.src="image/logo1.png";
logo.onload =function(){

context.drawImage(logo,0,0,450,450);
drawChessBoard();

}
var drawChessBoard=function(){
//通过for循环画出棋盘间距14，共14条线，每格30像素
for(var i=0;i<15;i++){
//横线

//纵线

}

0 2-3 画水印

2017-04-11

Sxy97

老师好厉害，牛牛

0 3-1 案例总结

2017-03-29

qq_冫氵辶_03760062

CanV.onclick=function(ev){
//获取点击位置
var x=Math.floor(ev.offsetX/30);
var y=Math.floor(ev.offsetY/30);
if(arrS.indexOf(x+"-"+y)===-1){
oneStep(x,y,me);
me =!me;
arrS.push(x+"-"+y);
}else{
CanV.style.disabled="disabled"
}

0 2-5 落子实现

2017-03-27

慕粉1522128115

getContext('2d'),报错说，对象不支持该方法。

4 2-2 画棋盘

2017-03-11

首页上一页 1 2 3 4 5 6 7 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

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