没有合适的资源？快使用搜索试试~ 我知道了~

文库首页移动开发HTML5使用html+css+JavaScript实现中国象棋的对弈，并给出代码

使用html+css+JavaScript实现中国象棋的对弈，并给出代码

javascript

html

需积分: 0 5 下载量 88 浏览量 2023-06-03 10:39:27 上传评论收藏 28KB DOCX 举报

温馨提示

试读

14页

实现中国象棋对弈可以通过使用HTML+CSS+JavaScript实现，为了实现完整的功能，需要补充一些实现中国象棋规则的JavaScript代码，比如各种棋子的走法规则等等。仅实现了象棋的基本功能，实际的象棋游戏还需要完善落子规则、吃子规则以及输赢判断等等，实际的象棋游戏需要进一步完善

资源推荐

资源详情

资源评论

实现中国象棋对弈可以通过使用 HTML+CSS+JavaScript 实现。

以下是一个简单的实现方式：

HTML 代码：

<!DOCTYPE html>

<html>

<head>

</head>

<thead>

<tr>

<th><img id="player"

src="img/red.png"/></th>

</tr>

</thead>

<tbody>

<tr>

<td data-x="0" data-

y="9">&emsp;</td>

<td data-x="1" data-

y="9">&emsp;</td>

<td data-x="2" data-

y="9">&emsp;</td>

<td data-x="3" data-

y="9">&emsp;</td>

<td data-x="4" data-

y="9">&emsp;</td>

<td data-x="5" data-

y="9">&emsp;</td>

<td data-x="6" data-

y="9">&emsp;</td>

<td data-x="7" data-

y="9">&emsp;</td>

<td data-x="8" data-

y="9">&emsp;</td>

</tr>

...

</tbody>

<tfoot>

<tr>

<th><img id="computer"

src="img/black.png"/></th>

</tr>

</tfoot>

</table>

</div>

<p>请红方开始下棋...</p>

</div>

</body>

</html>

CSS 代码：

#board {

width: 450px;

margin: 20px auto;

border: 1px solid #ccc;

font-size: 24px;

}

#chess-table {

width: 100%;

border-collapse: collapse;

border: none;

}

#chess-table th, #chess-table td {

height: 45px;

width: 45px;

border: 1px solid #ccc;

text-align: center;

}

#chess-table th {

text-align: center;

height: 30px;

}

#player, #computer {

width: 50px;

height: 50px;

}

#tip {

width: 450px;

margin: 10px auto;

text-align: center;

}

JavaScript 代码：

var CUR_PLAYER = "red";

var SELECTED = null;

function load() {

var table = document.getElementById("chess-table");

table.addEventListener("click", onClick, false);

}

function onClick(event) {

var em = event.target;

if (em.tagName.toLowerCase() == "td") {

var x = Number(em.getAttribute("data-x"));

var y = Number(em.getAttribute("data-y"));

if (em.innerHTML != "&emsp;") {

if (em.classList.contains(CUR_PLAYER)) {

if (SELECTED == em) {

em.classList.remove("chess-cell-selected");

SELECTED = null;

} else {

clearSelected();

em.classList.add("chess-cell-selected");

SELECTED = em;

}

} else {

if (SELECTED) {

var prev_x = Number(SELECTED.getAttribute("data-x"));

var prev_y = Number(SELECTED.getAttribute("data-y"));

var chess = getChess(prev_x, prev_y);

if (chess.canMove(x, y)) {

chess.moveTo(x, y);

clearSelected();

changePlayer();

showTip();

剩余13页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

董哥物联网

粉丝: 21
资源: 135

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

使用html+css+JavaScript实现中国象棋的对弈，并给出代码

html5中国象棋源码-支持人机对战_html5_人机对战_中国象棋_源码_

html5+js象棋

个人博客html+css+JavaScript完整代码

HTML5中国象棋游戏(人机对弈网页版)

html5中国象棋

使用html+css+javascript实现一个漂亮、炫酷的表白页面，给出源码

使用html+css+javascript实现聊天室的展示界面，并给出源码

html+css+JavaScript的学习代码.zip

web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码

web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码

web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码

html+css3+javascript 学习demo.zip

HTML+CSS+JavaScript+php+mysql帮助手册（内含html5+css3+javascript5帮助手册）

web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页)

web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码

疯狂html5+css3+javascript讲义源码

HTML5+CSS+javascript实现的手机商城静态页面.zip

HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】

web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码

HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

学习 HTML+CSS+JavaScript等.zip

web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码

web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码

web期末大作业 基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页)

简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】

echarts-gl.min.js

自主研发的软著申请代码文档整理输出工具

2023前端面试八股文.pdf

javascript网页设计期末作业 购物网站

最新资源

web期末大作业基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码

web期末大作业基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码

web期末大作业基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码

web期末大作业基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页)

web期末大作业基于HTML+CSS+JavaScript实现的商城首页源码

web期末大作业基于HTML+CSS+JavaScript实现的分期购物商城源码

web期末大作业基于HTML+CSS+JavaScript实现的积分兑换商城源码

web期末大作业基于HTML+CSS+JavaScript实现的团购商城首页源码

web期末大作业基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页)

javascript网页设计期末作业购物网站