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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
javascript与有限状态机详解
May 08 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript定义函数的三种实现方法
Sep 23 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Javascript - HTML的request类
2007/01/09 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Element input树型下拉框的实现代码
2018/12/21 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python中Lambda表达式详解
2019/11/20 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
百度软件工程师职位
2013/02/14 面试题
农行实习自我鉴定
2013/09/22 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
股东协议书范本
2014/04/14 职场文书