JS canvas绘制五子棋的棋盘


Posted in Javascript onMay 28, 2020

本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下

box-shadow:给元素块周边添加阴影效果。
语法:box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边;如果是负值,则阴影在元素块左边。
v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部;如果是负值,则阴影在元素块顶部。
blur: (可选)阴影的模糊半径,其值大于等于0;为0时阴影不具有模糊效果,值越大阴影边缘越模糊。
spread: (可选)阴影扩展半径,值为正,整个阴影都扩大;值为负,整个阴影都缩小。
color: (可选)阴影颜色。
insert: (可选)不设值则默认为外部阴影,取insert则投影为内阴影。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>五子棋</title>
 <style type="text/css">
 canvas{
 display: block;
 margin: 50px auto;
 box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
 }
 </style>
</head>
<body>
 <canvas id="mycanvas" width="450px" height="450px"></canvas>
 <script type="text/javascript">
 var chess = document.getElementById("mycanvas");
 var context = chess.getContext('2d');
 var me = true;
 var chessBox = [];//用于存放棋盘中落子的情况
 for(var i=0;i<15;i++){
  chessBox[i]=[];
  for(var j=0;j<15;j++){
  chessBox[i][j]=0;//初始值为0
  }
 }
 function drawChessBoard(){
  for(var i=0;i<15;i++){
  context.strokeStyle="#D6D1D1";
  context.moveTo(15+i*30,15);//垂直方向画15根线,相距30px;
  context.lineTo(15+i*30,435);
  context.stroke();
  context.moveTo(15,15+i*30);//水平方向画15根线,相距30px;棋盘为14*14;
  context.lineTo(435,15+i*30);
  context.stroke();
  }
 }
 drawChessBoard();//绘制棋盘
 function oneStep(i,j,k){
  context.beginPath();
  context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//绘制棋子
  var g=context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);//设置渐变
  if(k){    //k=true是黑棋,否则是白棋
  g.addColorStop(0,'#0A0A0A');//黑棋
  g.addColorStop(1,'#636766');
  }else {
  g.addColorStop(0,'#D1D1D1');//白棋
  g.addColorStop(1,'#F9F9F9');
  }
  context.fillStyle=g;
  context.fill();
  context.closePath();
 }
 chess.onclick=function(e){
  var x = e.offsetX;//相对于棋盘左上角的x坐标
  var y = e.offsetY;//相对于棋盘左上角的y坐标
  var i = Math.floor(x/30);
  var j = Math.floor(y/30);
  if( chessBox[i][j] == 0 ) {
  oneStep(i,j,me);
  if(me){
   chessBox[i][j]=1;
  }else{
   chessBox[i][j]=2;
  }
  me=!me;//下一步白棋
  }
 }
 </script>
</body>
</html>

效果图是这样的

JS canvas绘制五子棋的棋盘

更多有趣的经典小游戏实现专题,分享给大家:

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

Javascript 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 #Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 #Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 #Javascript
vue element table 表格请求后台排序的方法
Sep 28 #Javascript
You might like
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
对Python _取log的几种方式小结
2019/07/25 Python
python zip()函数的使用示例
2020/09/23 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
心得体会开头
2014/01/01 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
毕业自我评价
2014/02/05 职场文书
服装促销活动方案
2014/02/23 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
班级旅游计划书
2014/05/03 职场文书
个人整改措施书面材料
2014/10/24 职场文书
中标通知书范本
2015/04/17 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
深入理解python协程
2021/06/15 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js