象棋html

最新推荐文章于 2024-08-04 17:32:40 发布
原创 最新推荐文章于 2024-08-04 17:32:40 发布 · 486 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5

这是一个使用HTML和CSS技术创建的中国象棋棋盘页面，展示了黑色和红色棋子的布局。页面包含棋子的规则标识，如车、马、炮、兵等，并且有开发者信息提示。

在这里插入图片描述

<!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=edge">
    <title>Document</title>
</head>
<body>
    <div class="wall">
        <div class="wintitle"></div>
    </div>
    <div class="wrap">
       
        <div item="black" class="qizi black" Index="0"  rule="车" row="1" line="1">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="1" row="1" line="2" rule="马">
            <div >馬</div>
        </div>
        <div item="black" class="qizi black" Index="2" row="1" line="3" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="3" row="1" line="4" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="4" row="1" line="5" rule="帅" live="1">
            <div >帥</div>
        </div>
        <div item="black" class="qizi black" Index="5" row="1" line="6" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="6" row="1" line="7" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="7" row="1" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="black" class="qizi black" Index="8" rule="车" row="1" line="9">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="9" row="3" line="2" rule="炮">
            <div >炮</div>
        </div>
        <div item="black" class="qizi black" Index="10" row="3" line="8" rule="炮">
            <div>炮</div>
        </div>
        <div item="black" class="qizi black" Index="11" row="4" line="1" rule="兵">
            <div >卒</div>
        </div>
        <div item="black" class="qizi black" Index="12" row="4" line="3" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="13" row="4" line="5" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="14" row="4" line="7" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="15" row="4" line="9" rule="兵">
            <div>卒</div>
        </div>
        <div item="red" class="qizi red" Index="16" row="7" line="1" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="17" row="7" line="3" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="18" row="7" line="5" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="19" row="7" line="7" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="20" row="7" line="9" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="21" row="8" line="2" rule="炮">
            <div>炮</div>
        </div>
        <div item="red" class="qizi red" Index="22" row="8" line="8" rule="炮">
            <div>炮</div>
        </div>   
        <div item="red" class="qizi red" Index="23" rule="车" row="10" line="1">
            <div>車</div>
        </div>
        <div item="red" class="qizi red" Index="24" row="10" line="2" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="25"  row="10" line="3"  rule="相">
            <div>相</div>
        </div>
        <div item="red" class="qizi red" Index="26"  row="10" line="4" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="27"  row="10" line="5" rule="帅" live="2">
            <div>將</div>
        </div>
        <div item="red" class="qizi red" Index="28"  row="10" line="6" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="29"  row="10" line="7"  rule="相"> 
            <div>相</div>
        </div>
        <div item="red" class="qizi red"  Index="30" row="10" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="31" rule="车"  row="10" line="9">
            <div>車</div>
        </div>
      
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="qipan">      
            </div>
        <div style="position: relative; top: 20px;left:28px;font-size: 18px;">
            开发者--李志强，如在使用过程中发现bug或者不合理的地方，可以联系作者进行修改
        </div>
    </div>
    <script src="1.js" ></script>
</body>
</html>
<style>
    body{
        margin: 0px 0px;
        user-select: none;
    }
    .wrap{
        margin: auto;
        /* margin-top: 40px; */
        width: 764px;
        height: 848px;
        position: relative;
      
    }
    .qipan{
        top: 32px;
        left: 32px;
        width: 700px;
        height: 784px;
        background-image: url('./象棋.jpg');
        position: relative;
        z-index: -5;
    }
    .weizhi{
        width: 84px;
        height: 84px;
        float: left;
    }
    .qizi{
        width: 84px;
        height: 84px;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        transition:top 0.3s linear,left 0.3s linear;
    }
    .qizi div{
        width: 70px;
        height: 70px;
        border: 2px solid #bebebe;
        box-shadow: 0px 0px 2px #888888;
        background: rgba(216, 216, 216, 1);
        margin-left: 6px;
        margin-top: 6px;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        font-size:30px;
    }
    .red{
        color: red;
    }
    .wintitle{
        position: fixed;
        left: 42%;
        top: 41%;
        height: 70px;
        width: 300px;
        text-align: center;
        border-radius: 30px;
        background: white;
        color: black;
        font-size: 40px;
        font-weight: bold;
        line-height: 70px;
    }
    .wall{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        background: rgba(0,0,0,0.3);
        display: none;
    }
</style>
李小楓
关注
VUE轮询更新进度条：JavaScript中的定时器和异步编程技巧
Blog of Leviash
09-22 1198
在Web开发中，有许多场景需要实时地更新页面上的进度，例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度，并探讨一些其他解决方案。本文介绍了如何利用JavaScript中的定时器和异步编程技巧实现实时更新进度的效果，同时也探讨了一些其他解决方案。根据具体场景的需求，选择合适的方法来实现实时更新将会极大地改善用户体验。
Vue 使用插槽vm.$slots实现一个导航栏结构
qq_47119426的博客
10-23 5927
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> </head> <script src="./JS/vue.js"></script> <style> .Navbar{ display: flex; height: 44
Odoo owl 学习笔记之11—slots 目录 插槽概述... 1 命名槽... 2 渲染上下文
05-10
Odoo owl 学习笔记之11—slots 目录 插槽..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽 | 匿名插槽... 9 概述 Owl 是一个基于模板的组件系统。因此需要能够制造通用组件。例如，想象一个通用Navbar 组件，它显示一个导航栏，但有一些可定制的内容。由于具体内容只有 的用户知道Navbar，所以最好在使用的模板中指定它Navbar
练习1：QQ会员页面导航.7z
06-04
第七章的上级练习1参考答案：QQ会员页面导航，里面有详细的css样式代码，大家可以仔细参考一下！
css 圆形扩散特效 水波
笔记库
10-16 2289
<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=...
请使用插槽vm.$slots实现一个导航栏结构
weixin_47518648的博客
10-25 2724
运行结果如下： 话不多说，直接开整： 样式如下： <style> #navga{ top:0; left:0; right: 0; display: flex; justify-content: space-between; align-items: center; padding:..
中国象棋HTML5源码
03-18
【中国象棋HTML5源码】是一个基于HTML5技术实现的在线中国象棋游戏项目，主要涉及前端开发，利用HTML、CSS和JavaScript等技术构建。这个项目为学习者提供了了解和实践Web游戏开发的实例，同时也展示了HTML5在游戏...
精选资源
国际象棋html5 JavaScript 源码
09-01
国际象棋html5 JavaScript 中的 3D 游戏 这是一款简单的多人 3D 国际象棋游戏，完全使用 JavaScript 和 HTML5 开发，并添加 CSS，使其具有漂亮的外观和画龙点睛之笔。该项目已使用 javascript 和 jquery 进行验证。...
精选资源
国际象棋html网站模板
04-02
【国际象棋html网站模板】是一种专为展示和推广国际象棋相关活动、教程或社区设计的网页模板。这类模板通常包含一系列与国际象棋相关的元素、布局和功能，旨在提供用户友好的交互体验，吸引并服务于国际象棋爱好者。...
精选资源
HTML实现中国象棋，双人对战
02-16
在利用HTML实现中国象棋双人对战的项目中，首先要考虑棋盘的设计与展示。中国象棋的棋盘是九宫格结构，由9条垂直线和10条水平线交叉形成，共有90个交叉点。在HTML中，可以使用表格或者div元素来绘制棋盘，并利用CSS...
中国象棋html5实现
09-07
【中国象棋html5实现】是一项利用现代网页技术构建传统棋类游戏的实践项目，它展示了HTML5在游戏开发中的应用潜力。在这个项目中，开发者使用HTML5的Canvas API、JavaScript语言以及可能的CSS3来创建一个交互式的...
Vue初学22-具名插槽（slot）的使用-标题导航栏为例
04-22
Vue初学22-具名插槽（slot）的使用-标题导航栏为例的两个图标，Vue初学22-具名插槽（slot）的使用-标题导航栏为例的两个图标
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 990
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
【项目复盘Vue2.0】利用具名插槽制作可复用多样式导航栏
Weiqian_的博客
04-03 1673
一、实现效果： 本项目涉及到的导航栏样式如下： 1.首页的导航栏 2.商品详情页导航栏 二、思路分析： 先确定导航栏框架： 因为每个页面的导航栏需求不一样，因此可以利用插槽建立框架组件，再将此导航栏框架组件在其他页面甚至下个项目进行复用。 三、实现思路复盘： 注：以下思路源于本人对b站coderwhy老师项目的过程复盘，并非本人创作（侵删），仅做学习复盘用 结构搭建： 1.新建NavBar组件，里面放入3个slot插槽：左中右各一个 <template&
用jQuery实现轮播图效果（自动播放，能手动切换）
热门推荐
l9528的博客
09-11 1万+
大家好，今天我和大家分享一下轮播图的实现， 下面是我做的轮播图效果 首先我们看到，它是由背景图片、方向图标和指示器组成。我们发现背景图片、方向图标和指示器是层叠在一起的，所以布局时我们要用绝对定位。我们要实现点击方向图标时，图片跟着变换；点击指示器时，图片跟着变换；不点击时每隔5秒自动播放；不点击时不显示方向图标。 结构布局：用一个div包裹3个div，里面的3个div分别显示背景图片部分、方向图标部分和指示器部分。 <!DOCTYPE html> <html lang="e
Vue学习之插槽vue.$slot的使用/使用插槽vm.$slots实现一个导航栏结构
m0_64074057的博客
10-26 585
【代码】Vue学习之插槽vue.$slot的使用/使用插槽vm.$slots实现一个导航栏结构。
css 加载中效果的动画
PrimaryColor
09-09 256
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ..
【html】用html和JavaScript实现一个调色盘（可以用来生成纯色桌面背景）
weixin_56334307的博客
08-04 1425
1.通过JavaScript 常见三个滑动条，设置范围（0-255），分别表示 r g b2.将 r g b 转为颜色，并设置为画布的背景颜色3.通过浏览器开发者工具截取节点屏幕截图并保存4.设为桌面背景。
HTML调色板
angxingyu9791的博客
07-11 1262
　　调色板路径 https://encycolorpedia.cn/ 转载于:https://www.cnblogs.com/nhdlb/p/11168622.html
中国象棋html源码
最新发布
08-23
要获取中国象棋的 HTML 源代码，通常需要关注以下几个方面： 1. **HTML5 和 JavaScript 的结合**：中国象棋游戏通常基于 HTML5 技术实现，结合 JavaScript 来处理游戏逻辑，包括棋盘绘制、棋子移动、胜负判断等功能。这种实现方式不需要依赖任何插件，可以在现代浏览器中直接运行[^1]。 2. **源码获取方式**：许多网站提供中国象棋游戏的源码下载，比如一些技术博客或者资源分享网站。在这些网站上，通常可以通过点击“下载源码”按钮来获取完整的项目文件。这些文件可能包括 HTML、CSS、JavaScript 代码以及相关的图片资源[^2]。 3. **功能扩展性**：如果你希望自定义中国象棋游戏的功能，例如调整难度、切换棋盘样式等，可以查看源码中是否有相关的配置项或接口。一些高质量的开源项目会提供详细的文档，帮助开发者快速上手并进行二次开发[^1]。 4. **代码结构**：一个典型的中国象棋项目通常包含以下几个部分： - **HTML 文件**：用于定义页面结构和棋盘布局。 - **CSS 文件**：用于美化棋盘和棋子的外观。 - **JavaScript 文件**：用于实现游戏逻辑，包括棋子的移动规则、胜负判断等。 以下是一个简单的 HTML 和 JavaScript 结合的中国象棋棋盘绘制示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国象棋</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="chessBoard" width="600" height="600"></canvas> <script> const canvas = document.getElementById('chessBoard'); const ctx = canvas.getContext('2d'); // 绘制棋盘 function drawBoard() { const width = canvas.width; const height = canvas.height; const rows = 10; const cols = 9; const cellWidth = width / cols; const cellHeight = height / rows; for (let i = 0; i <= rows; i++) { ctx.beginPath(); ctx.moveTo(0, i * cellHeight); ctx.lineTo(width, i * cellHeight); ctx.stroke(); } for (let j = 0; j <= cols; j++) { ctx.beginPath(); ctx.moveTo(j * cellWidth, 0); ctx.lineTo(j * cellWidth, height); ctx.stroke(); } // 绘制“楚河汉界” ctx.font = "20px Arial"; ctx.fillText("楚", 2 * cellWidth, 5 * cellHeight); ctx.fillText("河", 3 * cellWidth, 5 * cellHeight); ctx.fillText("汉", 5 * cellWidth, 5 * cellHeight); ctx.fillText("界", 6 * cellWidth, 5 * cellHeight); } drawBoard(); </script> </body> </html> ``` 这段代码使用 HTML5 的 `<canvas>` 元素来绘制中国象棋的棋盘，并在棋盘上标注“楚河汉界”。你可以在此基础上扩展更多功能，如棋子的绘制、交互逻辑等。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值