2011年最经典的15个,经典的HTML5游戏及其源码分析

二零一一年最经典的1七个 HTML5游戏

2011/05/21 · HTML5 ·
HTML5

在过去的一年内,Web 技术具有一点都一点都不小的变革性的换代,取得高速的升华,尤其是
HTML5 技术越发 Web 带来与众不一致的血流。那将一直改动 Flash 控制着Web
游戏的局面。越多的开发职员初叶运用 HTML5
来开发一些交互性相当强、效果十二分非凡的施用和游乐。

  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浏览器)

图片 1

  10. RGB Invaders

图片 2

  11. Canvas Rider

图片 3

  12. Blinkwang

图片 4

  13.
CoverFire

图片 5

  14. HTML5
Helicopter

图片 6

  15. Blobby
Volley

图片 7

  原文:True
Logic    译文:oschina

 

赞 1 收藏
评论

图片 8

HTML5已经格外强大,在HTML5阳台上,大家得以做到很多卓殊复杂的卡通片效果,包含游戏在内。早期大家只可以接纳flash来完结互连网游戏,现在我们又多了一种选择,即用HTML5创设游戏。比较flash,HTML5特别灵敏方便,随着浏览器技术的持续提拔,HTML5决然会广阔运用,至少在网页动画方面,上边是一些利用HTML5完事的游乐文章。

HTML5已经极度强劲,在HTML5阳台上,大家能够形成很多格外复杂的卡通片效果,包罗游戏在内。早期大家只好使用flash来实现网络游戏,今后我们又多了一种选拔,即用HTML5创设游戏。比较flash,HTML5越发灵活方便,随着浏览器技术的穿梭晋升,HTML5毫无疑问会广阔利用,至少在网页动画方面,上边是局部使用HTML5完毕的游戏作品。

经文的HTML5游戏及其源码分析,经典html5源码

HTML5已经万分强大,在HTML5阳台上,大家得以成功很多极度复杂的动画效果,包蕴游戏在内。早期大家不得不选用flash来实现互连网游戏,今后大家又多了一种选取,即用HTML5制作游戏。相比较flash,HTML5更加灵敏方便,随着浏览器技术的无休止升级,HTML5决然会大规模应用,至少在网页动画方面,上边是局地选取HTML5成功的娱乐文章。

HTML5版切水果游戏

那曾是流行全世界的一款手提式有线电电话机APP游戏切水果,以往JS小组已经将其改版成HTML5,并将其开源。

核心Javascript代码:

图片 9图片 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

图片 11

在线演示       源码下载

HTML5版切水果游戏

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

核心Javascript代码:

图片 12图片 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

图片 14

在线演示       源码下载

HTML5版切水果游戏

那曾是流行全球的一款手提式有线电话机APP游戏切水果,现在JS小组已经将其改版成HTML5,并将其开源。

2011年最经典的15个,经典的HTML5游戏及其源码分析。核心Javascript代码:

图片 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 */ { 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

图片 16

在线演示       源码下载

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

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

核心Javascript代码:

图片 17图片 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

图片 19

在线演示        源码下载

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

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

核心Javascript代码:

图片 20图片 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

图片 22

在线演示        源码下载

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

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

核心Javascript代码:

图片 23/*!
一叶孤舟 | 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.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奥迪o”).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(“select奥迪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奥迪(Audi)o”).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(“click奥迪o”).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

图片 24

在线演示        源码下载

相关文章