牛逼的AlphaGo，怎样用DIV+CSS画棋盘

最新推荐文章于 2022-10-27 09:54:38 发布
最新推荐文章于 2022-10-27 09:54:38 发布
阅读量2.6k 收藏 4
点赞数
分类专栏： 技巧，实战问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38077266/article/details/72730203
版权

这两天柯洁对阵阿尔法狗，不得不说一句人工智能真TM的强大，我觉得把他电源拔了，我肯定能下过他

但是我只会下五子棋，不会下围棋啊

但是我也会画棋盘，你肯定会认为不就是画棋盘吗，给div一个border不就行了

非也非也，我们下过棋的都是知道的，棋子是要下在交叉线上的了

小学的时候用过田子格的那种本子吧

我们今天的目的就是要给实现这个效果，先上效果图帮助大家理解一下

相信大家已经看明白了，这就是在div容器里画两条相互垂直的线，这肯定是border不能办到的

那我们用什么呢

我在思考这个问题的时候也是想了很久，当时都想用canvas了

但是但是，我试了一下伪元素，没想到成功了
最低0.47元/天 解锁文章
3crazy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS+JS写一个棋盘（幻影围棋1.0版）
Damp_XUN的博客
07-17 2200
幻影围棋1.0版 实现了棋盘，点击下棋，切换先后手 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
【围棋棋盘绘制——html实现】，2024年最新前端开发究竟该如何学习
最新发布
m0_61331573的博客
04-18 450
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
使用CSS实现国际象棋棋盘
CH_Y的博客
10-27 951
如何使用CSS实现国际象棋棋盘？只要通过两个直角三角形拼接出我们想要的方块，但是这本质上只是棋盘的一半，想要得到完整的棋盘只需要把这组重复一份，创建出另一组正方形，并且偏移它们的位置，即可实现国际象棋棋盘。
纯css3棋盘图案背景以及45度斜纹背景
01-02 280
css代码.stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; backgr...
html5 canvas 绘制象棋（将持续改进）
wangxugangzy05的专栏
03-16 3023
象棋 canvas.middle{ border:1px solid #dddddd; cursor:crosshair;    var mycanvas = document.getElementById("middle"); ctx = mycanvas.getContext("2d"); var layout={ offsetWidth:
纯CSS3之五子棋（黑白棋）画法
weixin_30532973的博客
10-28 253
无聊想用JS写个五子棋玩玩，这边先用CSS3画出了五子棋，感觉挺惊艳的。发上来看看 PS:第一次发博文T-T 此为个人原创。 不多说上图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tit...
JQuery 国际象棋棋盘 实现代码
12-09
首先要实现棋子的排布，这毫无疑问得用div+css了。 具体代码可以看Jquery做的国际象棋棋盘（查看源代码） 。 一开始我给每种棋子都写了类，实际上这是比较愚蠢的行为。首先，这样子css代码会有冗余。其次，在棋子...
灵活运用CSS3特性绘制简易版围棋效果
09-27
在本文中，我们将深入...通过设置背景渐变来生成棋盘的格子图案，再用盒阴影为棋盘和棋子增添立体感，我们就能够用纯CSS实现一个逼真的围棋界面。这样的实践不仅有助于提升CSS3技能，还能够激发对网页设计创新的思考。
snake-game:使用HTML，CSS和Javascript重新创建的经典诺基亚移动Snake游戏。 使用基于div的网格系统渲染游戏板
04-30
使用基于div的网格系统渲染游戏板。 特征 可以使用开始按钮开始游戏 如果蛇撞到棋盘的边界或自己撞到了棋盘，则游戏结束。 在两者之间玩或暂停游戏 蛇吃食物后的动态得分和水平计算。 每次升级后加快速度。 可以...
connect4:Connect 4模仿（HTMLCSS和jQuery）
05-10
目的是创建一个模拟经典棋盘游戏“ Connect 4”的游戏。 我将游戏分解为最基本的部分。 有7列和6行，我通过DIV表示了该结构。 有两个值输入，玩家1的选择和玩家2的选择。 我将播放器1表示为红色，将播放器2表示为...
AngularGridGames:angularjs指令和小型框架，可快速设计基于2d网格的棋盘游戏
05-07
角网格游戏一个角度指令和小型框架，用于快速设计基于2d网格的棋盘游戏。 这是一个正在进行的工作。 Checkers和Othello游戏示例具有功能性。 多年前，当我学习javascript时，我写了一个ethello克隆，十年后的今天，...
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
js+canvas版象棋博弈之第一步:棋盘绘制
05-26
js+canvas版象棋博弈之第一步:棋盘绘制
html+js实现围棋棋盘
09-13
在html页面中使用javascript脚本，动态添加div元素，实现一个19*19的围棋棋盘，资源包含各坐标点的背景图片以及js完整代码。
用JavaScript编写黑白棋
02-25
苹果棋又叫黑白棋或翻转棋，苹果棋的棋盘是一个有8*8方格的棋盘。 下棋时将棋下在空格中间，而不是像围棋一样下在交叉点上。 开始时在棋盘正中有两白两黑四个棋子交叉放置，黑棋总是先下子。下子的方法：在棋盘上移动鼠标，会出现定位框，从定位框位置往周围延伸，如果在横、竖、斜八个方向内有一个自己的棋子， 而且被夹在中间的有对方的棋子，则中间的全部翻转，成为自己的棋子。 并且，只有在可以翻转棋子的地方下子才有效。胜负判定条件：如果玩家在棋盘上没有地方可以下子，则该玩家对手可以连下。 双方都没有棋子可以下时棋局结束，以棋子数目来计算胜负，棋子多的一方获胜。 在棋盘还没有下满时，如果一方的棋子已经被对方吃光，则棋局也结束。将对手棋子吃光的一方获胜。
【canvas画棋盘精简版】
trytryba的博客
06-28 351
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
纯CSS 实现格子背景（国际象棋棋盘）
weixin_39415598的博客
05-28 1016
theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情 本文简介 点赞 + 收藏 + 关注 = 学会了 这次会使用css画出一个格子背景。并且一步步分析如何实现~ 思路 直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。 三角形可以使用 background-image 的渐变来实现。 ...
canvas画棋盘代码优化-追求最简
trytryba的博客
06-29 182
昨天用canvas了个画棋盘，今天优化了一下,目前能做到的最简。
我使用HTML和CSS画了一个象棋的棋盘以及棋子，我该怎么做可以让棋子动起来
05-26
要让棋子动起来，你需要使用JavaScript来添加交互性。以下是一些实现的步骤： 1. 为每个棋子创建一个JavaScript对象，其中包含其位置、颜色和其他相关信息。 2. 使用JavaScript监听鼠标事件，例如mousedown和mouseup，以便在拖动棋子时更新其位置。 3. 当棋子移动时，使用CSS的transform属性来更新其位置。例如，你可以使用translateX和translateY来移动棋子。 4. 如果需要，可以使用CSS的transition属性来为棋子添加动画效果。 下面是一个简单的示例代码，可以帮助你开始实现棋子的移动： ```html <!DOCTYPE html> <html> <head> <title>Chess Board</title> <style> .chessboard { display: flex; flex-wrap: wrap; width: 400px; height: 400px; margin: 0 auto; } .square { box-sizing: border-box; width: 50px; height: 50px; border: 1px solid black; background-color: #EFEFEF; } .piece { position: absolute; width: 50px; height: 50px; background-image: url("pieces.png"); background-size: 600px 200px; } </style> </head> <body> <div class="chessboard"> <div class="square"></div> <div class="square"></div> <!-- more squares... --> </div> <script> // Define chess pieces as JavaScript objects var pieces = [ { type: "rook", color: "white", position: "a1" }, { type: "knight", color: "white", position: "b1" }, // more pieces... ]; // Create HTML elements for each piece pieces.forEach(function(piece) { var element = document.createElement("div"); element.className = "piece " + piece.type + " " + piece.color; element.style.backgroundPosition = getBackgroundPosition(piece.type, piece.color); element.style.left = getLeftOffset(piece.position); element.style.top = getTopOffset(piece.position); document.body.appendChild(element); }); // Define event listeners for mouse events var draggedPiece = null; document.addEventListener("mousedown", function(event) { if (event.target.classList.contains("piece")) { draggedPiece = event.target; } }); document.addEventListener("mouseup", function(event) { if (draggedPiece) { draggedPiece.style.transform = "translate(" + event.clientX + "px, " + event.clientY + "px)"; draggedPiece = null; } }); // Helper functions to calculate background position and element offset function getBackgroundPosition(type, color) { var x = { "rook": 0, "knight": -50, // more positions... }[type]; var y = { "white": 0, "black": -50, }[color]; return x + "px " + y + "px"; } function getLeftOffset(position) { return (position.charCodeAt(0) - "a".charCodeAt(0)) * 50 + "px"; } function getTopOffset(position) { return (8 - parseInt(position.charAt(1))) * 50 + "px"; } </script> </body> </html> ``` 请注意，这只是一个简单的例子，你需要根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值