当然有,只要你想学,下面可以看看我的建议
刚开始没必要看书
也没必要听那些所谓的老手的建议
什么学习路线的,那些都是扯淡的
没什么卵用的
为什么呢?
因为想要提高你的水平,最重要的就是动手,实战
你照着那些路线慢慢的学下去,学不了几天,你的耐心就都被磨没了
耐心都磨没了,还学个屁
所以我的建议是,基本语法熟悉之后,直接去实战
过程中遇到不懂的地方再去找答案,这样你容易有成就感,也学的快
需要的话,我这里有很多实战的项目资料,有需要的可以找我来拿
参考下图找我
function Gobang () {
this.over = false; // 是否结束
this.player = true; // true:我 false:电脑
this.allChesses = []; // 所有棋子
this.existChesses = [] // 已经落下的棋子
this.winsCount = 0; // 赢法总数
this.wins = []; // 所有赢法统计
this.myWins = []; //我的赢法统计
this.computerWins = []; //电脑赢法统计
}
//初始化
Gobang.prototype.init = function(opts) {
// 生成canvas棋盘
this.createCanvas(opts);
//棋盘初始化
this.boardInit();
// 鼠标移动聚焦功能实现
this.mouseMove();
//算法初始化
this.algorithmInit();
//落子功能实现
this.dorpChess();
}
//生成canvas
Gobang.prototype.createCanvas = function(opts) {
var opts = opts || {};
if (opts.width && opts.width%30 !== 0) throw new RangeError(opts.width+'不是30的倍数');
this.col = (opts.width && opts.width/30) || 15; // 棋盘列
var oCanvas = document.createElement('canvas');
oCanvas.width = oCanvas.height = opts.width || 450;
this.canvas = oCanvas;
document.querySelector(opts.container || 'body').appendChild(this.canvas);
this.ctx = oCanvas.getContext('2d');
}
//棋盘初始化
Gobang.prototype.boardInit = function(opts){
this.drawBoard();
}
// 画棋盘
Gobang.prototype.drawBoard = function(){
this.ctx.strokeStyle = "#bfbfbf";
for (var i = 0; i < this.col; i++) {
this.ctx.moveTo(15+ 30*i, 15);
this.ctx.lineTo(15+ 30*i, this.col*30-15);
this.ctx.stroke();
this.ctx.moveTo(15, 15+ 30*i);
this.ctx.lineTo(this.col*30-15, 15+ 30*i);
this.ctx.stroke();
}
}
// 画棋子
Gobang.prototype.drawChess = function(x, y, player){
var x = 15 + x * 30,
y = 15 + y * 30;
this.ctx.beginPath();
this.ctx.arc(x, y, 13, 0, Math.PI*2);
var grd = this.ctx.createRadialGradient(x + 2, y - 2, 13 , x + 2, y - 2, 0);
if (player) { //我 == 黑棋
grd.addColorStop(0, '#0a0a0a');
grd.addColorStop(1, '#636766');
}else{ //电脑 == 白棋
grd.addColorStop(0, '#d1d1d1');
grd.addColorStop(1, '#f9f9f9');
}
this.ctx.fillStyle = grd;
this.ctx.fill()
}
// 鼠标移动时触发聚焦效果, 需要前面的聚焦效果消失, 所有需要重绘canvas
Gobang.prototype.mouseMove = function(){
var that = this;
this.canvas.addEventListener('mousemove', function (e) {
that.ctx.clearRect(0, 0, that.col*30, that.col*30);
var x = Math.floor((e.offsetX)/30),
y = Math.floor((e.offsetY)/30);
//重绘棋盘
that.drawBoard();
//移动聚焦效果
that.focusChess(x, y);
//重绘已经下好的棋子
that.redrawedChess()
});
}