H5+C3+JS实现双人对战五子棋游戏（UI篇）

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

框架搭建

<!Doctype html>
<html>

  <head>

    <!-- 百度爬虫优化 -->
    <meta http-equiv="author" content="成兮，缘分五月" />
    <meta http-equiv="Keywords" cotent="五子棋，人机大战，单人游戏，双人游戏，小游戏" />
    <meta Charset="utf-8" />

    <title>爱淘宝-五子棋</title>

    <style>
      #chess {
        display: block;
        margin: 50px auto;
        box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9;
      }
      #chess:hover{
        cursor: pointer;
      }
    </style>

    <script>
      window.onload = function() {

      } ;
    </script>

  </head>

  <body>
    <!-- 棋盘 -->
    <canvas id="chess" width="450px" height="450px"></canvas>

  </body>

</html>

定义一些需要用到的全局变量

<script>
  //获取棋盘canvas
  var chess = document.getElementById("chess");
  //获取2d画布
  var context = chess.getContext('2d');
  //指定当前是否黑色下，只在UI中使用
  var me = true;
  //指定当前位置是否下了其，1代表黑，2代表白，0代表空
  var curIndex = [];
  for(var i =0; i <15; i++) {
    curIndex[i] = [];
    for(var j =0; j <15; j++)
      curIndex[i][j] = 0;
  }
</script>

使用canvas绘制棋盘

<script>
  function drawtable() {
    //我们设置棋盘总共15根横线15根总线，左右上下都有15px的边距，其中每个棋子相距30px,因此绘制棋盘从15px开始

    for(var i =0; i <15; i++)
      for(var j =0; j <15; j++)
        {
          //绘制横线
          context.moveTo(15, 15 +j *30);
          context.lineTo(435, 15 +j *30);
          //绘制竖线
          context.moveTo(15 +j *30, 15);
          context.lineTo(15 +j *30, 435); 

          //使用灰色描边
          context.strokeStyle = "#bfbfbf";
          context.stroke();
        }
  };
  drawtable();
</script>

棋盘的onclick事件：在该位置上绘制一个棋子，每次点击黑白相间

<script>
  chess.onclick = function(event) {
    //获取要下的棋子的位置
    var x = Math.floor(event.offsetX /30);
    var y = Math.floor(event.offsetY /30);
    //判断该点是否已被下了
    if(curIndex[x][y] != 0)
      return;
    //开始绘制
    context.beginPath();
    //绘制指定圆
    context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI);
    //进行填充
    if(me) {
      context.fillStyle = "#636766";
      curIndex[x][y] = 1;
      me = false;
    }
    else {
      context.fillStyle = "#b9b9b9";
      curIndex[x][y] = 2;
      me = true;
    }
    context.fill();
    //结束绘制
    context.closePath();
  };
</script>

最终效果图

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

赞 (0)

相关推荐

  • javascript 初学教程及五子棋小程序的简单实现

    javascript 初学教程及五子棋小程序的简单实现

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+

  • JS canvas绘制五子棋的棋盘

    本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影

  • JavaScript实现五子棋游戏的方法详解

    本文实例讲述了JavaScript实现五子棋游戏的方法.分享给大家供大家参考,具体如下: 最近半个月一直在看深入的学习JavaScript,里面有很多重点和难点,比如闭包.词法分析.面向对象等.今天给大家分享一个由JavaScript编写的五子棋游戏,主要用到JavaScript的面向对象.事件委托.闭包等知识,还是挺有分量的,正好可以检测学习的成果. 老规矩,先上图,再说话. 效果图: 五子棋素材图: 代码: <!DOCTYPE html> <html> <head>

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

  • 基于JavaScript实现五子棋游戏

    本文实例为大家分享了js实现五子棋的具体代码,供大家参考,具体内容如下 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判断,并画棋子 4.根据下的棋子判断是否赢了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>

  • 原生JS+Canvas实现五子棋游戏

    本文实例为大家分享了JS  Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p

  • node.js利用socket.io实现多人在线匹配联机五子棋

    项目地址,已上传github --> client端使用简单的h5+js实现了棋局的总体布局. server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成. 五子棋ui界面请见.. client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去这里 下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的. 首先先带大家看一下目录结构 | server.j

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

  • H5+C3+JS实现五子棋游戏（AI篇）

    H5+C3+JS实现五子棋游戏（AI篇）

    本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){

  • JS+canvas实现的五子棋游戏【人机大战版】

    JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

  • 原生JS+Canvas实现五子棋游戏实例

    原生JS+Canvas实现五子棋游戏实例

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *

随机推荐