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 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue选项卡切换登录方式小案例
Sep 27 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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 文件上传后端处理实用技巧方法
2017/01/06 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
wxPython窗口中文乱码解决方法
2014/10/11 Python
详解python开发环境搭建
2016/12/16 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
python标准库ElementTree处理xml
2022/05/20 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android