js自制小游戏 象棋

最新推荐文章于 2023-03-09 09:15:21 发布
最新推荐文章于 2023-03-09 09:15:21 发布
阅读量256 收藏
点赞数
文章标签： javascript servlet java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyinshaofeng/article/details/127109904
版权
这是一个使用JavaScript实现的中国象棋小游戏，包含了棋盘布局和部分棋子的走法规则，如車、马、相等。玩家可以操作棋子进行游戏。
摘要由CSDN通过智能技术生成

<!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">

最低0.47元/天 解锁文章
阿狸lyinshaofeng
关注
js简单做个象棋
好好打代码
01-09 520
【代码】js简单做个象棋。
李小枫原生js象棋
Li_xiaofen的博客
10-13 382
<!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>Do.
JS中国象棋
11-03
JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋
js象棋实现
03-06
纯js，css实现象棋功能，有需要的来
js 象棋游戏 _ 支持双方在线对战
jxiao2008的博客
07-09 1142
  说明：实在对不住诸位，的确是我弄错了，views/index.ejs里的对 socket.io.js的引用使用了我本地的绝对路径，需要修改为&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;即可，对此我重新打了个包。再次歉意！！！   上周做了javascript版的象棋游戏【详见 js 写中国象棋游戏_应用back...
Excel 象棋小游戏源代码，基于Excel VBA 宏制作的象棋小游戏源码
12-27
《Excel VBA宏实现的象棋小游戏解析》 在信息技术领域，Excel不仅仅是一个电子表格工具，它也提供了强大的编程功能，这就是VBA（Visual Basic for Applications）。本篇将深入探讨如何利用Excel VBA宏来创建一个...
中国象棋-联机游戏-微信小程序源码
02-25
这是一个微信小程序局域网内联机对战源码例子【中国象棋-联机游戏】项目，完整，可通过微信开发工具小程序方式打开，可正常编译运行，供学习可参考以下两个详解文章： ①中国象棋-单机游戏 ... ②让小程序游戏支持联机...
国际象棋-联机游戏-微信小程序源码
最新发布
12-20
这是一个微信小程序局域网内WiFi联机对战源码例子【国际象棋-联机游戏】项目，完整，可通过微信开发工具小程序方式打开，可正常编译运行，供学习可参考以下两个详解文章： ①国际象棋-单机游戏 ...
纯JS中国象棋
08-31
原创纯JS中国象棋，非jquery，非框架，纯javascript编写网页版中国象棋。纯属个人爱好而编写。
中国象棋(原生js+canvas)
12-11
简易的中国象棋 , 由原生JavaScript + canvas 开发, 适合初学者学习js 和canvas的应用!
纯JS象棋 AI算法
05-21
AI 人工智能 象棋游戏 AI 人工智能 象棋游戏 AI 人工智能 象棋游戏
JavaScript象棋
12-09
“楚汉相争，鸿沟为界”，这句话里诠释着中国象棋博大文化精髓，象棋是由两人轮流走子，以将死或困毙对方将（帅）为胜。以其精妙的布局，灵动的走法，在国内深受群众喜爱，现在有JavaScript象棋游戏源码，分享给大家
js象棋
weixin_56072688的博客
03-24 190
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 c
通过原生 JS 写一个象棋小游戏，感受无穷乐趣
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-02 1918
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
用原生 JS 写一个象棋小游戏
LuckyWinty的博客
03-09 396
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
给我一个js写的象棋游戏的代码
weixin_35756373的博客
12-21 307
好的，下面是一个简单的 JavaScript 象棋游戏的代码供你参考： ``` // 定义棋盘大小和棋盘格子的大小 const BOARD_SIZE = 8; const TILE_SIZE = 50; // 定义棋盘元素 let board = document.getElementById('board'); // 初始化棋盘 for (let row = 0; row < BOARD_...
JS象棋暗棋游戏源码深度解析
"这篇教程详细解析了JS实现的象棋暗棋小游戏的源码，旨在帮助读者理解游戏逻辑和JS编程技巧。通过阅读和实践，读者可以了解到如何使用JavaScript进行游戏开发，特别是对于棋盘游戏的实现。" 在JS小游戏之象棋暗棋...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值