十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
创新互联公司主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务禹城,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575这篇文章将为大家详细讲解有关javascript canvas制作五子棋游戏的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
第一部分:核心类Gobang
属性:
this.box = box; // 存放五子棋的容器 this.canvas = null; // 画布 this.ctx = null; this.size = 600; // 棋盘大小 this.cellNum = 20; // 单行棋格数量 this.padding = this.size/this.cellNum; // padding值 this.cellSize = (this.size-this.padding*2)/this.cellNum; // 棋格大小 this.pieceSize = this.cellSize*3/4; // 棋子大小 this.color = ["black", "#aaa"]; // 棋子颜色 this.myPieceType = null; // 玩家棋子类型 this.aiPieceType = null; // 电脑棋子类型 this.myPieces = []; // 玩家累计棋子 this.aiPieces = []; // 电脑累计棋子 this.isMyTurn = true; // 先手 this.curPos = [this.cellNum/2-1, this.cellNum/2-1]; // 当前点击位置 this.timeId = null; // 定时器id