【亚州城ca88手机版】经典的HTML5游戏及其源码分析,2011年最经典的15个

201一年最经典的十五个 HTML5游乐

2011/05/21 · HTML5 ·
HTML5

在过去的一年内,Web 技术具有充裕大的变革性的更新,取得迅速的进步,特别是
HTML伍 技术越来越 Web 带来特其余血液。这将平昔改动 Flash 控制着Web
游戏的层面。越多的开发人士初始使用 HTML五来支付①些交互性分外强、效果格外出众的应用和玩耍。

  1. Chain Reaction

  2. Biolab Disaster

  3. Bubble Trouble

  4. Runfield

  5. Sand Trap

  6. Torus

  7. Space War

  8. Google Pacman

  9. Angry Birds (仅可运维于Chrome浏览器)

亚州城ca88手机版 1

  10. RGB Invaders

亚州城ca88手机版 2

  11. Canvas Rider

亚州城ca88手机版 3

  12. Blinkwang

亚州城ca88手机版 4

  13.
CoverFire

亚州城ca88手机版 5

  14. HTML5
Helicopter

亚州城ca88手机版 6

  15. Blobby
Volley

亚州城ca88手机版 7

  原文:True
Logic    译文:oschina

 

赞 1 收藏
评论

亚州城ca88手机版 8

HTML伍已经格外强大,在HTML五阳台上,大家得以成功很多相当复杂的卡通效果,包罗游戏在内。早期大家只能选择flash来达成网游,现在我们又多了1种采取,即用HTML五制作游戏。比较flash,HTML五一发灵敏方便,随着浏览器技术的不断升级,HTML五必将会大规模应用,至少在网页动画方面,下边是有的运用HTML5到位的嬉戏文章。

HTML5已经万分强劲,在HTML五平台上,大家能够形成很多卓殊复杂的卡通片效果,包涵游戏在内。早期大家不得不选择flash来达成网游,今后大家又多了一种选用,即用HTML伍制造游戏。相比较flash,HTML伍尤其灵活方便,随着浏览器技术的接踵而至 蜂拥而至晋升,HTML五势必会广阔使用,至少在网页动画方面,下边是有个别施用HTML伍成就的玩耍小说。

经典的HTML伍游戏及其源码分析,经典html⑤源码

HTML5已经卓绝强劲,在HTML五阳台上,我们能够形成很多相当复杂的卡通片效果,包括游戏在内。早期大家只可以采取flash来完毕网页游戏,将来大家又多了1种选拔,即用HTML1/贰立游戏。相比flash,HTML5更为灵敏方便,随着浏览器技术的源源不断晋升,HTML五肯定会广阔利用,至少在网页动画方面,上边是局地行使HTML伍形成的玩乐小说。

HTML5版切水果游戏

那曾是风靡举世的壹款手提式有线电电话机APP游戏切水果,以后JS小组已经将其改版成HTML5,并将其开源。

核心Javascript代码:

亚州城ca88手机版 9亚州城ca88手机版 10

Ucren.BasicDrag = Ucren.Class(           /* constructor */ function( conf ){              conf = Ucren.fixConfig( conf );              this.type = Ucren.fixString( conf.type, "normal" );                    var isTouch = this.isTouch = "ontouchstart" in window;                    this.TOUCH_START = isTouch ? "touchstart" : "mousedown",              this.TOUCH_MOVE = isTouch ? "touchmove" : "mousemove",              this.TOUCH_END = isTouch ? "touchend" : "mouseup";          },                /* methods */ {              bind: function( el, handle ){                  el = Ucren.Element( el );                  handle = Ucren.Element( handle ) || el;                        var evt = {};                        evt[this.TOUCH_START] = function( e ){                      e = Ucren.Event( e );                      this.startDrag();                      e.cancelBubble = true;                      e.stopPropagation && e.stopPropagation();                      return e.returnValue = false;                  }.bind( this );                        handle.addEvents( evt );                  this.target = el;              },                    //private              getCoors: function( e ){                  var coors = [];                  if ( e.targetTouches && e.targetTouches.length ) {     // iPhone                      var thisTouch = e.targetTouches[0];                      coors[0] = thisTouch.clientX;                      coors[1] = thisTouch.clientY;                  }else{                                 // all others                      coors[0] = e.clientX;                      coors[1] = e.clientY;                  }                  return coors;              },                    //private              startDrag: function(){                  var target, draging, e;                  target = this.target;                  draging = target.draging = {};                        this.isDraging = true;                        draging.x = parseInt( target.style( "left" ), 10 ) || 0;                  draging.y = parseInt( target.style( "top" ), 10 ) || 0;                        e = Ucren.Event();                  var coors = this.getCoors( e );                  draging.mouseX = coors[0];                  draging.mouseY = coors[1];                        this.registerDocumentEvent();              },                    //private              endDrag: function(){                  this.isDraging = false;                  this.unRegisterDocumentEvent();              },                    //private              registerDocumentEvent: function(){                  var target, draging;                  target = this.target;                  draging = target.draging;                        draging.documentSelectStart =                      Ucren.addEvent( document, "selectstart", function( e ){                          e = e || event;                          e.stopPropagation && e.stopPropagation();                          e.cancelBubble = true;                          return e.returnValue = false;                      });                        draging.documentMouseMove =                      Ucren.addEvent( document, this.TOUCH_MOVE, function( e ){                          var ie, nie;                          e = e || event;                          ie = Ucren.isIe && e.button != 1;                          nie = !Ucren.isIe && e.button != 0;                          if( (ie || nie ) && !this.isTouch )                              this.endDrag();                          var coors = this.getCoors( e );                          draging.newMouseX = coors[0];                          draging.newMouseY = coors[1];                          e.stopPropagation && e.stopPropagation();                          return e.returnValue = false;                      }.bind( this ));                        draging.documentMouseUp =                      Ucren.addEvent( document, this.TOUCH_END, function(){                          this.endDrag();                      }.bind( this ));                        var lx, ly;                        clearInterval( draging.timer );                  draging.timer = setInterval( function(){                      var x, y, dx, dy;                      if( draging.newMouseX != lx && draging.newMouseY != ly ){                          lx = draging.newMouseX;                          ly = draging.newMouseY;                          dx = draging.newMouseX - draging.mouseX;                          dy = draging.newMouseY - draging.mouseY;                          x = draging.x + dx;                          y = draging.y + dy;                          if( this.type == "calc" ){                              this.returnValue( dx, dy, draging.newMouseX, draging.newMouseY );                          }else{                              target.left( x ).top( y );                          }                      }                  }.bind( this ), 10 );              },                    //private              unRegisterDocumentEvent: function(){                  var draging = this.target.draging;                  Ucren.delEvent( document, this.TOUCH_MOVE, draging.documentMouseMove );                  Ucren.delEvent( document, this.TOUCH_END, draging.documentMouseUp );                  Ucren.delEvent( document, "selectstart", draging.documentSelectStart );                  clearInterval( draging.timer );              },                    //private              returnValue: function( dx, dy, x, y ){                  //todo something              }          }       );            // Ucren.Template      Ucren.Template = Ucren.Class(           /* constructor */ function(){              this.string = join.call( arguments, "" );          },                /* methods */ {              apply: function( conf ){                  return this.string.format( conf );              }          }       );            // Ucren.BasicElement      Ucren.BasicElement = Ucren.Class(           /* constructor */ function( el ){              this.dom = el;          this.countMapping = {};          },                /* methods */ {              isUcrenElement: true,                    attr: function( name, value ){                  if( typeof value == "string" ){                      this.dom.setAttribute( name, value );                  }else{                      return this.dom.getAttribute( name );                  }                  return this;              },                    style: function( /* unknown1, unknown2 */ ){                  var getStyle = Ucren.isIe ?                      function( name ){                          return this.dom.currentStyle[name];                      } :                            function( name ){                          var style;                          style = document.defaultView.getComputedStyle( this.dom, null );                          return style.getPropertyValue( name );                      };                        return function( unknown1, unknown2 ){                      if( typeof unknown1 == "object" ){                          Ucren.each( unknown1, function( value, key ){                              this[key] = value;                          }.bind( this.dom.style ));                      }else if( typeof unknown1 == "string" && typeof unknown2 == "undefined" ){                          return getStyle.call( this, unknown1 );                      }else if( typeof unknown1 == "string" && typeof unknown2 != "undefined" ){                          this.dom.style[unknown1] = unknown2;                      }                      return this;                  };              }(),                    hasClass: function( name ){                  var className = " " + this.dom.className + " ";                  return className.indexOf( " " + name + " " ) > -1;              },                    setClass: function( name ){                  if( typeof( name ) == "string" )                      this.dom.className = name.trim();                  return this;              },                    addClass: function( name ){                  var el, className;                  el = this.dom;                  className = " " + el.className + " ";                  if( className.indexOf( " " + name + " " ) == -1 ){                      className += name;                      className = className.trim();                      className = className.replace( / +/g, " " );                      el.className = className;                  }                  return this;              },                    delClass: function( name ){                  var el, className;                  el = this.dom;                  className = " " + el.className + " ";                  if( className.indexOf( " " + name + " " ) > -1 ){                      className = className.replace( " " + name + " ", " " );                      className = className.trim();                      className = className.replace( / +/g, " " );                      el.className = className;                  }                  return this;              },                    html: function( html ){                  var el = this.dom;                        if( typeof html == "string" ){                      el.innerHTML = html;                  }else if( html instanceof Array ){                      el.innerHTML = html.join( "" );                  }else{                      return el.innerHTML;                  }                  return this;              },                    left: function( number ){                  var el = this.dom;                  if( typeof( number ) == "number" ){                      el.style.left = number + "px";                      this.fireEvent( "infect", [{ left: number }] );                  }else{                      return this.getPos().x;                  }                  return this;              },                    top: function( number ){                  var el = this.dom;                  if( typeof( number ) == "number" ){                      el.style.top = number + "px";                      this.fireEvent( "infect", [{ top: number }] );                  }else{                      return this.getPos().y;                  }                  return this;              },                    width: function( unknown ){                  var el = this.dom;                  if( typeof unknown == "number" ){                      el.style.width = unknown + "px";                      this.fireEvent( "infect", [{ width: unknown }] );                  }else if( typeof unknown == "string" ){                      el.style.width = unknown;                      this.fireEvent( "infect", [{ width: unknown }] );                      }else{                      return this.getSize().width;                      }                      return this;                  },                    height: function( unknown ){                      var el = this.dom;                  if( typeof unknown == "number" ){                      el.style.height = unknown + "px";                      this.fireEvent( "infect", [{ height: unknown }] );                  }else if( typeof unknown == "string" ){                      el.style.height = unknown;                      this.fireEvent( "infect", [{ height: unknown }] );                      }else{                      return this.getSize().height;                      }                      return this;                  },                    count: function( name ){                  return this.countMapping[name] = ++ this.countMapping[name] || 1;              },                    display: function( bool ){                  var dom = this.dom;                  if( typeof( bool ) == "boolean" ){                      dom.style.display = bool ? "block" : "none";                      this.fireEvent( "infect", [{ display: bool }] );                  }else{                      return this.style( "display" ) != "none";                  }                  return this;              },                    first: function(){                  var c = this.dom.firstChild;                  while( c && !c.tagName && c.nextSibling ){                      c = c.nextSibling;                  }                  return c;              },                    add: function( dom ){                  var el;                  el = Ucren.Element( dom );                  this.dom.appendChild( el.dom );                  return this;              },                    remove: function( dom ){                  var el;                  if( dom ){                      el = Ucren.Element( dom );                      el.html( "" );                      this.dom.removeChild( el.dom );                  }else{                      el = Ucren.Element( this.dom.parentNode );                      el.remove( this );                  }                  return this;              },                    insert: function( dom ){                  var tdom;                  tdom = this.dom;                  if( tdom.firstChild ){                      tdom.insertBefore( dom, tdom.firstChild );                  }else{                      this.add( dom );                  }                  return this;              },                    addEvents: function( conf ){                  var blank, el, rtn;                  blank = {};                  rtn = {};                  el = this.dom;                  Ucren.each( conf, function( item, key ){                      rtn[key] = Ucren.addEvent( el, key, item );                  });                  return rtn;              },                    removeEvents: function( conf ){                  var blank, el;                  blank = {};                  el = this.dom;                  Ucren.each( conf, function( item, key ){                      Ucren.delEvent( el, key, item );                  });                  return this;              },                    getPos: function(){                  var el, parentNode, pos, box, offset;                  el = this.dom;                  pos = {};                        if( el.getBoundingClientRect ){                      box = el.getBoundingClientRect();                      offset = Ucren.isIe ? 2 : 0;                      var doc = document;                      var scrollTop = Math.max( doc.documentElement.scrollTop,                          doc.body.scrollTop );                      var scrollLeft = Math.max( doc.documentElement.scrollLeft,                          doc.body.scrollLeft );                      return {                          x: box.left + scrollLeft - offset,                          y: box.top + scrollTop - offset                      };                  }else{                      pos = {                          x: el.offsetLeft,                          y: el.offsetTop                      };                      parentNode = el.offsetParent;                      if( parentNode != el ){                          while( parentNode ){                              pos.x += parentNode.offsetLeft;                              pos.y += parentNode.offsetTop;                              parentNode = parentNode.offsetParent;                          }                      }                      if( Ucren.isSafari && this.style( "position" ) == "absolute" ){ // safari doubles in some cases                          pos.x -= document.body.offsetLeft;                          pos.y -= document.body.offsetTop;                      }                  }                        if( el.parentNode ){                      parentNode = el.parentNode;                  }else{                      parentNode = null;                  }                        while( parentNode && parentNode.tagName.toUpperCase() != "BODY" &&                      parentNode.tagName.toUpperCase() != "HTML" ){ // account for any scrolled ancestors                      pos.x -= parentNode.scrollLeft;                      pos.y -= parentNode.scrollTop;                      if( parentNode.parentNode ){                          parentNode = parentNode.parentNode;                      }else{                          parentNode = null;                      }                  }                        return pos;              },                    getSize: function(){                  var dom = this.dom;                  var display = this.style( "display" );                        if ( display && display !== "none" ) {                      return { width: dom.offsetWidth, height: dom.offsetHeight };                      }                        var style = dom.style;                  var originalStyles = {                      visibility: style.visibility,                      position:   style.position,                      display:    style.display                  };                        var newStyles = {                      visibility: "hidden",                      display:    "block"                  };                        if ( originalStyles.position !== "fixed" )                    newStyles.position = "absolute";                        this.style( newStyles );                        var dimensions = {                      width:  dom.offsetWidth,                      height: dom.offsetHeight                  };                        this.style( originalStyles );                        return dimensions;              },                    observe: function( el, fn ){                  el = Ucren.Element( el );                  el.on( "infect", fn.bind( this ));                  return this;              },                    usePNGbackground: function( image ){                  var dom;                  dom = this.dom;                  if( /\.png$/i.test( image ) && Ucren.isIe6 ){                      dom.style.filter =                          "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" +                          image + "',sizingMethod='scale' );";                      ///     _background: none;                      ///  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/pic.png',sizingMethod='scale' );                  }else{                      dom.style.backgroundImage = "url( " + image + " )";                  }                  return this;              },                    setAlpha: function(){                  var reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/;                  return function( value ){                      var element = this.dom, es = element.style;                      if( !Ucren.isIe ){                          es.opacity = value / 100;                      /* }else if( es.filter === "string" ){ */                      }else{                          if ( element.currentStyle && !element.currentStyle.hasLayout )                              es.zoom = 1;                                if ( reOpacity.test( es.filter )) {                              value = value >= 99.99 ? "" : ( "alpha( opacity=" + value + " )" );                              es.filter = es.filter.replace( reOpacity, value );                          } else {                              es.filter += " alpha( opacity=" + value + " )";                          }                      }                      return this;                  };              }(),                    fadeIn: function( callback ){                  if( typeof this.fadingNumber == "undefined" )                      this.fadingNumber = 0;                  this.setAlpha( this.fadingNumber );                        var fading = function(){                      this.setAlpha( this.fadingNumber );                      if( this.fadingNumber == 100 ){                          clearInterval( this.fadingInterval );                          callback && callback();                      }else                          this.fadingNumber += 10;                  }.bind( this );                        this.display( true );                  clearInterval( this.fadingInterval );                  this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );                        return this;              },                    fadeOut: function( callback ){                  if( typeof this.fadingNumber == "undefined" )                      this.fadingNumber = 100;                  this.setAlpha( this.fadingNumber );                        var fading = function(){                      this.setAlpha( this.fadingNumber );                      if( this.fadingNumber == 0 ){                          clearInterval( this.fadingInterval );                          this.display( false );                          callback && callback();                      }else                          this.fadingNumber -= 10;                  }.bind( this );                        clearInterval( this.fadingInterval );                  this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );                        return this;              },                    useMouseAction: function( className, actions ){                  /**                   *  调用示例:  el.useMouseAction( "xbutton", "over,out,down,up" );                   *  使用效果:  el 会在 "xbutton xbutton-over","xbutton xbutton-out","xbutton xbutton-down","xbutton xbutton-up"                   *             等四个 className 中根据相应的鼠标事件来进行切换。                   *  特别提示:  useMouseAction 可使用不同参数多次调用。                   */                  if( !this.MouseAction )                      this.MouseAction = new Ucren.MouseAction({ element: this });                  this.MouseAction.use( className, actions );                  return this;              }          }       );            if( Ucren.isIe )          document.execCommand( "BackgroundImageCache", false, true );            for( var i in Ucren ){          exports[i] = Ucren[i];      };        return exports;  });

View Code

亚州城ca88手机版 11

在线演示       源码下载

HTML伍版切水果游戏

那曾是风靡全世界的1款手提式有线电话机应用程式游戏切水果,未来JS小组已经将其改版成HTML5,并将其开源。

核心Javascript代码:

亚州城ca88手机版 12亚州城ca88手机版 13

Ucren.BasicDrag = Ucren.Class( 
        /* constructor */ function( conf ){
            conf = Ucren.fixConfig( conf );
            this.type = Ucren.fixString( conf.type, "normal" );

            var isTouch = this.isTouch = "ontouchstart" in window;

            this.TOUCH_START = isTouch ? "touchstart" : "mousedown",
            this.TOUCH_MOVE = isTouch ? "touchmove" : "mousemove",
            this.TOUCH_END = isTouch ? "touchend" : "mouseup";
        },

        /* methods */ {
            bind: function( el, handle ){
                el = Ucren.Element( el );
                handle = Ucren.Element( handle ) || el;

                var evt = {};

                evt[this.TOUCH_START] = function( e ){
                    e = Ucren.Event( e );
                    this.startDrag();
                    e.cancelBubble = true;
                    e.stopPropagation && e.stopPropagation();
                    return e.returnValue = false;
                }.bind( this );

                handle.addEvents( evt );
                this.target = el;
            },

            //private
            getCoors: function( e ){
                var coors = [];
                if ( e.targetTouches && e.targetTouches.length ) {     // iPhone
                    var thisTouch = e.targetTouches[0];
                    coors[0] = thisTouch.clientX;
                    coors[1] = thisTouch.clientY;
                }else{                                 // all others
                    coors[0] = e.clientX;
                    coors[1] = e.clientY;
                }
                return coors;
            },

            //private
            startDrag: function(){
                var target, draging, e;
                target = this.target;
                draging = target.draging = {};

                this.isDraging = true;

                draging.x = parseInt( target.style( "left" ), 10 ) || 0;
                draging.y = parseInt( target.style( "top" ), 10 ) || 0;

                e = Ucren.Event();
                var coors = this.getCoors( e );
                draging.mouseX = coors[0];
                draging.mouseY = coors[1];

                this.registerDocumentEvent();
            },

            //private
            endDrag: function(){
                this.isDraging = false;
                this.unRegisterDocumentEvent();
            },

            //private
            registerDocumentEvent: function(){
                var target, draging;
                target = this.target;
                draging = target.draging;

                draging.documentSelectStart =
                    Ucren.addEvent( document, "selectstart", function( e ){
                        e = e || event;
                        e.stopPropagation && e.stopPropagation();
                        e.cancelBubble = true;
                        return e.returnValue = false;
                    });

                draging.documentMouseMove =
                    Ucren.addEvent( document, this.TOUCH_MOVE, function( e ){
                        var ie, nie;
                        e = e || event;
                        ie = Ucren.isIe && e.button != 1;
                        nie = !Ucren.isIe && e.button != 0;
                        if( (ie || nie ) && !this.isTouch )
                            this.endDrag();
                        var coors = this.getCoors( e );
                        draging.newMouseX = coors[0];
                        draging.newMouseY = coors[1];
                        e.stopPropagation && e.stopPropagation();
                        return e.returnValue = false;
                    }.bind( this ));

                draging.documentMouseUp =
                    Ucren.addEvent( document, this.TOUCH_END, function(){
                        this.endDrag();
                    }.bind( this ));

                var lx, ly;

                clearInterval( draging.timer );
                draging.timer = setInterval( function(){
                    var x, y, dx, dy;
                    if( draging.newMouseX != lx && draging.newMouseY != ly ){
                        lx = draging.newMouseX;
                        ly = draging.newMouseY;
                        dx = draging.newMouseX - draging.mouseX;
                        dy = draging.newMouseY - draging.mouseY;
                        x = draging.x + dx;
                        y = draging.y + dy;
                        if( this.type == "calc" ){
                            this.returnValue( dx, dy, draging.newMouseX, draging.newMouseY );
                        }else{
                            target.left( x ).top( y );
                        }
                    }
                }.bind( this ), 10 );
            },

            //private
            unRegisterDocumentEvent: function(){
                var draging = this.target.draging;
                Ucren.delEvent( document, this.TOUCH_MOVE, draging.documentMouseMove );
                Ucren.delEvent( document, this.TOUCH_END, draging.documentMouseUp );
                Ucren.delEvent( document, "selectstart", draging.documentSelectStart );
                clearInterval( draging.timer );
            },

            //private
            returnValue: function( dx, dy, x, y ){
                //todo something
            }
        }
     );

    // Ucren.Template
    Ucren.Template = Ucren.Class( 
        /* constructor */ function(){
            this.string = join.call( arguments, "" );
        },

        /* methods */ {
            apply: function( conf ){
                return this.string.format( conf );
            }
        }
     );

    // Ucren.BasicElement
    Ucren.BasicElement = Ucren.Class( 
        /* constructor */ function( el ){
            this.dom = el;
        this.countMapping = {};
        },

        /* methods */ {
            isUcrenElement: true,

            attr: function( name, value ){
                if( typeof value == "string" ){
                    this.dom.setAttribute( name, value );
                }else{
                    return this.dom.getAttribute( name );
                }
                return this;
            },

            style: function( /* unknown1, unknown2 */ ){
                var getStyle = Ucren.isIe ?
                    function( name ){
                        return this.dom.currentStyle[name];
                    } :

                    function( name ){
                        var style;
                        style = document.defaultView.getComputedStyle( this.dom, null );
                        return style.getPropertyValue( name );
                    };

                return function( unknown1, unknown2 ){
                    if( typeof unknown1 == "object" ){
                        Ucren.each( unknown1, function( value, key ){
                            this[key] = value;
                        }.bind( this.dom.style ));
                    }else if( typeof unknown1 == "string" && typeof unknown2 == "undefined" ){
                        return getStyle.call( this, unknown1 );
                    }else if( typeof unknown1 == "string" && typeof unknown2 != "undefined" ){
                        this.dom.style[unknown1] = unknown2;
                    }
                    return this;
                };
            }(),

            hasClass: function( name ){
                var className = " " + this.dom.className + " ";
                return className.indexOf( " " + name + " " ) > -1;
            },

            setClass: function( name ){
                if( typeof( name ) == "string" )
                    this.dom.className = name.trim();
                return this;
            },

            addClass: function( name ){
                var el, className;
                el = this.dom;
                className = " " + el.className + " ";
                if( className.indexOf( " " + name + " " ) == -1 ){
                    className += name;
                    className = className.trim();
                    className = className.replace( / +/g, " " );
                    el.className = className;
                }
                return this;
            },

            delClass: function( name ){
                var el, className;
                el = this.dom;
                className = " " + el.className + " ";
                if( className.indexOf( " " + name + " " ) > -1 ){
                    className = className.replace( " " + name + " ", " " );
                    className = className.trim();
                    className = className.replace( / +/g, " " );
                    el.className = className;
                }
                return this;
            },

            html: function( html ){
                var el = this.dom;

                if( typeof html == "string" ){
                    el.innerHTML = html;
                }else if( html instanceof Array ){
                    el.innerHTML = html.join( "" );
                }else{
                    return el.innerHTML;
                }
                return this;
            },

            left: function( number ){
                var el = this.dom;
                if( typeof( number ) == "number" ){
                    el.style.left = number + "px";
                    this.fireEvent( "infect", [{ left: number }] );
                }else{
                    return this.getPos().x;
                }
                return this;
            },

            top: function( number ){
                var el = this.dom;
                if( typeof( number ) == "number" ){
                    el.style.top = number + "px";
                    this.fireEvent( "infect", [{ top: number }] );
                }else{
                    return this.getPos().y;
                }
                return this;
            },

            width: function( unknown ){
                var el = this.dom;
                if( typeof unknown == "number" ){
                    el.style.width = unknown + "px";
                    this.fireEvent( "infect", [{ width: unknown }] );
                }else if( typeof unknown == "string" ){
                    el.style.width = unknown;
                    this.fireEvent( "infect", [{ width: unknown }] );
                    }else{
                    return this.getSize().width;
                    }
                    return this;
                },

            height: function( unknown ){
                    var el = this.dom;
                if( typeof unknown == "number" ){
                    el.style.height = unknown + "px";
                    this.fireEvent( "infect", [{ height: unknown }] );
                }else if( typeof unknown == "string" ){
                    el.style.height = unknown;
                    this.fireEvent( "infect", [{ height: unknown }] );
                    }else{
                    return this.getSize().height;
                    }
                    return this;
                },

            count: function( name ){
                return this.countMapping[name] = ++ this.countMapping[name] || 1;
            },

            display: function( bool ){
                var dom = this.dom;
                if( typeof( bool ) == "boolean" ){
                    dom.style.display = bool ? "block" : "none";
                    this.fireEvent( "infect", [{ display: bool }] );
                }else{
                    return this.style( "display" ) != "none";
                }
                return this;
            },

            first: function(){
                var c = this.dom.firstChild;
                while( c && !c.tagName && c.nextSibling ){
                    c = c.nextSibling;
                }
                return c;
            },

            add: function( dom ){
                var el;
                el = Ucren.Element( dom );
                this.dom.appendChild( el.dom );
                return this;
            },

            remove: function( dom ){
                var el;
                if( dom ){
                    el = Ucren.Element( dom );
                    el.html( "" );
                    this.dom.removeChild( el.dom );
                }else{
                    el = Ucren.Element( this.dom.parentNode );
                    el.remove( this );
                }
                return this;
            },

            insert: function( dom ){
                var tdom;
                tdom = this.dom;
                if( tdom.firstChild ){
                    tdom.insertBefore( dom, tdom.firstChild );
                }else{
                    this.add( dom );
                }
                return this;
            },

            addEvents: function( conf ){
                var blank, el, rtn;
                blank = {};
                rtn = {};
                el = this.dom;
                Ucren.each( conf, function( item, key ){
                    rtn[key] = Ucren.addEvent( el, key, item );
                });
                return rtn;
            },

            removeEvents: function( conf ){
                var blank, el;
                blank = {};
                el = this.dom;
                Ucren.each( conf, function( item, key ){
                    Ucren.delEvent( el, key, item );
                });
                return this;
            },

            getPos: function(){
                var el, parentNode, pos, box, offset;
                el = this.dom;
                pos = {};

                if( el.getBoundingClientRect ){
                    box = el.getBoundingClientRect();
                    offset = Ucren.isIe ? 2 : 0;
                    var doc = document;
                    var scrollTop = Math.max( doc.documentElement.scrollTop,
                        doc.body.scrollTop );
                    var scrollLeft = Math.max( doc.documentElement.scrollLeft,
                        doc.body.scrollLeft );
                    return {
                        x: box.left + scrollLeft - offset,
                        y: box.top + scrollTop - offset
                    };
                }else{
                    pos = {
                        x: el.offsetLeft,
                        y: el.offsetTop
                    };
                    parentNode = el.offsetParent;
                    if( parentNode != el ){
                        while( parentNode ){
                            pos.x += parentNode.offsetLeft;
                            pos.y += parentNode.offsetTop;
                            parentNode = parentNode.offsetParent;
                        }
                    }
                    if( Ucren.isSafari && this.style( "position" ) == "absolute" ){ // safari doubles in some cases
                        pos.x -= document.body.offsetLeft;
                        pos.y -= document.body.offsetTop;
                    }
                }

                if( el.parentNode ){
                    parentNode = el.parentNode;
                }else{
                    parentNode = null;
                }

                while( parentNode && parentNode.tagName.toUpperCase() != "BODY" &&
                    parentNode.tagName.toUpperCase() != "HTML" ){ // account for any scrolled ancestors
                    pos.x -= parentNode.scrollLeft;
                    pos.y -= parentNode.scrollTop;
                    if( parentNode.parentNode ){
                        parentNode = parentNode.parentNode;
                    }else{
                        parentNode = null;
                    }
                }

                return pos;
            },

            getSize: function(){
                var dom = this.dom;
                var display = this.style( "display" );

                if ( display && display !== "none" ) {
                    return { width: dom.offsetWidth, height: dom.offsetHeight };
                    }

                var style = dom.style;
                var originalStyles = {
                    visibility: style.visibility,
                    position:   style.position,
                    display:    style.display
                };

                var newStyles = {
                    visibility: "hidden",
                    display:    "block"
                };

                if ( originalStyles.position !== "fixed" )
                  newStyles.position = "absolute";

                this.style( newStyles );

                var dimensions = {
                    width:  dom.offsetWidth,
                    height: dom.offsetHeight
                };

                this.style( originalStyles );

                return dimensions;
            },

            observe: function( el, fn ){
                el = Ucren.Element( el );
                el.on( "infect", fn.bind( this ));
                return this;
            },

            usePNGbackground: function( image ){
                var dom;
                dom = this.dom;
                if( /\.png$/i.test( image ) && Ucren.isIe6 ){
                    dom.style.filter =
                        "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" +
                        image + "',sizingMethod='scale' );";
                    ///     _background: none;
                    ///  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/pic.png',sizingMethod='scale' );
                }else{
                    dom.style.backgroundImage = "url( " + image + " )";
                }
                return this;
            },

            setAlpha: function(){
                var reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/;
                return function( value ){
                    var element = this.dom, es = element.style;
                    if( !Ucren.isIe ){
                        es.opacity = value / 100;
                    /* }else if( es.filter === "string" ){ */
                    }else{
                        if ( element.currentStyle && !element.currentStyle.hasLayout )
                            es.zoom = 1;

                        if ( reOpacity.test( es.filter )) {
                            value = value >= 99.99 ? "" : ( "alpha( opacity=" + value + " )" );
                            es.filter = es.filter.replace( reOpacity, value );
                        } else {
                            es.filter += " alpha( opacity=" + value + " )";
                        }
                    }
                    return this;
                };
            }(),

            fadeIn: function( callback ){
                if( typeof this.fadingNumber == "undefined" )
                    this.fadingNumber = 0;
                this.setAlpha( this.fadingNumber );

                var fading = function(){
                    this.setAlpha( this.fadingNumber );
                    if( this.fadingNumber == 100 ){
                        clearInterval( this.fadingInterval );
                        callback && callback();
                    }else
                        this.fadingNumber += 10;
                }.bind( this );

                this.display( true );
                clearInterval( this.fadingInterval );
                this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );

                return this;
            },

            fadeOut: function( callback ){
                if( typeof this.fadingNumber == "undefined" )
                    this.fadingNumber = 100;
                this.setAlpha( this.fadingNumber );

                var fading = function(){
                    this.setAlpha( this.fadingNumber );
                    if( this.fadingNumber == 0 ){
                        clearInterval( this.fadingInterval );
                        this.display( false );
                        callback && callback();
                    }else
                        this.fadingNumber -= 10;
                }.bind( this );

                clearInterval( this.fadingInterval );
                this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );

                return this;
            },

            useMouseAction: function( className, actions ){
                /**
                 *  调用示例:  el.useMouseAction( "xbutton", "over,out,down,up" );
                 *  使用效果:  el 会在 "xbutton xbutton-over","xbutton xbutton-out","xbutton xbutton-down","xbutton xbutton-up"
                 *             等四个 className 中根据相应的鼠标事件来进行切换。
                 *  特别提示:  useMouseAction 可使用不同参数多次调用。
                 */
                if( !this.MouseAction )
                    this.MouseAction = new Ucren.MouseAction({ element: this });
                this.MouseAction.use( className, actions );
                return this;
            }
        }
     );

    if( Ucren.isIe )
        document.execCommand( "BackgroundImageCache", false, true );

    for( var i in Ucren ){
        exports[i] = Ucren[i];
    };

    return exports;
});

View Code

亚州城ca88手机版 14

在线演示       源码下载

HTML5版切水果游戏

那曾是风靡满世界的一款手提式有线电话机应用软件游戏切水果,未来JS小组已经将其改版成HTML伍,并将其开源。

核心Javascript代码:

亚州城ca88手机版 15Ucren.BasicDrag
= Ucren.Class( /* constructor */ function( conf ){ conf =
Ucren.fixConfig( conf ); this.type = Ucren.fixString( conf.type,
“normal” ); var isTouch = this.isTouch = “ontouchstart” in window;
this.TOUCH_START = isTouch ? “touchstart” : “mousedown”,
this.TOUCH_MOVE = isTouch ? “touchmove” : “mousemove”, this.TOUCH_END
= isTouch ? “touchend” : “mouseup”; }, /* methods *【亚州城ca88手机版】经典的HTML5游戏及其源码分析,2011年最经典的15个。/ { bind: function(
el, handle ){ el = Ucren.Element( el ); handle = Ucren.Element( handle )
|| el; var evt = {}; evt[this.TOUCH_START] = function( e ){ e =
Ucren.Event( e ); this.startDrag(); e.cancelBubble = true;
e.stopPropagation && e.stopPropagation(); return e.returnValue = false;
}.bind( this ); handle.addEvents( evt ); this.target = el; }, //private
getCoors: function( e ){ var coors = []; if ( e.targetTouches &&
e.targetTouches.length ) { // iPhone var thisTouch =
e.targetTouches[0]; coors[0] = thisTouch.clientX; coors[1] =
thisTouch.clientY; }else{ // all others coors[0] = e.clientX;
coors[1] = e.clientY; } return coors; }, //private startDrag:
function(){ var target, draging, e; target = this.target; draging =
target.draging = {}; this.isDraging = true; draging.x = parseInt(
target.style( “left” ), 10 ) || 0; draging.y = parseInt( target.style(
“top” ), 10 ) || 0; e = Ucren.Event(); var coors = this.getCoors( e );
draging.mouseX = coors[0]; draging.mouseY = coors[1];
this.registerDocumentEvent(); }, //private endDrag: function(){
this.isDraging = false; this.unRegisterDocumentEvent(); }, //private
registerDocumentEvent: function(){ var target, draging; target =
this.target; draging = target.draging; draging.documentSelectStart =
Ucren.addEvent( document, “selectstart”, function( e ){ e = e || event;
e.stopPropagation && e.stopPropagation(); e.cancelBubble = true; return
e.returnValue = false; }); draging.documentMouseMove = Ucren.addEvent(
document, this.TOUCH_MOVE, function( e ){ var ie, nie; e = e || event;
ie = Ucren.isIe && e.button != 1; nie = !Ucren.isIe && e.button != 0;
if( (ie || nie ) && !this.isTouch ) this.endDrag(); var coors =
this.getCoors( e ); draging.newMouseX = coors[0]; draging.newMouseY =
coors[1]; e.stopPropagation && e.stopPropagation(); return
e.returnValue = false; }.bind( this )); draging.documentMouseUp =
Ucren.addEvent( document, this.TOUCH_END, function(){ this.endDrag();
}.bind( this )); var lx, ly; clearInterval( draging.timer );
draging.timer = setInterval( function(){ var x, y, dx, dy; if(
draging.newMouseX != lx && draging.newMouseY != ly ){ lx =
draging.newMouseX; ly = draging.newMouseY; dx = draging.newMouseX –
draging.mouseX; dy = draging.newMouseY – draging.mouseY; x = draging.x +
dx; y = draging.y + dy; if( this.type == “calc” ){ this.returnValue( dx,
dy, draging.newMouseX, draging.newMouseY ); }else{ target.left( x ).top(
y ); } } }.bind( this ), 10 ); }, //private unRegisterDocumentEvent:
function(){ var draging = this.target.draging; Ucren.delEvent( document,
this.TOUCH_MOVE, draging.documentMouseMove ); Ucren.delEvent( document,
this.TOUCH_END, draging.documentMouseUp ); Ucren.delEvent( document,
“selectstart”, draging.documentSelectStart ); clearInterval(
draging.timer ); }, //private returnValue: function( dx, dy, x, y ){
//todo something } } ); // Ucren.Template Ucren.Template = Ucren.Class(
/* constructor */ function(){ this.string = join.call( arguments, “”
); }, /* methods */ { apply: function( conf ){ return
this.string.format( conf ); } } ); // Ucren.BasicElement
Ucren.BasicElement = Ucren.Class( /* constructor */ function( el ){
this.dom = el; this.countMapping = {}; }, /* methods */ {
isUcrenElement: true, attr: function( name, value ){ if( typeof value ==
“string” ){ this.dom.setAttribute( name, value ); }else{ return
this.dom.getAttribute( name ); } return this; }, style: function( /*
unknown1, unknown2 */ ){ var getStyle = Ucren.isIe ? function( name ){
return this.dom.currentStyle[name]; } : function( name ){ var style;
style = document.defaultView.getComputedStyle( this.dom, null ); return
style.getPropertyValue( name ); }; return function( unknown1, unknown2
){ if( typeof unknown1 == “object” ){ Ucren.each( unknown1, function(
value, key ){ this[key] = value; }.bind( this.dom.style )); }else if(
typeof unknown1 == “string” && typeof unknown2 == “undefined” ){ return
getStyle.call( this, unknown1 ); }else if( typeof unknown1 == “string”
&& typeof unknown2 != “undefined” ){ this.dom.style[unknown1] =
unknown2; } return this; }; }(), hasClass: function( name ){ var
className = ” ” + this.dom.className + ” “; return className.indexOf( ”
” + name + ” ” ) > -1; }, setClass: function( name ){ if( typeof(
name ) == “string” ) this.dom.className = name.trim(); return this; },
addClass: function( name ){ var el, className; el = this.dom; className
= ” ” + el.className + ” “; if( className.indexOf( ” ” + name + ” ” ) ==
-1 ){ className += name; className = className.trim(); className =
className.replace( / +/g, ” ” ); el.className = className; } return
this; }, delClass: function( name ){ var el, className; el = this.dom;
className = ” ” + el.className + ” “; if( className.indexOf( ” ” + name

  • ” ” ) > -1 ){ className = className.replace( ” ” + name + ” “, ” ”
    ); className = className.trim(); className = className.replace( / +/g, ”
    ” ); el.className = className; } return this; }, html: function( html ){
    var el = this.dom; if( typeof html == “string” ){ el.innerHTML = html;
    }else if( html instanceof Array ){ el.innerHTML = html.join( “” );
    }else{ return el.innerHTML; } return this; }, left: function( number ){
    var el = this.dom; if( typeof( number ) == “number” ){ el.style.left =
    number + “px”; this.fireEvent( “infect”, [{ left: number }] ); }else{
    return this.getPos().x; } return this; }, top: function( number ){ var
    el = this.dom; if( typeof( number ) == “number” ){ el.style.top = number
  • “px”; this.fireEvent( “infect”, [{ top: number }] ); }else{ return
    this.getPos().y; } return this; }, width: function( unknown ){ var el =
    this.dom; if( typeof unknown == “number” ){ el.style.width = unknown +
    “px”; this.fireEvent( “infect”, [{ width: unknown }] ); }else if(
    typeof unknown == “string” ){ el.style.width = unknown; this.fireEvent(
    “infect”, [{ width: unknown }] ); }else{ return this.getSize().width;
    } return this; }, height: function( unknown ){ var el = this.dom; if(
    typeof unknown == “number” ){ el.style.height = unknown + “px”;
    this.fireEvent( “infect”, [{ height: unknown }] ); }else if( typeof
    unknown == “string” ){ el.style.height = unknown; this.fireEvent(
    “infect”, [{ height: unknown }] ); }else{ return
    this.getSize().height; } return this; }, count: function( name ){ return
    this.countMapping[name] = ++ this.countMapping[name] || 1; },
    display: function( bool ){ var dom = this.dom; if( typeof( bool ) ==
    “boolean” ){ dom.style.display = bool ? “block” : “none”;
    this.fireEvent( “infect”, [{ display: bool }] ); }else{ return
    this.style( “display” ) != “none”; } return this; }, first: function(){
    var c = this.dom.firstChild; while( c && !c.tagName && c.nextSibling ){
    c = c.nextSibling; } return c; }, add: function( dom ){ var el; el =
    Ucren.Element( dom ); this.dom.appendChild( el.dom ); return this; },
    remove: function( dom ){ var el; if( dom ){ el = Ucren.Element( dom );
    el.html( “” ); this.dom.removeChild( el.dom ); }else{ el =
    Ucren.Element( this.dom.parentNode ); el.remove( this ); } return this;
    }, insert: function( dom ){ var tdom; tdom = this.dom; if(
    tdom.firstChild ){ tdom.insertBefore( dom, tdom.firstChild ); }else{
    this.add( dom ); } return this; }, addEvents: function( conf ){ var
    blank, el, rtn; blank = {}; rtn = {}; el = this.dom; Ucren.each( conf,
    function( item, key ){ rtn[key] = Ucren.addEvent( el, key, item ); });
    return rtn; }, removeEvents: function( conf ){ var blank, el; blank =
    {}; el = this.dom; Ucren.each( conf, function( item, key ){
    Ucren.delEvent( el, key, item ); }); return this; }, getPos: function(){
    var el, parentNode, pos, box, offset; el = this.dom; pos = {}; if(
    el.getBoundingClientRect ){ box = el.getBoundingClientRect(); offset =
    Ucren.isIe ? 2 : 0; var doc = document; var scrollTop = Math.max(
    doc.documentElement.scrollTop, doc.body.scrollTop ); var scrollLeft =
    Math.max( doc.documentElement.scrollLeft, doc.body.scrollLeft ); return
    { x: box.left + scrollLeft – offset, y: box.top + scrollTop – offset };
    }else{ pos = { x: el.offsetLeft, y: el.offsetTop }; parentNode =
    el.offsetParent; if( parentNode != el ){ while( parentNode ){ pos.x +=
    parentNode.offsetLeft; pos.y += parentNode.offsetTop; parentNode =
    parentNode.offsetParent; } } if( Ucren.isSafari && this.style(
    “position” ) == “absolute” ){ // safari doubles in some cases pos.x -=
    document.body.offsetLeft; pos.y -= document.body.offsetTop; } } if(
    el.parentNode ){ parentNode = el.parentNode; }else{ parentNode = null; }
    while( parentNode && parentNode.tagName.toUpperCase() != “BODY” &&
    parentNode.tagName.toUpperCase() != “HTML” ){ // account for any
    scrolled ancestors pos.x -= parentNode.scrollLeft; pos.y -=
    parentNode.scrollTop; if( parentNode.parentNode ){ parentNode =
    parentNode.parentNode; }else{ parentNode = null; } } return pos; },
    getSize: function(){ var dom = this.dom; var display = this.style(
    “display” ); if ( display && display !== “none” ) { return { width:
    dom.offsetWidth, height: dom.offsetHeight }; } var style = dom.style;
    var originalStyles = { visibility: style.visibility, position:
    style.position, display: style.display }; var newStyles = { visibility:
    “hidden”, display: “block” }; if ( originalStyles.position !== “fixed” )
    newStyles.position = “absolute”; this.style( newStyles ); var dimensions
    = { width: dom.offsetWidth, height: dom.offsetHeight }; this.style(
    originalStyles ); return dimensions; }, observe: function( el, fn ){ el
    = Ucren.Element( el ); el.on( “infect”, fn.bind( this )); return this;
    }, usePNGbackground: function( image ){ var dom; dom = this.dom; if(
    /\.png$/i.test( image ) && Ucren.isIe6 ){ dom.style.filter =
    “progid:DXImageTransform.Microsoft.AlphaImageLoader( src='” + image +
    “‘,sizingMethod=’scale’ );”; /// _background: none; /// _filter:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src=’images/pic.png’,sizingMethod=’scale’ ); }else{
    dom.style.backgroundImage = “url( ” + image + ” )”; } return this; },
    setAlpha: function(){ var reOpacity =
    /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/; return function(
    value ){ var element = this.dom, es = element.style; if( !Ucren.isIe ){
    es.opacity = value / 100; /* }else if( es.filter === “string” ){ */
    }else{ if ( element.currentStyle && !element.currentStyle.hasLayout )
    es.zoom = 1; if ( reOpacity.test( es.filter )) { value = value >=
    99.99 ? “” : ( “alpha( opacity=” + value + ” )” ); es.filter =
    es.filter.replace( reOpacity, value ); } else { es.filter += ” alpha(
    opacity=” + value + ” )”; } } return this; }; }(), fadeIn: function(
    callback ){ if( typeof this.fadingNumber == “undefined” )
    this.fadingNumber = 0; this.setAlpha( this.fadingNumber ); var fading =
    function(){ this.setAlpha( this.fadingNumber ); if( this.fadingNumber ==
    100 ){ clearInterval( this.fadingInterval ); callback && callback();
    }else this.fadingNumber += 10; }.bind( this ); this.display( true );
    clearInterval( this.fadingInterval ); this.fadingInterval = setInterval(
    fading, Ucren.isIe ? 20 : 30 ); return this; }, fadeOut: function(
    callback ){ if( typeof this.fadingNumber == “undefined” )
    this.fadingNumber = 100; this.setAlpha( this.fadingNumber ); var fading
    = function(){ this.setAlpha( this.fadingNumber ); if( this.fadingNumber
    == 0 ){ clearInterval( this.fadingInterval ); this.display( false );
    callback && callback(); }else this.fadingNumber -= 10; }.bind( this );
    clearInterval( this.fadingInterval ); this.fadingInterval = setInterval(
    fading, Ucren.isIe ? 20 : 30 ); return this; }, useMouseAction:
    function( className, actions ){ /** * 调用示例: el.useMouseAction(
    “xbutton”, “over,out,down,up” ); * 使用效果: el 会在 “xbutton
    xbutton-over”,”xbutton xbutton-out”,”xbutton xbutton-down”,”xbutton
    xbutton-up” * 等三个 className 中依据对应的鼠标事件来进展切换。 *
    特别提醒: useMouseAction 可接纳分化参数数次调用。 */ if(
    !this.MouseAction ) this.MouseAction = new Ucren.MouseAction({ element:
    this }); this.MouseAction.use( className, actions ); return this; } } );
    if( Ucren.isIe ) document.execCommand( “BackgroundImageCache”, false,
    true ); for( var i in Ucren ){ exports[i] = Ucren[i]; }; return
    exports; }); View Code

亚州城ca88手机版 16

在线演示       源码下载

HTML5中中原人民共和国象棋游戏

那款HTML5中夏族民共和国象棋游戏还足以自定义游戏难度,皮肤也不利。

核心Javascript代码:

亚州城ca88手机版 17亚州城ca88手机版 18

/*! 一叶孤舟 | qq:28701884 | 欢迎指教 */    var play = play||{};    play.init = function (){            play.my                =    1;                //玩家方      play.map             =    com.arr2Clone (com.initMap);        //初始化棋盘      play.nowManKey        =    false;            //现在要操作的棋子      play.pace             =    [];                //记录每一步      play.isPlay         =    true ;            //是否能走棋      play.mans             =    com.mans;      play.bylaw             =     com.bylaw;      play.show             =     com.show;      play.showPane         =     com.showPane;      play.isOffensive    =    true;            //是否先手      play.depth            =    play.depth || 3;                //搜索深度            play.isFoul            =    false;    //是否犯规长将                        com.pane.isShow        =     false;            //隐藏方块            //初始化棋子      for (var i=0; i<play.map.length; i++){          for (var n=0; n<play.map[i].length; n++){              var key = play.map[i][n];              if (key){                  com.mans[key].x=n;                  com.mans[key].y=i;                  com.mans[key].isShow = true;              }          }      }      play.show();            //绑定点击事件      com.canvas.addEventListener("click",play.clickCanvas)      //clearInterval(play.timer);      //com.get("autoPlay").addEventListener("click", function(e) {          //clearInterval(play.timer);          //play.timer = setInterval("play.AIPlay()",1000);      //    play.AIPlay()      //})      /*      com.get("offensivePlay").addEventListener("click", function(e) {          play.isOffensive=true;          play.isPlay=true ;              com.get("chessRight").style.display = "none";          play.init();      })            com.get("defensivePlay").addEventListener("click", function(e) {          play.isOffensive=false;          play.isPlay=true ;              com.get("chessRight").style.display = "none";          play.init();      })      */                  com.get("regretBn").addEventListener("click", function(e) {          play.regret();      })            /*      var initTime = new Date().getTime();      for (var i=0; i<=100000; i++){                    var h=""          var h=play.map.join();          //for (var n in play.mans){          //    if (play.mans[n].show) h+=play.mans[n].key+play.mans[n].x+play.mans[n].y          //}      }      var nowTime= new Date().getTime();      z([h,nowTime-initTime])      */        }        //悔棋  play.regret = function (){      var map  = com.arr2Clone(com.initMap);      //初始化所有棋子      for (var i=0; i<map.length; i++){          for (var n=0; n<map[i].length; n++){              var key = map[i][n];              if (key){                  com.mans[key].x=n;                  com.mans[key].y=i;                  com.mans[key].isShow = true;              }          }      }      var pace= play.pace;      pace.pop();      pace.pop();            for (var i=0; i<pace.length; i++){          var p= pace[i].split("")          var x = parseInt(p[0], 10);          var y = parseInt(p[1], 10);          var newX = parseInt(p[2], 10);          var newY = parseInt(p[3], 10);          var key=map[y][x];          //try{                 var cMan=map[newY][newX];          if (cMan) com.mans[map[newY][newX]].isShow = false;          com.mans[key].x = newX;          com.mans[key].y = newY;          map[newY][newX] = key;          delete map[y][x];          if (i==pace.length-1){              com.showPane(newX ,newY,x,y)              }          //} catch (e){          //    com.show()          //    z([key,p,pace,map])                        //    }      }      play.map = map;      play.my=1;      play.isPlay=true;      com.show();  }        //点击棋盘事件  play.clickCanvas = function (e){      if (!play.isPlay) return false;      var key = play.getClickMan(e);      var point = play.getClickPoint(e);            var x = point.x;      var y = point.y;            if (key){          play.clickMan(key,x,y);          }else {          play.clickPoint(x,y);          }      play.isFoul = play.checkFoul();//检测是不是长将  }    //点击棋子,两种情况,选中或者吃子  play.clickMan = function (key,x,y){      var man = com.mans[key];      //吃子      if (play.nowManKey&&play.nowManKey != key && man.my != com.mans[play.nowManKey ].my){          //man为被吃掉的棋子          if (play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){              man.isShow = false;              var pace=com.mans[play.nowManKey].x+""+com.mans[play.nowManKey].y              //z(bill.createMove(play.map,man.x,man.y,x,y))              delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];              play.map[y][x] = play.nowManKey;              com.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)              com.mans[play.nowManKey].x = x;              com.mans[play.nowManKey].y = y;              com.mans[play.nowManKey].alpha = 1                            play.pace.push(pace+x+y);              play.nowManKey = false;              com.pane.isShow = false;              com.dot.dots = [];              com.show()              com.get("clickAudio").play();              setTimeout("play.AIPlay()",500);              if (key == "j0") play.showWin (-1);              if (key == "J0") play.showWin (1);          }      // 选中棋子      }else{          if (man.my===1){              if (com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;              man.alpha = 0.6;              com.pane.isShow = false;              play.nowManKey = key;              com.mans[key].ps = com.mans[key].bl(); //获得所有能着点              com.dot.dots = com.mans[key].ps              com.show();              //com.get("selectAudio").start(0);              com.get("selectAudio").play();          }      }  }    //点击着点  play.clickPoint = function (x,y){      var key=play.nowManKey;      var man=com.mans[key];      if (play.nowManKey){          if (play.indexOfPs(com.mans[key].ps,[x,y])){              var pace=man.x+""+man.y              //z(bill.createMove(play.map,man.x,man.y,x,y))              delete play.map[man.y][man.x];              play.map[y][x] = key;              com.showPane(man.x ,man.y,x,y)              man.x = x;              man.y = y;              man.alpha = 1;              play.pace.push(pace+x+y);              play.nowManKey = false;              com.dot.dots = [];              com.show();              com.get("clickAudio").play();              setTimeout("play.AIPlay()",500);          }else{              //alert("不能这么走哦!")              }      }        }    //Ai自动走棋  play.AIPlay = function (){      //return      play.my = -1 ;      var pace=AI.init(play.pace.join(""))      if (!pace) {          play.showWin (1);          return ;      }      play.pace.push(pace.join(""));      var key=play.map[pace[1]][pace[0]]          play.nowManKey = key;            var key=play.map[pace[3]][pace[2]];      if (key){          play.AIclickMan(key,pace[2],pace[3]);          }else {          play.AIclickPoint(pace[2],pace[3]);          }      com.get("clickAudio").play();              }    //检查是否长将  play.checkFoul = function(){      var p=play.pace;      var len=parseInt(p.length,10);      if (len>11&&p[len-1] == p[len-5] &&p[len-5] == p[len-9]){          return p[len-4].split("");      }      return false;  }        play.AIclickMan = function (key,x,y){      var man = com.mans[key];      //吃子      man.isShow = false;      delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];      play.map[y][x] = play.nowManKey;      play.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)            com.mans[play.nowManKey].x = x;      com.mans[play.nowManKey].y = y;      play.nowManKey = false;            com.show()      if (key == "j0") play.showWin (-1);      if (key == "J0") play.showWin (1);  }    play.AIclickPoint = function (x,y){      var key=play.nowManKey;      var man=com.mans[key];      if (play.nowManKey){          delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];          play.map[y][x] = key;                    com.showPane(man.x,man.y,x,y)                          man.x = x;          man.y = y;          play.nowManKey = false;                }      com.show();  }      play.indexOfPs = function (ps,xy){      for (var i=0; i<ps.length; i++){          if (ps[i][0]==xy[0]&&ps[i][1]==xy[1]) return true;      }      return false;        }    //获得点击的着点  play.getClickPoint = function (e){      var domXY = com.getDomXY(com.canvas);      var x=Math.round((e.pageX-domXY.x-com.pointStartX-20)/com.spaceX)      var y=Math.round((e.pageY-domXY.y-com.pointStartY-20)/com.spaceY)      return {"x":x,"y":y}  }    //获得棋子  play.getClickMan = function (e){      var clickXY=play.getClickPoint(e);      var x=clickXY.x;      var y=clickXY.y;      if (x < 0 || x>8 || y < 0 || y > 9) return false;      return (play.map[y][x] && play.map[y][x]!="0") ? play.map[y][x] : false;  }    play.showWin = function (my){      play.isPlay = false;      if (my===1){          alert("恭喜你,你赢了!");      }else{          alert("很遗憾,你输了!");      }  }

View Code

亚州城ca88手机版 19

在线演示        源码下载

HTML5中夏族民共和国象棋游戏

那款HTML5中中原人民共和国象棋游戏还是能够自定义游戏难度,皮肤也不利。

核心Javascript代码:

亚州城ca88手机版 20亚州城ca88手机版 21

/*! 一叶孤舟 | qq:28701884 | 欢迎指教 */

var play = play||{};

play.init = function (){

    play.my                =    1;                //玩家方
    play.map             =    com.arr2Clone (com.initMap);        //初始化棋盘
    play.nowManKey        =    false;            //现在要操作的棋子
    play.pace             =    [];                //记录每一步
    play.isPlay         =    true ;            //是否能走棋
    play.mans             =    com.mans;
    play.bylaw             =     com.bylaw;
    play.show             =     com.show;
    play.showPane         =     com.showPane;
    play.isOffensive    =    true;            //是否先手
    play.depth            =    play.depth || 3;                //搜索深度

    play.isFoul            =    false;    //是否犯规长将



    com.pane.isShow        =     false;            //隐藏方块

    //初始化棋子
    for (var i=0; i<play.map.length; i++){
        for (var n=0; n<play.map[i].length; n++){
            var key = play.map[i][n];
            if (key){
                com.mans[key].x=n;
                com.mans[key].y=i;
                com.mans[key].isShow = true;
            }
        }
    }
    play.show();

    //绑定点击事件
    com.canvas.addEventListener("click",play.clickCanvas)
    //clearInterval(play.timer);
    //com.get("autoPlay").addEventListener("click", function(e) {
        //clearInterval(play.timer);
        //play.timer = setInterval("play.AIPlay()",1000);
    //    play.AIPlay()
    //})
    /*
    com.get("offensivePlay").addEventListener("click", function(e) {
        play.isOffensive=true;
        play.isPlay=true ;    
        com.get("chessRight").style.display = "none";
        play.init();
    })

    com.get("defensivePlay").addEventListener("click", function(e) {
        play.isOffensive=false;
        play.isPlay=true ;    
        com.get("chessRight").style.display = "none";
        play.init();
    })
    */


    com.get("regretBn").addEventListener("click", function(e) {
        play.regret();
    })

    /*
    var initTime = new Date().getTime();
    for (var i=0; i<=100000; i++){

        var h=""
        var h=play.map.join();
        //for (var n in play.mans){
        //    if (play.mans[n].show) h+=play.mans[n].key+play.mans[n].x+play.mans[n].y
        //}
    }
    var nowTime= new Date().getTime();
    z([h,nowTime-initTime])
    */

}



//悔棋
play.regret = function (){
    var map  = com.arr2Clone(com.initMap);
    //初始化所有棋子
    for (var i=0; i<map.length; i++){
        for (var n=0; n<map[i].length; n++){
            var key = map[i][n];
            if (key){
                com.mans[key].x=n;
                com.mans[key].y=i;
                com.mans[key].isShow = true;
            }
        }
    }
    var pace= play.pace;
    pace.pop();
    pace.pop();

    for (var i=0; i<pace.length; i++){
        var p= pace[i].split("")
        var x = parseInt(p[0], 10);
        var y = parseInt(p[1], 10);
        var newX = parseInt(p[2], 10);
        var newY = parseInt(p[3], 10);
        var key=map[y][x];
        //try{

        var cMan=map[newY][newX];
        if (cMan) com.mans[map[newY][newX]].isShow = false;
        com.mans[key].x = newX;
        com.mans[key].y = newY;
        map[newY][newX] = key;
        delete map[y][x];
        if (i==pace.length-1){
            com.showPane(newX ,newY,x,y)    
        }
        //} catch (e){
        //    com.show()
        //    z([key,p,pace,map])

        //    }
    }
    play.map = map;
    play.my=1;
    play.isPlay=true;
    com.show();
}



//点击棋盘事件
play.clickCanvas = function (e){
    if (!play.isPlay) return false;
    var key = play.getClickMan(e);
    var point = play.getClickPoint(e);

    var x = point.x;
    var y = point.y;

    if (key){
        play.clickMan(key,x,y);    
    }else {
        play.clickPoint(x,y);    
    }
    play.isFoul = play.checkFoul();//检测是不是长将
}

//点击棋子,两种情况,选中或者吃子
play.clickMan = function (key,x,y){
    var man = com.mans[key];
    //吃子
    if (play.nowManKey&&play.nowManKey != key && man.my != com.mans[play.nowManKey ].my){
        //man为被吃掉的棋子
        if (play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){
            man.isShow = false;
            var pace=com.mans[play.nowManKey].x+""+com.mans[play.nowManKey].y
            //z(bill.createMove(play.map,man.x,man.y,x,y))
            delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
            play.map[y][x] = play.nowManKey;
            com.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)
            com.mans[play.nowManKey].x = x;
            com.mans[play.nowManKey].y = y;
            com.mans[play.nowManKey].alpha = 1

            play.pace.push(pace+x+y);
            play.nowManKey = false;
            com.pane.isShow = false;
            com.dot.dots = [];
            com.show()
            com.get("clickAudio").play();
            setTimeout("play.AIPlay()",500);
            if (key == "j0") play.showWin (-1);
            if (key == "J0") play.showWin (1);
        }
    // 选中棋子
    }else{
        if (man.my===1){
            if (com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;
            man.alpha = 0.6;
            com.pane.isShow = false;
            play.nowManKey = key;
            com.mans[key].ps = com.mans[key].bl(); //获得所有能着点
            com.dot.dots = com.mans[key].ps
            com.show();
            //com.get("selectAudio").start(0);
            com.get("selectAudio").play();
        }
    }
}

//点击着点
play.clickPoint = function (x,y){
    var key=play.nowManKey;
    var man=com.mans[key];
    if (play.nowManKey){
        if (play.indexOfPs(com.mans[key].ps,[x,y])){
            var pace=man.x+""+man.y
            //z(bill.createMove(play.map,man.x,man.y,x,y))
            delete play.map[man.y][man.x];
            play.map[y][x] = key;
            com.showPane(man.x ,man.y,x,y)
            man.x = x;
            man.y = y;
            man.alpha = 1;
            play.pace.push(pace+x+y);
            play.nowManKey = false;
            com.dot.dots = [];
            com.show();
            com.get("clickAudio").play();
            setTimeout("play.AIPlay()",500);
        }else{
            //alert("不能这么走哦!")    
        }
    }

}

//Ai自动走棋
play.AIPlay = function (){
    //return
    play.my = -1 ;
    var pace=AI.init(play.pace.join(""))
    if (!pace) {
        play.showWin (1);
        return ;
    }
    play.pace.push(pace.join(""));
    var key=play.map[pace[1]][pace[0]]
        play.nowManKey = key;

    var key=play.map[pace[3]][pace[2]];
    if (key){
        play.AIclickMan(key,pace[2],pace[3]);    
    }else {
        play.AIclickPoint(pace[2],pace[3]);    
    }
    com.get("clickAudio").play();


}

//检查是否长将
play.checkFoul = function(){
    var p=play.pace;
    var len=parseInt(p.length,10);
    if (len>11&&p[len-1] == p[len-5] &&p[len-5] == p[len-9]){
        return p[len-4].split("");
    }
    return false;
}



play.AIclickMan = function (key,x,y){
    var man = com.mans[key];
    //吃子
    man.isShow = false;
    delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
    play.map[y][x] = play.nowManKey;
    play.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)

    com.mans[play.nowManKey].x = x;
    com.mans[play.nowManKey].y = y;
    play.nowManKey = false;

    com.show()
    if (key == "j0") play.showWin (-1);
    if (key == "J0") play.showWin (1);
}

play.AIclickPoint = function (x,y){
    var key=play.nowManKey;
    var man=com.mans[key];
    if (play.nowManKey){
        delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
        play.map[y][x] = key;

        com.showPane(man.x,man.y,x,y)


        man.x = x;
        man.y = y;
        play.nowManKey = false;

    }
    com.show();
}


play.indexOfPs = function (ps,xy){
    for (var i=0; i<ps.length; i++){
        if (ps[i][0]==xy[0]&&ps[i][1]==xy[1]) return true;
    }
    return false;

}

//获得点击的着点
play.getClickPoint = function (e){
    var domXY = com.getDomXY(com.canvas);
    var x=Math.round((e.pageX-domXY.x-com.pointStartX-20)/com.spaceX)
    var y=Math.round((e.pageY-domXY.y-com.pointStartY-20)/com.spaceY)
    return {"x":x,"y":y}
}

//获得棋子
play.getClickMan = function (e){
    var clickXY=play.getClickPoint(e);
    var x=clickXY.x;
    var y=clickXY.y;
    if (x < 0 || x>8 || y < 0 || y > 9) return false;
    return (play.map[y][x] && play.map[y][x]!="0") ? play.map[y][x] : false;
}

play.showWin = function (my){
    play.isPlay = false;
    if (my===1){
        alert("恭喜你,你赢了!");
    }else{
        alert("很遗憾,你输了!");
    }
}

View Code

亚州城ca88手机版 22

在线演示        源码下载

HTML5中中原人民共和国象棋游戏

那款HTML5中中原人民共和国象棋游戏还足以自定义游戏难度,皮肤也不易。

核心Javascript代码:

亚州城ca88手机版 23/*!
一叶孤舟 | qq:2870188四 | 欢迎指教 */ var play = play||{}; play.init =
function (){ play.my = 一; //玩家方 play.map = com.arr2Clone
(com.initMap); //伊始化棋盘 play.nowManKey = false; //现在要操作的棋子
play.pace = []; //记录每一步 play.isPlay = true ; //是或不是能走棋
play.mans = com.mans; play.bylaw = com.bylaw; play.show = com.show;
play.showPane = com.showPane; play.isOffensive = true; //是还是不是先手
play.depth = play.depth || 叁; //搜索深度 play.isFoul = false;
//是或不是犯规长将 com.pane.isShow = false; //隐藏方块 //开头化棋子 for (var
i=0; i<play.map.length; i++){ for (var n=0;
n<play.map[i].length; n++){ var key = play.map[i][n]; if (key){
com.mans[key].x=n; com.mans[key].y=i; com.mans[key].isShow = true;
} } } play.show(); //绑定点击事件
com.canvas.add伊芙ntListener(“click”,play.clickCanvas)
//clearInterval(play.timer);
//com.get(“autoPlay”).add伊夫ntListener(“click”, function(e) {
//clearInterval(play.timer); //play.timer =
setInterval(“play.AIPlay()”,一千); // play.AIPlay() //}) /*
com.get(“offensivePlay”).addEventListener(“click”, function(e) {
play.isOffensive=true; play.isPlay=true ;
com.get(“chessRight”).style.display = “none”; play.init(); })
com.get(“defensivePlay”).addEventListener(“click”, function(e) {
play.isOffensive=false; play.isPlay=true ;
com.get(“chessRight”).style.display = “none”; play.init(); }) */
com.get(“regretBn”).addEventListener(“click”, function(e) {
play.regret(); }) /* var initTime = new Date().getTime(); for (var i=0;
i<=100000; i++){ var h=”” var h=play.map.join(); //for (var n in
play.mans){ // if (play.mans[n].show)
h+=play.mans[n].key+play.mans[n].x+play.mans[n].y //} } var
nowTime= new Date().getTime(); z([h,nowTime-initTime]) */ } //悔棋
play.regret = function (){ var map = com.arr2Clone(com.initMap);
//初步化全部棋子 for (var i=0; i<map.length; i++){ for (var n=0;
n<map[i].length; n++){ var key = map[i][n]; if (key){
com.mans[key].x=n; com.mans[key].y=i; com.mans[key].isShow = true;
} } } var pace= play.pace; pace.pop(); pace.pop(); for (var i=0;
i<pace.length; i++){ var p= pace[i].split(“”) var x =
parseInt(p[0], 10); var y = parseInt(p[1], 10); var newX =
parseInt(p[2], 10); var newY = parseInt(p[3], 10); var
key=map[y][x]; //try{ var cMan=map[newY][newX]; if (cMan)
com.mans[map[newY][newX]].isShow = false; com.mans[key].x =
newX; com.mans[key].y = newY; map[newY][newX] = key; delete
map[y][x]; if (i==pace.length-1){ com.showPane(newX ,newY,x,y) } //}
catch (e){ // com.show() // z([key,p,pace,map]) // } } play.map = map;
play.my=1; play.isPlay=true; com.show(); } //点击棋盘事件
play.clickCanvas = function (e){ if (!play.isPlay) return false; var key
= play.getClickMan(e); var point = play.getClickPoint(e); var x =
point.x; var y = point.y; if (key){ play.clickMan(key,x,y); }else {
play.clickPoint(x,y); } play.isFoul = play.checkFoul();//检查测试是或不是长将
} //点击棋子,两种状态,选中也许吃子 play.clickMan = function (key,x,y){
var man = com.mans[key]; //吃子 if (play.nowManKey&&play.nowManKey !=
key && man.my != com.mans[play.nowManKey ].my){ //man为被吃掉的棋子 if
(play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){ man.isShow =
false; var
pace=com.mans[play.nowManKey].x+””+com.mans[play.nowManKey].y
//z(bill.createMove(play.map,man.x,man.y,x,y)) delete
play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
com.showPane(com.mans[play.nowManKey].x
,com.mans[play.nowManKey].y,x,y) com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y; com.mans[play.nowManKey].alpha = 1
play.pace.push(pace+x+y); play.nowManKey = false; com.pane.isShow =
false; com.dot.dots = []; com.show() com.get(“click奥迪(Audi)o”).play();
setTimeout(“play.AIPlay()”,500); if (key == “j0”) play.showWin (-1); if
(key == “J0”) play.showWin (1); } // 选中棋子 }else{ if (man.my===一){ if
(com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;
man.alpha = 0.6; com.pane.isShow = false; play.nowManKey = key;
com.mans[key].ps = com.mans[key].bl(); //获得全数能着点 com.dot.dots
= com.mans[key].ps com.show(); //com.get(“select奥迪(Audi)o”).start(0);
com.get(“select奥迪(Audi)o”).play(); } } } //点击着点 play.clickPoint =
function (x,y){ var key=play.nowManKey; var man=com.mans[key]; if
(play.nowManKey){ if (play.indexOfPs(com.mans[key].ps,[x,y])){ var
pace=man.x+””+man.y //z(bill.createMove(play.map,man.x,man.y,x,y))
delete play.map[man.y][man.x]; play.map[y][x] = key;
com.showPane(man.x ,man.y,x,y) man.x = x; man.y = y; man.alpha = 1;
play.pace.push(pace+x+y); play.nowManKey = false; com.dot.dots = [];
com.show(); com.get(“click奥迪o”).play();
setTimeout(“play.AIPlay()”,500); }else{ //alert(“不能够如此走啊!”) } } }
//Ai自动走棋 play.AIPlay = function (){ //return play.my = -一 ; var
pace=AI.init(play.pace.join(“”)) if (!pace) { play.showWin (1); return ;
} play.pace.push(pace.join(“”)); var
key=play.map[pace[1]][pace[0]] play.nowManKey = key; var
key=play.map[pace[3]][pace[2]]; if (key){
play.AIclickMan(key,pace[2],pace[3]); }else {
play.AIclickPoint(pace[2],pace[3]); } com.get(“click奥迪(Audi)o”).play();
} //检查是或不是长将 play.checkFoul = function(){ var p=play.pace; var
len=parseInt(p.length,10); if (len>1一&&p[len-1] == p[len-5]
&&p[len-5] == p[len-9]){ return p[len-4].split(“”); } return
false; } play.AIclickMan = function (key,x,y){ var man =
com.mans[key]; //吃子 man.isShow = false; delete
play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
play.showPane(com.mans[play.nowManKey].x
,com.mans[play.nowManKey].y,x,y) com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y; play.nowManKey = false; com.show() if
(key == “j0”) play.showWin (-1); if (key == “J0”) play.showWin (1); }
play.AIclickPoint = function (x,y){ var key=play.nowManKey; var
man=com.mans[key]; if (play.nowManKey){ delete
play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = key; com.showPane(man.x,man.y,x,y) man.x = x; man.y
= y; play.nowManKey = false; } com.show(); } play.indexOfPs = function
(ps,xy){ for (var i=0; i<ps.length; i++){ if
(ps[i][0]==xy[0]&&ps[i][1]==xy[1]) return true; } return
false; } //获得点击的着点 play.getClickPoint = function (e){ var domXY =
com.getDomXY(com.canvas); var
x=Math.round((e.pageX-domXY.x-com.pointStartX-20)/com.spaceX) var
y=Math.round((e.pageY-domXY.y-com.pointStartY-20)/com.spaceY) return
{“x”:x,”y”:y} } //获得棋子 play.getClickMan = function (e){ var
clickXY=play.getClickPoint(e); var x=clickXY.x; var y=clickXY.y; if (x
< 0 || x>捌 || y < 0 || y > 九) return false; return
(play.map[y][x] && play.map[y][x]!=”0″) ? play.map[y][x] :
false; } play.showWin = function (my){ play.isPlay = false; if (my===1){
alert(“恭喜你,你赢了!”); }else{ alert(“很遗憾,你输了!”); } } View Code

亚州城ca88手机版 24

在线演示        源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图