JQuery 国际象棋棋盘 实现代码

当时没觉得有什么，今天回头看看，觉得还有点意思，拿来给大家鉴定一下。

首先要实现棋子的排布，这毫无疑问得用div+css了。

具体代码可以看Jquery做的国际象棋棋盘（查看源代码） 。

一开始我给每种棋子都写了类，实际上这是比较愚蠢的行为。首先，这样子css代码会有冗余。其次，在棋子div上绑定侦听器时会比较麻烦，要判断是否棋子div时，我不得不靠类名中的-b和-w后缀来判断是否棋子。但是如果我们将棋子的共同属性提取出来专设一个类qizi，那么这两个问题都可以迎刃而解。

在代码中我特意没有将之前的代码去掉，你可以在注释的代码中看到。为了让黑棋和白旗都可以移动，我不得不把一个方法写上两边，你看，这就是没有进行足够的抽象化的后果。

接下来就是实现拖动了，关于这个，大家可以参考

打包下载地址

内容来自：http://buhutuu.cn/?p=783

赞 (0)

相关推荐

  • C# 骑士飞行棋的源码(分享)

    代码如下所示: 复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks; namespace 骑士飞行棋{    class Program    {        //在下面的数组存储我们游戏地图各各关卡        //数组的下标为0的元素对应地图上的第1格    下标为1的元素对应元素第2格...下标为

  • JavaScript 井字棋人工智能实现代码

    /* Code Written by Cory Fogliani (Email: cory@ijustdontcare.com) Testers: Cory Fogliani, Chris Gordon Featured on JavaScript Kit (http://javascriptkit.com) For this and over 400+ free scripts, visit http://javascriptkit.com */ //if IE4/NS6, apply sty

  • javascript 7行代码画出一个围棋棋盘

    function qi(q){ var t=["┏","┯","┓","┠","┼","┨","┗","┷","┛","╋"],text=[]; for(y=0;y●":"●"; } } return text.join(""); } var q=[{x:5,

  • 中国象棋js代码,仅演示,未能真下

    www.jb51.net 中国象棋 我们 var st=""; var qipuid=new Array(); var qipux=new Array(); var qipuy=new Array(); var qipuc=0; qipust="27,8,5,2,3,3,"; qipust+="24,8,7,1,1,2,"; qipust+="29,6,3,15,5,7,"; qipust+="18,8,3,8,3,

  • C#飞行棋小程序设计分析

    C#飞行棋小程序设计分析

    C#小程序飞行棋,程序效果图 1.设计分析 这个程序界面大致分为四部分: ① 最上面游戏名字界面 ②信息提示区 ③游戏界面区 ④游戏操作提示区 2.分区设计实现 一.游戏界面显示区,由于只需要显示出图形即可,因此直接用Console.Writeline()输出即可. 二.信息提示区,此处用于显示 游戏对战双方的姓名等信息,在游戏开始时需要由用户录入对战双方的姓名信息,因此可用Console.Readline()来读取 用户键入的值,<注:需要检查验证对战双方的姓名不可相同!> 三.游戏界面区,

  • C# L型棋牌覆盖实现代码与效果

    C# L型棋牌覆盖实现代码与效果

    //Main 复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace ChessBoard{    class Program    {        //谁能教教我英语啊,英语语法什么的错误之处还望海涵,        static void Main(string[] args)        {            Function ob

  • C#绘制飞行棋地图小程序

    1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中 关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 /// </summary> static void InitialMap() { for (int i=0;i<Map.Length;i++) { Map[i] =0; } //用于存储关卡位置 int[] luckyTurn = { 6, 23, 40, 55, 69, 83,98 }

  • java基于swing实现的五子棋游戏代码

    java基于swing实现的五子棋游戏代码

    本文实例讲述了java基于swing实现的五子棋游戏代码.分享给大家供大家参考. 主要功能代码如下: 复制代码 代码如下: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Main extends JFrame implements ActionListener{         private static final long serialVersionUID = 1L;      

  • C#飞行棋小程序设计代码

    飞行棋游戏大家应该都玩过吧,如何使用C#语言进行编写,本文实例就为大家分享了飞行棋C#实现代码,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Pachee { class Program { #region 静态字段 // 关卡数量 public static int

  • VC实现五子棋游戏的一个算法示例

    VC实现五子棋游戏的一个算法示例

    本文讲述了VC实现五子棋游戏的一个算法示例,该算法采用极大极小剪枝博弈算法,感兴趣的读者可以对程序中不完善的部分进行修改与完善. 该设计主要包括:数据结构.估值函数.胜负判断.搜索算法 程序运行界面如下: 具体实现步骤如下: 1.数据结构 //记录每步棋,可以建立链表用来进行悔棋.后退(本程序没有实现) struct Step { int x,y; //棋子坐标 int ball; //表示下子方{BLACK,WHITE} }; //记录棋盘情况,用于搜索过程 class CBoardSitua

随机推荐