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 相关文章推荐
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
vue使用echarts实现折线图
Mar 21 Vue.js
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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
php函数的常用方法及注意之处小结
2011/07/10 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
python 将字符串转换成字典dict
2013/03/24 Python
python实现外卖信息管理系统
2018/01/11 Python
python实现自动解数独小程序
2019/01/21 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python系列 文件操作的代码
2019/10/06 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Java文件和目录(IO)操作
2014/08/26 面试题
党员目标管理责任书
2014/07/25 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
运动会报道稿大全
2015/07/23 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫