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


Posted in Javascript onMay 28, 2020

本篇文章实现的是双人对战模式,主要是实现除人机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>

最终效果图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
js实现不重复导入的方法
Mar 02 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 #Javascript
vue element table 表格请求后台排序的方法
Sep 28 #Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 #Javascript
在vue项目中正确使用iconfont的方法
Sep 28 #Javascript
vue项目引入字体.ttf的方法
Sep 28 #Javascript
vue打包相关细节整理(小结)
Sep 28 #Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 #Javascript
You might like
PHP setTime 设置当前时间的代码
2012/08/27 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
js动态设置div的值下例子
2013/10/29 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
python 字符串split的用法分享
2013/03/23 Python
使用python Django做网页
2013/11/04 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
python实现批量转换图片为黑白
2020/06/16 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
董事长助理岗位职责
2014/02/18 职场文书
中秋节活动总结
2014/08/29 职场文书
黑白记忆观后感
2015/06/18 职场文书