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

最新推荐文章于 2024-05-14 08:37:27 发布
最新推荐文章于 2024-05-14 08:37:27 发布
阅读量2.6k 收藏 4
点赞数
分类专栏： 技巧，实战问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38077266/article/details/72730203
版权
这篇博客分享了如何利用CSS的伪元素技巧来绘制一个具有交叉线下棋点的棋盘，避免使用canvas，通过相对和绝对定位实现棋盘的田字格效果。作者还提供了自己制作的五子棋小游戏的展示页和代码页链接。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

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

那我们用什么呢

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

但是但是，我试了一下伪元素，没想到成功了
最低0.47元/天 解锁文章
3crazy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS+JS写一个棋盘（幻影围棋1.0版）
Damp_XUN的博客
07-17 2206
幻影围棋1.0版 实现了棋盘，点击下棋，切换先后手 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
html5 canvas 绘制象棋（将持续改进）
wangxugangzy05的专栏
03-16 3026
象棋 canvas.middle{ border:1px solid #dddddd; cursor:crosshair;    var mycanvas = document.getElementById("middle"); ctx = mycanvas.getContext("2d"); var layout={ offsetWidth:
使用CSS实现国际象棋棋盘
CH_Y的博客
10-27 957
如何使用CSS实现国际象棋棋盘？只要通过两个直角三角形拼接出我们想要的方块，但是这本质上只是棋盘的一半，想要得到完整的棋盘只需要把这组重复一份，创建出另一组正方形，并且偏移它们的位置，即可实现国际象棋棋盘。
2024年Go最新如何使用 CSS flex box 和 Javascript 设计棋盘_css棋盘格(1)，2024年最新膜拜大牛
最新发布
2401_84919775的博客
05-14 319
【代码】2024年Go最新如何使用 CSS flex box 和 Javascript 设计棋盘_css棋盘格(1)，2024年最新膜拜大牛。
纯css3棋盘图案背景以及45度斜纹背景
01-02 291
css代码.stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; backgr...
纯CSS3之五子棋（黑白棋）画法
weixin_30532973的博客
10-28 254
无聊想用JS写个五子棋玩玩，这边先用CSS3画出了五子棋，感觉挺惊艳的。发上来看看 PS:第一次发博文T-T 此为个人原创。 不多说上图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tit...
五子棋人机对战，div+css,canvas绘制i.rar
10-15
开发者可以利用JavaScript控制Canvas的`fillRect()`、`strokeRect()`等方法画出棋盘网格，再通过`beginPath()`、`moveTo()`、`lineTo()`等函数描绘棋子。当用户点击棋盘时，Canvas会检测点击位置，并在相应位置绘制...
html+css+javascript 实现小游戏 2048
10-15
首先，创建一个`<div>`元素作为游戏面板，每个数字方块都是一个`<div>`子元素。此外，还需要创建控制面板，包括“新游戏”按钮和分数显示区域。HTML代码应确保这些元素的位置和尺寸正确，以便于用户交互。 二、CSS...
h5+js+css 2048.zip
06-13
例如，我们需要一个网格容器来显示游戏棋盘，每个格子则用`<div>`元素表示。通过设置这些元素的ID和类名，我们可以方便地在JavaScript和CSS中引用它们。同时，HTML5也提供了新的API，如Canvas，用于动态绘制游戏元素...
前端小游戏-经典推箱子(HTML+CSS+JS)
11-09
例如，我们可以使用CSS Grid或Flexbox来创建游戏棋盘，确保每个格子的大小一致，同时为箱子和目标添加独特的样式以区分它们。此外，CSS动画可以用来模拟箱子移动的过程，增加游戏的动态效果。 JavaScript是这个游戏...
使用html+css+JavaScript实现中国象棋的对弈，并给出代码
06-03
- `<div id="board">` 是棋盘的容器。 - `<table id="chess-table">` 创建棋盘网格。 - `<th>` 和 `<td>` 用于表示行列单元格。 - `<img id="player" src="img/red.png"/>` 和 `...
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
js+canvas版象棋博弈之第一步:棋盘绘制
05-26
js+canvas版象棋博弈之第一步:棋盘绘制
html+js实现围棋棋盘
09-13
在html页面中使用javascript脚本，动态添加div元素，实现一个19*19的围棋棋盘，资源包含各坐标点的背景图片以及js完整代码。
灵活运用CSS3特性绘制简易版围棋效果
01-19
前言 渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋 效果图 实现代码 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html lang=en>      <head>       <meta charset=UTF-8>       <meta name=viewport content=width=device-width, initial-scale=1.0>       <meta http-equiv=X-UA-Compatible content=ie=
用JavaScript编写黑白棋
02-25
苹果棋又叫黑白棋或翻转棋，苹果棋的棋盘是一个有8*8方格的棋盘。 下棋时将棋下在空格中间，而不是像围棋一样下在交叉点上。 开始时在棋盘正中有两白两黑四个棋子交叉放置，黑棋总是先下子。下子的方法：在棋盘上移动鼠标，会出现定位框，从定位框位置往周围延伸，如果在横、竖、斜八个方向内有一个自己的棋子， 而且被夹在中间的有对方的棋子，则中间的全部翻转，成为自己的棋子。 并且，只有在可以翻转棋子的地方下子才有效。胜负判定条件：如果玩家在棋盘上没有地方可以下子，则该玩家对手可以连下。 双方都没有棋子可以下时棋局结束，以棋子数目来计算胜负，棋子多的一方获胜。 在棋盘还没有下满时，如果一方的棋子已经被对方吃光，则棋局也结束。将对手棋子吃光的一方获胜。
【canvas画棋盘精简版】
trytryba的博客
06-28 358
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
纯CSS 实现格子背景（国际象棋棋盘）
weixin_39415598的博客
05-28 1024
theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情 本文简介 点赞 + 收藏 + 关注 = 学会了 这次会使用css画出一个格子背景。并且一步步分析如何实现~ 思路 直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。 三角形可以使用 background-image 的渐变来实现。 ...
canvas画棋盘代码优化-追求最简
trytryba的博客
06-29 184
昨天用canvas了个画棋盘，今天优化了一下,目前能做到的最简。
我使用HTML和CSS画了一个象棋的棋盘以及棋子，我该怎么做可以让棋子动起来
05-26
<div class="square"></div> <div class="square"></div> <!-- more squares... --> </div> // Define chess pieces as JavaScript objects var pieces = [ { type: "rook", color: "white", ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值