JS实现人机大战之五子棋（UI篇）_学习笔记

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

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

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

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

最热最新

空白小弟

棋盘画法通过<canvas>画网格，画一条横线：js代码： #id.lineTo(0,200);#id.moveTo(200,200);#id.stroke(); 两点确定一条线段。网格通过for循环实现。线的颜色：#id.strokeStyle="#bfbfbf"; 棋子是通过canvas画圆实现： #id.beginPath(); #id.arc(0,0,13,0,2*Math.PI); #id.closePath();

查看全部

1 采集收起来源：案例总结
2018-03-22
无所畏惧小小小

笔记字数有限制，只好分段保存（UI篇第一段） var chessBoard=[]; var me=true; for(var i=0;i<15;i++){ chessBoard[i]=[]; for(var j=0;j<15;j++){ chessBoard[i][j]=0; } } var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#BFBFBF"; //加水印 var logo=new Image(); logo.src='img/lg.jpg'; logo.onload=function (){ context.drawImage(logo,0,0,450,450); drawchessBoard(); // oneStep(0,0,true) // oneStep(1,1,false) }

查看全部

1 采集收起来源：案例总结
2018-03-22
无所畏惧小小小

（UI篇第二段） //画棋盘 var drawchessBoard=function(){ for(var i=0;i<15;i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,435); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } } var oneStep=function(i,j,me){ context.beginPath(); context.arc(15+i*30,15+j*30,13,0,2*Math.PI); context.closePath(); var gradient=context.createRadialGradient(15+i*30,15+j*30,15,15+i*30,15+j*30,0); if(me){ gradient.addColorStop(0,'#0A0A0A'); gradient.addColorStop(1,'#636766'); }else{ gradient.addColorStop(0,'#D1D1D1'); gradient.addColorStop(1,'#F9F9F9'); } context.fillStyle=gradient; context.fill();//填充图形 } chess.onclick = function(e){ //通过鼠标点击坐标确定落子坐标 var x=e.offsetX; var y=e.offsetY; i=Math.floor(x/30); j=Math.floor(y/30); //判断落子的位置是否已经落子 if(chessBoard[i][j]==0){ oneStep(i,j,me); //记录落下子的颜色 if(me){ chessBoard[i][j]=1; }else{ chessBoard[i][j]=2; } //轮流下棋落下一种颜色棋子后换一种颜色 me=!me; } }

查看全部

1 采集收起来源：案例总结
2018-03-22
九万里风0

var oneStep = function(i, j, me) { context.beginPath(); context.arc(15 + i*30, 15 + j*30, 13, 0, 2 * Math.PI); context.closePath(); var gradient = context.createRadialGradient(15 + i*30 + 2, 15 + j*30 - 2, 13, 15 + i*30 + 2, 15 + j*30 - 2, 0); if(me) { gradient.addColorStop(0,"#0a0a0a"); gradient.addColorStop(1,"#636766"); } else { gradient.addColorStop(0,"#d1d1d1"); gradient.addColorStop(1,"#f9f9f9"); } context.fillStyle = gradient; context.fill(); }

查看全部

0 采集收起来源：画棋子
2018-03-22
慕粉1471596266 00:12

可以

查看全部

0 采集收起来源：页面结构搭建
2016-09-10
weixin_慕圣524561 00:50

明文

查看全部

0 采集收起来源：案例演示
2016-08-24
qq_该用户无昵称_0 00:14

canvans

查看全部

1 采集收起来源：画棋子
2016-08-16
慕神7509951 00:15

这个界面使用什么快捷键出现的呀？

查看全部

0 采集收起来源：页面结构搭建
2016-08-13
Alivegirl 01:14

不错，要自己学习

查看全部

0 采集收起来源：画水印
2016-07-26
安心坚持 01:51

五子棋ui篇

查看全部

0 采集收起来源：案例总结
2016-07-22
慕前端6437745

stroke 描边

查看全部

0 采集收起来源：画棋子
2016-07-09
Bob2100

内容不错，学到了东西

查看全部

0 采集收起来源：案例总结
2016-05-19
cyrus_0001

strokeStyle 设置画笔颜色 stroke()方法，需要在moveTo和lineTo调用之后，显式调用一下，才能实际地绘制出来效果

查看全部

1 采集收起来源：画棋盘
2016-05-19
cyrus_0001

box-shadow设置控件下的阴影效果，支持多个参数，参数间以逗号分隔，负值表示向反方向移动；正x和正y表示向右向下移动阴影；-5px -5px 5px #efefef 表示向左，向上移动，blur5个px，颜色是efefef

查看全部

0 采集收起来源：页面结构搭建
2016-05-18
鱼骨纹

//画棋子 var oneStep=function(i,j,me){ context.beginPath(); context.arc(15+i*30,15+j*30,13,0,2*Math.PI); context.closePath(); var gradient=context.createRadialGradient(15+i*30+2,15+i*30-2,13,15+i*30+2,15+i*30-2,0); if(me){ gradient.addColorStop(0,"#0A0A0A"); gradient.addColorStop(1,"#636766"); }else{ gradient.addColorStop(0,"#D1D1D1"); gradient.addColorStop(1,"#F9F9F9"); } context.fillStyle=gradient; context.fill(); } //罗旗子 chess.onclick = function(e) { var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / 30); var j = Math.floor(y / 30); if(chessBoard[i][j]==0){ oneStep(i,j,me); if(me){ chessBoard[i][j]=1; }else { chessBoard[i][j]=2; } me=!me; } }

查看全部

0 采集收起来源：案例总结
2018-03-22