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

HTML5已经相当强大，在HTML5平台上，我们可以完成很多非常复杂的动画效果，包括游戏在内。早期我们只能利用flash来实现网络游戏，现在我们又多了一种选择，即用HTML5制作游戏。相比flash，HTML5更加灵活方便，随着浏览器技术的不断升级，HTML5一定会广泛使用，至少在网页动画方面，下面是一些利用HTML5完成的游戏作品。

HTML5版切水果游戏

这曾是风靡全球的一款手机APP游戏切水果，现在JS小组已经将其改版成HTML5，并将其开源。

核心Javascript代码：

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