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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
公众号SVG动画交互实战代码
May 31 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
PHP实现的json类实例
2015/07/28 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
学python最电脑配置有要求么
2020/07/05 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
收款授权委托书
2014/10/02 职场文书
2014年教务处工作总结
2014/12/03 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
“5.12”护士节主持词
2015/07/04 职场文书