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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
js图片切换具体实现代码
Oct 13 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue中实现高德定位功能
Dec 03 Javascript
js实现简单的秒表
Jan 16 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
在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
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
浅谈Python的垃圾回收机制
2016/12/17 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
二手书店创业计划书
2014/01/16 职场文书
个人银行贷款担保书
2014/04/01 职场文书
学前班语言教学计划
2015/01/20 职场文书
长城英文导游词
2015/01/30 职场文书
校园运动会广播稿
2015/08/19 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python