H5 C3 JS实现双人五子棋游戏(UI章节)

本文实现了两人对战模式，主要是实现人机AI算法和判断输赢之外的其他功能。下一篇文章将发布AI

构架建筑

！Doctype htmlhtml头！-百度爬虫优化-meta http-equiv='作者'内容='程，缘分可能'/meta http-equiv='关键词' content='五子棋，人机大战，单人游戏，双人游戏，小游戏'/meta Charset=' utf-8 '/标题爱淘宝-Gozi margin : 50px auto；box-shadow :-2px-2px # EFE fef，5px 5px 5px # b9b 9；} #chess:hover{ cursor:指针；} /style脚本window . onload=function(){ }；/剧本/头身！-棋盘-画布id=' chess ' width=' 450 px ' height=' 450 px '/画布/body/html定义了一些需要使用的全局变量

script//get canvas var chess=document . getelementbyid(' chess ')；//获取2d画布varcontext=chess . getcontext(' 2d ')；//指定当前是否为黑色，在UI中只使用var me=true//指定当前位置是否已掉，1代表黑色，2代表白色，0代表空var curIndex=[]；for(var I=0；i 15I){ Curindex[I]=[]；for(var j=0；歼15；j)curIndex[I][j]=0；}/脚本用画布绘制棋盘

Script函数drawtable() {//我们设置的棋盘共有15条横线，15条总线，左右上下的边距为15px，其中每一个棋子相隔30px，所以绘制棋盘从15px开始进行(var I=0；i 15I)for(var j=0；歼15；J) {//画水平线context.moveTo(15，15j * 30)；context.lineTo(435，15j * 30)；//绘制垂直线context.moveTo(15 j *30，15)；context.lineTo(15 j *30，435)；//使用灰色笔画context.strokeStyle=' # bfbfbfcontext . stroke()；} };draw table()；/script onclick棋盘事件：在这个位置画一个棋子，每次点击黑白

剧本棋。onclick=function(event){//获取待玩棋子的位置var x=math。场内(活动。offsetx/30)；var y=math . floor(event . offset/30)；//判断点是否已经给出if(curIndex[x][y]！=0)返回；//开始绘制上下文. BeginPath()；//绘制指定的圆context.arc (15 x * 30，15 y * 30，15，0，2 * math . pi)；//填写if(me){ context . fill style=' # 636766 '；curIndex[x][y]=1；me=false} else { context . FillStyle=' # b9b 9 b 9 '；curIndex[x][y]=2；me=true} context . fill()；//结束绘图上下文. closepath()；};/script最终呈现

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。