js简单做个象棋

最新推荐文章于 2023-03-09 09:15:21 发布
最新推荐文章于 2023-03-09 09:15:21 发布
阅读量515 收藏 4
点赞数 1
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46057576/article/details/128616447
版权
这篇博客介绍如何利用JavaScript和CSS技术制作一个简单的象棋游戏。通过结合JavaScript的逻辑处理和CSS的样式设计，实现棋盘界面与棋子移动的交互功能。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
   
			width: 900px;
			height: 900px;
			background: url(qizhi.png) round;
			position: relative;
		}
		button{
   
			width: 80px;
			height: 80px;
			padding: 0;
			border: none;
			position: absolute;
		    transform: translate(-50%,-50%);
		}
		#button32~button{
   
			background-color: #0000; 
		}
		#button1{
   left: 91px;top: 42px;background: url(ju.png) round;}
		#button2{
   left: 181px;top: 42px;background: url(ma.png) round;}
		#button3{
   left: 271px;top: 42px;background: url(xiang.png) round;}
		#button4{
   left: 361px;top: 42px;background: url(shi.png) round;}
		#button5{
   left: 451px;top: 42px;background: url(jiang.png) round;}
		#button6{
   left: 541px;top: 42px;background: url(shi.png) round;}
		#button7{
   left: 631px;top: 42px;background: url(xiang.png) round;}
		#button8{
   left: 721px;top: 42px;background: url(ma.png) round;}
		#button9{
   left: 811px;top: 42px;background: url(ju.png) round;}
		#button10{
   left: 181px;top: 222px;background: url(pao.png) round;}
		#button11{
   left: 721px;top: 222px;background: url(pao.png) round;}
		#button12{
   left: 91px;top: 312px;background: url(cu.png) round;}
		#button13{
   left: 271px;top: 312px;background: url(cu.png) round;}
		#button14{
   left: 451px;top: 312px;background: url(cu.png) round;}
		#button15{
   left: 631px;top: 312px;background: url(cu.png) round;}
		#button16{
   left: 811px;top: 312px;background: url(cu.png) round;}
		#button17{
   left: 91px;top: 852px;background: url(ju2.png) round;}
		#button18{
   left: 181px;top: 852px;background: url(ma2.png) round;}
		#button19{
   left: 271px;top: 852px;background: url(xiang2.png) round;}
		#button20{
   left: 361px;top: 852px;background: url(shi2.png) round;}
		#button21{
   left: 451px;top: 852px;background: url(shuai.png) round;}
		#button22{
   left: 541px;top: 852px;background: url(shi2.png) round;}
		#button23{
   left: 631px;top: 852px;background: url(xiang2.png) round;}
		#button24{
   left: 721px;top: 852px;background: url(ma2.png) round;}
		#button25{
   left: 811px;top: 852px;background: url(ju2.png) round;}
		#button26{
   left: 181px;top: 672px;background: url(pao2.png) round;}
		#button27{
   left: 721px;top: 672px;background: url(pao2.png) round;}
		#button28{
   left: 91px;top: 582px;background: url(bing.png) round;}
		#button29{
   left: 271px;top: 582px;background: url(bing.png) round;}
		#button30{
   left: 451px;top: 582px;background: url(bing.png) round;}
		#button31{
   left: 631px;top: 582px;background: url(bing.png) round;}
		#button32{
   left: 811px;top: 582px;background: url(bing.png) round;}

		#button33{
   left: 91px;top: 42px;}
		#button34{
   left: 181px;top: 42px;}
		#button35{
   left: 271px;top: 42px;}
		#button36{
   left: 361px;top: 42px;}
		#button37{
   left: 451px;top: 42px;}
		#button38{
   left: 541px;top: 42px;}
		#button39{
   left: 631px;top: 42px;}
		#button40{
   left: 721px;top: 42px;}
		#button41{
   left: 811px;top: 42px;}
		#button42{
   left: 91px;top: 132px;}
		#button43{
   left: 181px;top: 132px;}
		#button44{
   left: 271px;top: 132px;}
		#button45{
   left: 361px;top: 132px;}
		#button46{
   left: 451px;top: 132px;}
		#button47{
   left: 541px;top: 132px;}
		#button48{
   left: 631px;top: 132px;}
		#button49{
   left: 721px;top: 132px;}
		#button50{
   left: 811px;top: 132px;}
		#button51{
   left: 91px;top: 222px;}
		#button52{
   left: 181px;top: 222px;}
		#button53{
   left: 271px;top: 222px;}
		#button54{
   left: 361px;top: 222px;}
		#button55{
   left: 451px;top: 222px;}
		#button56{
   left: 541px;top: 222px;}
		#button57{
   left: 631px;top: 222px;}
		#button58{
   left: 721px;top: 222px;}
		#button59{
   left: 811px;top: 222px;}
		#button60{
   left: 91px;top: 312px;}
		#button61{
   left: 181px;top: 312px;}
		#button62{
   left: 271px;top: 312px;}
		#button63{
   left: 361px;top: 312px;}
		#button64{
   left: 451px;top: 312px;}
		#button65{
   left: 541px;top: 312px;}
		#button66{
   left: 631px;top: 312px;}
		#button67{
   left: 721px;top: 312px;}
		#button68{
   left: 811px;top: 312px;}
		#button69{
   left: 91px;top: 402px;}
		#button70{
   left: 181px;top: 402px;}
		#button71{
   left: 271px;top: 402px;}
		#button72{
   left: 361px;top: 402px;}
		#button73{
   left: 451px;top: 402px;}
		#button74{
   left: 541px;top: 402px;}
		#button75{
   left: 631px;top: 402px;}
		#button76{
   left: 721px;top: 402px;}
		#button77{
   left: 811px;top: 402px;}
		#button78{
   left: 91px;top: 492px;}
		#button79{
   left: 181px;top: 492px;}
		#button80{
   left: 271px;top: 492px;}
		#button81{
   left: 361px;top: 492px;}
		#button82{
   left: 451px;top: 492px;}
		#button83{
   left: 541px;top: 492px;}
		#button84{
   left: 631px;top: 492px;}
		#button85{
   left: 721px;top: 492px;}
		#button86{
   left: 811px;top: 492px;}
		#button87{
   left: 91px;top: 582px;}
		#button88{
   left: 181px;top: 582px;}
		#button89{
   left: 271px;top: 582px;}
		#button90{
   left: 361px;top: 582px;}
		#button91{
   left: 451px;top: 582px;}
		#button92{
   left: 541px;top: 582px;}
		#button93{
   left: 631px;top: 582px;}
		#button94{
   left: 721px;top: 582px;}
		#button95{
   left: 811px;top: 582px;}
		#button96{
   left: 91px;top: 672px;}
		#button97{
   left: 181px;top: 672px;}
		#button98{
   left: 271px;top: 672px;}
		#button99{
   left: 361px;top: 672px;}
		#button100{
   left: 451px;top: 672px;}
		#button101{
   left: 541px;top: 672px;}
		#button102{
   left: 631px;top: 672px;}
		#button103{
   left: 721px;top: 672px;}
		#button104{
   left: 811px;top: 672px;}
		#button105{
   left: 91px;top: 762px;}
		#button106{
   left: 181px;top: 762px;}
		#button107{
   left: 271px;top: 762px;}
		#button108{
   left: 361px;top: 762px;}
		#button109{
   left: 451px;top: 762px;}
		#button110{
   left: 541px;top: 762px;}
		#button111{
   left: 631px;top: 762px;}
		#button112{
   left: 721px;top: 762px;}
		#button113{
   left: 811px;top: 762px;}
		#button114{
   left: 91px;top: 852px;}
		#button115{
   left: 181px;top: 852px;}
		#button116{
   left: 271px;top: 852px;}
		#button117{
   left: 361px;top: 852px;}
		#button118{
   left: 451px;top: 852px;}
		#button119{
   left: 541px;top: 852px;}
		#button120{
   left: 631px;top: 852px;}
		#button121{
   left: 721px;top: 852px;}
		#button122{
   left: 811px;top: 852px;}
	</style>
</head>
<body>
	<div id="div1">
		<button id="button1"></button>
		<button id="button2"></button>
		<button id="button3"></button>
		<button id="button4"></button>
		<button id="button5"></button>
		<button id="button6"></button>
		<button id="button7"></button>
		<button id="button8"></button>
		<button id="button9"></button>
		<button id="button10"></button>
		<button id="button11"></button>
		<button id="button12"></button>
		<button id="button13"></button>
		<button id="button14"></button>
		<button id="button15"></button>
		<button id="button16"></button>
		<button id="button17"></button>
		<button id="button18"></
最低0.47元/天 解锁文章
好好打代码
关注
js象棋实现
03-06
纯js，css实现象棋功能，有需要的来
纯JS中国象棋
08-31
原创纯JS中国象棋，非jquery，非框架，纯javascript编写网页版中国象棋。纯属个人爱好而编写。
李小枫原生js象棋
Li_xiaofen的博客
10-13 378
<!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写的象棋游戏的代码
weixin_35756373的博客
12-21 305
好的，下面是一个简单的 JavaScript 象棋游戏的代码供你参考： ``` // 定义棋盘大小和棋盘格子的大小 const BOARD_SIZE = 8; const TILE_SIZE = 50; // 定义棋盘元素 let board = document.getElementById('board'); // 初始化棋盘 for (let row = 0; row < BOARD_...
前端-做个简单的象棋游戏
01-09
在本文中，我们将深入探讨如何使用JavaScript（JS）、HTML和CSS这三种主要的前端技术来创建一个简单的象棋游戏。这个项目将涵盖基础的网页布局、事件处理、对象建模以及一些基本的交互设计。 首先，我们需要理解...
html5+js开发的中国象棋游戏源码.zip
03-26
总结，HTML5+JS开发的中国象棋游戏融合了前端技术的诸多精华，既考验开发者对HTML5图形渲染和JavaScript逻辑处理的能力，又展示了这两者在游戏开发中的强大潜力。通过学习和理解这个游戏源码，开发者不仅可以提升...
JavaScript 中的简单国际象棋AI_JavaScript_代码_下载
06-25
chess-ai 是 JavaScript 中的一个简单的国际象棋 AI。 chess-ai 的主要关注点是应用程序的决策部分。人工智能范围之外的所有功能都是使用外部库实现的： 棋盘图形用户界面：使用 chessboard.js API 游戏机制：使用...
纯JS象棋 AI算法
05-21
在本项目中，“纯JS象棋 AI算法”指的是一个完全基于JavaScript编程语言实现的在线象棋游戏，其中包含了人工智能（AI）的算法来模拟对手的智能行为。这种类型的项目不仅展示了JavaScript在前端开发中的强大能力，还...
javascript 象棋
06-25
javascript 象棋 web象棋 非常棒的象棋
JavaScript象棋
12-09
“楚汉相争，鸿沟为界”，这句话里诠释着中国象棋博大文化精髓，象棋是由两人轮流走子，以将死或困毙对方将（帅）为胜。以其精妙的布局，灵动的走法，在国内深受群众喜爱，现在有JavaScript象棋游戏源码，分享给大家
JS写的简单中国象棋
06-29
无聊写个简单中国象棋，方便像我这样的菜菜练习象棋技术 ^_^ 功能简单，支持下棋、悔棋和棋盘翻转
js中国象棋游戏
03-12
js中国象棋游戏
js写的象棋（面向对象）
02-20
用javascript写的象棋，基本功能全部实现，里面是个Html文件打开直接就能开到效果了！
js象棋
weixin_56072688的博客
03-24 189
<!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 象棋游戏 _ 支持双方在线对战
jxiao2008的博客
07-09 1130
  说明：实在对不住诸位，的确是我弄错了，views/index.ejs里的对 socket.io.js的引用使用了我本地的绝对路径，需要修改为&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;即可，对此我重新打了个包。再次歉意！！！   上周做了javascript版的象棋游戏【详见 js 写中国象棋游戏_应用back...
用原生 JS 写一个象棋小游戏
LuckyWinty的博客
03-09 394
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
js实现中国象棋
Hpluvalbe的博客
03-31 1651
闲的没事干写的js代码。使用table元素作表格，div元素作象棋。 效果如下： 代码如下： <html> <head> <title>中国象棋</title> <meta charset="UTF-8"> <style> table{ margin:10px; border-collapse:collapse; } table.board{ background-color:white; } table,td.board{
用js给我写个象棋游戏
最新发布
09-08
好的，以下是一个简单的通过 JavaScript 编写的象棋游戏： ```html <!DOCTYPE html> 象棋游戏 .chessboard { border: 1px solid #000; width: 320px; height: 320px; } .chessboard td { width: 40px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值