帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Javascript库  Javascript  boa  JAVA  GAM  
JavaScript library for easily creating board games

  • 源代码名称:jsboard
  • 源代码网址:http://www.github.com/danielborowski/jsboard
  • jsboard源代码文档
  • jsboard源代码下载
  • Git URL:
    git://www.github.com/danielborowski/jsboard.git
  • Git Clone代码到本地:
    git clone http://www.github.com/danielborowski/jsboard
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/danielborowski/jsboard
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • jsboard

    JavaScript库允许你轻松创建像国际象棋游戏,和游戏的生命周期的游戏。

    jsboard 允许你专注于游戏逻辑。游戏AI和游戏算法,而不是使用HTML和CSS来创建和设计游戏。 jsboard 使你可以以很容易地使用它的功能创建和播放 2D 游戏,这样你就不必担心如何在JavaScript中表示。

    jsboard 不需要jQuery或者任何其他库。 只需在你的HTML文件中包含库,如示例 below 中所示。

    电子邮件内容设置

    你所需要开始的只是一个简单的HTML文件和一个你的游戏代码的JS文件。 以下是你的index.html 文件的外观:

    <!DOCTYPE html>
    <html>
    <head>
     <title>Title</title>
    </head>
    <body>
     <tableid='game'></table>
     <scriptsrc="jsboard.min.js"></script>
     <scriptsrc="index.js"></script>
    </body>
    </html>

    然后创建一个空白 index.js 文件,游戏代码将在其中运行。

    简介

    你可以使用jsboard访问以下对象。

    jsboard.board({ attach: tableID, size: NxM [,style:"checkerboard"] [,stylePattern: [color1, color2]] });jsboard.piece({ text: pieceName [,cssProperties] });

    下面是一个用以下属性创建的示例板和块。

    var b =jsboard.board({ attach:"game", size:"3x3" });var x =jsboard.piece({ text:"X", fontSize:"40px", textAlign:"center" });

    如果打开 index.html,则应看到以下内容:

    alt text

    让我们向我们的董事会添加一些功能。 当我们点击空的空间时,我们会把它们放下来。 我们将使用 jsboardcell 函数,它可以修改和获取游戏板中的属性。

    b.cell("each").on("click", function() {
     if (b.cell(this).get()===null) {
     b.cell(this).place(x.clone());
     }
    });

    你现在应该能在x 上。 在这里查一下。

    让我们把它变成一个tic-tac-toe游戏。 我们要做的只是交替放置X 和O 。 下面是 final index.js的外观。

    var b =jsboard.board({ attach:"game", size:"3x3" });var x =jsboard.piece({ text:"X", fontSize:"40px", textAlign:"center" });var o =jsboard.piece({ text:"O", fontSize:"40px", textAlign:"center"});var turn =true;b.cell("each").on("click", function() {
     if (b.cell(this).get()===null) {
     if (turn) { b.cell(this).place(x.clone()); }
     else { b.cell(this).place(o.clone()); }
     turn =!turn;
     }
    });

    就是这样我们使用这些简单的命令创建了一个正常运行的tic-tac-toe游戏。 查看这里的tic-tac-toe游戏。

    如果我们想改变我们的棋盘样式? 我们实际上有 jsboard 函数来修改每个单元或者修改整个板。 我们将对两个。

    b.style({ borderSpacing:"8px" });b.cell("each").style({ 
     width:"75px", 
     height:"75px", 
     background:"lightblue", 
     borderRadius:"15px" 
    });

    下面是你应该看到的。

    alt text

    文档

    创建板。

    jsboard.board({ attach: tableID, size: NxM [,style:"checkerboard"] [,stylePattern: [color1, color2]] });// var b = jsboard.board({ attach:"game", size:"3x3" }); // var c = jsboard.board({ attach:"game", size:"8x8", style:"checkerboard" }); // var d = jsboard.board({ attach:"game", size:"8x8", style:"checkerboard", stylePattern: ["blue","green"] }); 

    板的属性,方法和样式。

    var b =jsboard.board({ attach:"game", size:"5x8", style:"checkerboard" }); b.matrix(); // matrix representation containing values from piece.text or nullb.rows(); // 5b.cols(); // 8b.removeEvents(event, func); // removes event listeners from all board spaces (see chessknight example)b.style({ cssProperties });

    创建 Fragment 。

    jsboard.piece({ text: pieceName [,cssProperties] });// var x = jsboard.piece({ text:"X", fontSize:"40px", textAlign:"center" });// var k = jsboard.piece({ text:"WK", textIndent:"-9999px", background:"url('images/white.png') no-repeat", width:"50px", height:"50px", margin:"0 auto" });

    Piece方法和样式。

    var p =jsboard.piece({ text:"X", fontSize:"40px", textAlign:"center" });p.style({ cssProperties });var x =p.clone(); // you must clone a piece before placing it on the board because jsboard.piece only serves as a piece schema and clone() gets it ready for the DOM

    单元格方法。

    var b =jsboard.board({ attach:"game", size:"5x8", style:"checkerboard" }); var p =jsboard.piece({ text:"X", fontSize:"40px", textAlign:"center" });// styling cellsb.cell("each").style({ cssProperties });b.cell([N,M]).style({ cssProperties }); // [N,M] = position on the game board using matrix notationb.cell(this).style({ cssProperties }); // this = current cell b.cell(this,K).style({ cssProperties }); // (this,K) = some position K spaces from this cell. Example: b.cell(this,3) represents the cell 3 spaces to the right of this cell (see quoridorwalls example)// placing pieces in cellsb.cell("each").place(p.clone());b.cell([N,M]).place(p.clone());b.cell(this).place(p.clone());b.cell(this,K).place(p.clone());// removing pieces from cellsb.cell("each").rid();b.cell([N,M]).rid();b.cell(this).rid();b.cell(this,K).rid();// adding event listeners to cellsb.cell("each").on(event, function); 
    b.cell([N,M]).on(event, function); // Example: b.cell([0,0]).on("click", function() { alert("clicked!"); } );b.cell(this).on(event, function);
    b.cell(this,K).on(event, function);// removing event listeners from cellsb.cell("each").removeOn(event, function); 
    b.cell([N,M]).removeOn(event, function); // Example: b.cell([0,0]).removeOn("click", myFunc } ); b.cell(this).removeOn(event, function);
    b.cell(this,K).removeOn(event, function);// get content of cell to see if a piece is within some cell // either null or piece.text is returnedb.cell([N,M]).get();
    b.cell(this).get();
    b.cell(this,K).get();// check where a specific cell is within the game board // returns matrix notation [N,M] of cell within game boardb.cell(this).where();
    b.cell(this,K).where();// return the DOM node for given cell in order to manipulate using// standard JS functions. Example: b.cell([0,0]).DOM().classList.add("myclass"); b.cell([N,M]).DOM();
    b.cell(this).DOM();
    b.cell(this,K).DOM();
    示例

    基本

    棋盘样式

    其他游戏和仿真

    • 生命生命( conway ) 游戏,放置一些生命单元,观察你的模拟创建和销毁生命( 这里是一个有趣的模式列表,你可以试试)
    • 在墙的位置上单击鼠标右键,然后单击块将它的移动到右侧,然后在空间之间单击以创建阻止该构件移动到它的上方的墙。


    文章标签:JAVA  Javascript  GAM  Javascript库  boa  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语