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 相关文章推荐
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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异常处理使用示例
2014/02/25 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
详解js访问对象的属性和方法
2018/10/25 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JavaScript实现刮刮乐效果
2020/11/01 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
Linux的文件类型
2016/07/05 面试题
五星红旗迎风飘扬观后感
2015/06/17 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书