2011年最经典的15个 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 & Javascript 俄罗斯方块游戏,经典html5

  Blockrain.js 是一个使用 HTML5 & JavaScript
开发的经典俄罗斯方块游戏。只需要复制和粘贴一段代码就可以玩起来了。最重要的是,它是响应式的,无论你的显示屏多么宽都能自动匹配。你可以自定义你想要的颜色以适应您的网站,也可以调整方块落下的速度。

 

 

在线演示      源码下载

 

您可能感兴趣的相关文章

  • 网站开发中很有用的 jQuery 效果【附源码】
  • 分享35个让人惊讶的 CSS3 动画效果演示
  • 十分惊艳的8个 HTML5 & JavaScript 特效
  • Web 开发中很实用的10个效果【源码下载】
  • 12款经典的白富美型 jQuery 图片轮播插件

 

本文链接:经典的 HTML5 & Javascript 俄罗斯方块游戏

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

HTML5 Javascript 俄罗斯方块游戏,经典html5
Blockrain.js 是一个使用 HTML5 JavaScript
开发的经典俄罗斯方块游戏。只需要复制和粘贴一段代码就…

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中国象棋游戏

这款HTML5中国象棋游戏还可以自定义游戏难度,皮肤也不错。

核心Javascript代码:

图片 12图片 13

/*! 一叶孤舟 | 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

图片 14

在线演示        源码下载

HTML5五子棋游戏

图片 15

在线演示        源码下载

HTML5版Flappy Bird游戏

Flappy Bird这款变态游戏也被改造成HTML5版,这也是意料之中的事情。

核心Javascript代码:

图片 16图片 17

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var game_state = {};

// Creates a new 'main' state that will contain the game
game_state.main = function() { };  
game_state.main.prototype = {

    // Function called first to load all the assets
    preload: function() { 
        // Change the background color of the game
        this.game.stage.backgroundColor = '#71c5cf';

        // Load the bird sprite
        this.game.load.image('bird', 'assets/bird.png');  

        // Load the pipe sprite
        this.game.load.image('pipe', 'assets/pipe.png');      
    },

    // Fuction called after 'preload' to setup the game 
    create: function() { 
        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');

        // Add gravity to the bird to make it fall
        this.bird.body.gravity.y = 1000; 

        // Call the 'jump' function when the spacekey is hit
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this); 

        // Create a group of 20 pipes
        this.pipes = game.add.group();
        this.pipes.createMultiple(20, 'pipe');  

        // Timer that calls 'add_row_of_pipes' ever 1.5 seconds
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);           

        // Add a score label on the top left of the screen
        this.score = 0;
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style);  
    },

    // This function is called 60 times per second
    update: function() {
        // If the bird is out of the world (too high or too low), call the 'restart_game' function
        if (this.bird.inWorld == false)
            this.restart_game(); 

        // If the bird overlap any pipes, call 'restart_game'
        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);      
    },

    // Make the bird jump 
    jump: function() {
        // Add a vertical velocity to the bird
        this.bird.body.velocity.y = -350;
    },

    // Restart the game
    restart_game: function() {
        // Remove the timer
        this.game.time.events.remove(this.timer);

        // Start the 'main' state, which restarts the game
        this.game.state.start('main');
    },

    // Add a pipe on the screen
    add_one_pipe: function(x, y) {
        // Get the first dead pipe of our group
        var pipe = this.pipes.getFirstDead();

        // Set the new position of the pipe
        pipe.reset(x, y);

         // Add velocity to the pipe to make it move left
        pipe.body.velocity.x = -200; 

        // Kill the pipe when it's no longer visible 
        pipe.outOfBoundsKill = true;
    },

    // Add a row of 6 pipes with a hole somewhere in the middle
    add_row_of_pipes: function() {
        var hole = Math.floor(Math.random()*5)+1;

        for (var i = 0; i < 8; i++)
            if (i != hole && i != hole +1) 
                this.add_one_pipe(400, i*60+10);   

        this.score += 1;
        this.label_score.content = this.score;  
    },
};

// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);  
game.state.start('main'); 

View Code

图片 18

在线演示        源码下载

HTML5太空战机游戏

很普通的战机游戏,但是用HTML5实现就略显高大上了。

核心Javascript代码:

图片 19图片 20

var g_canvas;
      var g_context;
      var g_soundsLoaded;
      var g_isChr;
      var g_onscreenControls;
      var g_paused;
      var g_renderInterval;
      var g_clockInterval;

      var g_totalItems;
      var g_itemsLoaded;

      var g_background;
      var g_foreground;

      var g_ship;
      var g_gameState;
      var g_highScore;

      var g_powerups;
      var g_floatyText;
      var g_projectiles;
      var g_enemyProjectiles;
      var g_enemies;
      var g_afterEffects;
      var g_rainbow;

      var g_basicShotSound;
      var g_laserShotSound;
      var g_dinkSound;
      var g_smallExplodeSound;
      var g_bonusSound;
      var g_explodeSound;
      var g_artifact_chard_sound;
      var g_double_sound;
      var g_gem_sound;
      var g_gun_sound;
      var g_shot_sound;
      var g_speed_sound;

      var g_levelDirector;
      var g_shotsFired;
      var g_shotsRequired;
      var g_accuracy;
      var g_showAccuracy;
      var g_enemiesDestroyed;


      //
      // main() is called once the game has loaded and the user has clicked
      // on the "new game" button on the splash screen. This is a clean slate
      // with no registered timers or event listeners.
      //
      function main()
      {
         var level_1_loop = document.getElementById("level_1_loop");
         var bossLoop = document.getElementById("boss_loop");

         //dbg("engine = " + navigator.userAgent, false);
         g_rainbow = new Array("yellow", "orange", "white", "red");

         document.addEventListener('keydown', keyDown, false);
         document.addEventListener('keyup', keyUp, false);

         if ( g_basicShotSound == null )
         {

            g_basicShotSound = new Sound("basic_shot",5);
            g_laserShotSound = new Sound("laser",5);
            g_smallExplodeSound = new Sound("small_explode",5);
            g_bonusSound = new Sound("bonus_sound",4);
            g_explodeSound = new Sound("explode", 3);

            g_artifact_chard_sound = new Sound("artifact_chard_sound", 2);
            g_double_sound = new Sound("double_sound", 2);
            g_gem_sound = new Sound("gem_sound", 4);
            g_gun_sound = new Sound("gun_sound", 2);
            g_shot_sound = new Sound("shot_sound", 3);
            g_speed_sound = new Sound("speed_sound", 3);
         }

         g_highScore = 0;
         g_gameState = "setup";
         g_levelDirector = new LevelDirector();

         //
         // telling the level director to start will put the clock and
         // render loops on interval timers
         //
         g_levelDirector.startLevel();
      }

      //
      // map a sound name to a global audio object
      //
      function lookupSound(name)
      {
         if ( name == "double_sound" )
            return g_double_sound;
         else if ( name == "gem_sound" )
            return g_gem_sound;
         else if ( name == "gun_sound" )
            return g_gun_sound;
         else if ( name == "shot_sound" )
            return g_shot_sound;
         else if ( name == "speed_sound" )
            return g_speed_sound;

         dbg("Failed sound lookup: " + name, false);

         return null;
      }

      //
      // the level director will kick off an interval that calls
      // this function every 100ms 
      //
      function clockLoop()
      {
         if ( g_paused )
            return;

         g_levelDirector.myClock += 100;
         //dbg("Clock = " +  g_levelDirector.myClock, false);

         g_levelDirector.launchSorties();
         g_levelDirector.gameEvents();
      }

      //
      // the LevelDirector will kick off an interval that calls this function
      // which redraws the entire screen. that interval determines the game's
      // fps.
      //
      function renderLoop()
      { 
         if ( g_paused )
            return;

         g_background.render();
         g_ship.render();

         var remainingPowerups = new Array();
         for (var i = 0; i < g_powerups.length; ++i)
         {
            if (g_powerups[i].render())
            {
               remainingPowerups.push(g_powerups[i]);
            }
            else delete g_powerups[i];
         }
         delete g_powerups;
         g_powerups = remainingPowerups;

         var remainingText = new Array();
         for (var i = 0; i < g_floatyText.length; ++i)
         {
            if (g_floatyText[i].render())
            {
               remainingText.push(g_floatyText[i]);
            }
            else delete g_floatyText[i];
         }
         delete g_floatyText;
         g_floatyText = remainingText;

         var remainingEnemies = new Array();
         for (var i = 0; i < g_enemies.length; ++i)
         {
            if (g_enemies[i].render())
            {
               remainingEnemies.push(g_enemies[i]);
            }
            else delete g_enemies[i];
         }
         delete g_enemies;
         g_enemies = remainingEnemies;

         var remainingProjectiles = new Array();
         for (var i = 0; i < g_projectiles.length; ++i)
         {
            if (g_projectiles[i].render())
            {
               remainingProjectiles.push(g_projectiles[i]);
            }
            else delete g_projectiles[i];
         }
         delete g_projectiles;
         g_projectiles = remainingProjectiles;

         var remainingEnemyProjectiles = new Array();
         for (var i = 0; i < g_enemyProjectiles.length; ++i)
         {
            if (g_enemyProjectiles[i].render())
            {
               remainingEnemyProjectiles.push(g_enemyProjectiles[i]);
            }
            else delete g_enemyProjectiles[i];
         }
         delete g_enemyProjectiles;
         g_enemyProjectiles = remainingEnemyProjectiles;

         var remainingAfterEffects = new Array();
         for (var i = 0; i < g_afterEffects.length; ++i)
         {
            if (g_afterEffects[i].render())
            {
               remainingAfterEffects.push(g_afterEffects[i]);
            }
            else delete g_afterEffects[i];
         }
         delete g_afterEffects;
         g_afterEffects = remainingAfterEffects;

         g_levelDirector.renderSpecialText();

         g_foreground.render();

         if ( g_onscreenControls )
         {
            var ox = 40;
            var oy = 300;
            var ow = 30;

            var tx = 8;
            var ty = 22;

            g_context.fillStyle = "yellow";
            g_context.strokeStyle = "yellow";
            g_context.strokeRect(ox,oy,ow,ow);
            g_context.strokeRect(ox-35,oy+35,ow,ow);
            g_context.strokeRect(ox+35,oy+35,ow,ow);
            g_context.strokeRect(ox,oy+70,ow,ow);
            g_context.strokeRect(ox+520,oy+35,ow,ow);
            g_context.strokeRect(ox+270,oy+35,ow,ow);

            g_context.fillText("U",ox+tx,oy+ty);
            g_context.fillText("L", ox-35+tx,oy+35+ty);
            g_context.fillText("R", ox+35+tx,oy+35+ty);
            g_context.fillText("D", ox+tx,oy+70+ty);
            g_context.fillText("Z",ox+520+tx,oy+35+ty);
            g_context.fillText("P",ox+270+tx,oy+35+ty);
         }

         g_ship.renderPowers();
      }

      //--------------------------- BEGIN MUSIC LOOPING FUNCTIONS-------------//

      //
      // no browser currently correctly implements the looping feature
      // of the Autdio object yet, so we have to listen for the ended event
      // on our background music and play it again
      //
      function start_level_1_loop(terminate)
      {
         var level_1_loop = document.getElementById("level_1_loop");

         if ( terminate != undefined )
         {
            if ( terminate.toString() == "boss" )
            {
               level_1_loop.volume = 0;
               level_1_loop.removeEventListener("ended", l1_loopit, true);
               return;
            }
            else if ( terminate.toString() == "gameover" )
            {
               level_1_loop.removeEventListener("ended", l1_loopit, true);
               level_1_loop.pause();
               return;
            }
         }

         l1_loopit();
      }

      function l1_loopit()
      {
         var level_1_loop = document.getElementById("level_1_loop");
         level_1_loop.volume = 1;
         level_1_loop.play();
         level_1_loop.addEventListener("ended", l1_loopit, true);
      }

      function startBossLoop(terminate)
      {
         var bossLoop = document.getElementById("boss_loop");

         if ( terminate != undefined && terminate.toString() == "end_boss")
         {
            bossLoop.volume = 0;
            bossLoop.removeEventListener("ended", bos_loopit, true);
            return;
         }

         bos_loopit();
      }
      function bos_loopit()
      {
         var bossLoop = document.getElementById("boss_loop");
         bossLoop.volume = 1;
         bossLoop.play();
         bossLoop.addEventListener("ended", bos_loopit, true);
      }


      function startLevel2Loop(terminate)
      {
         var penguinLoop = document.getElementById("level_2_loop");

         if ( terminate != undefined && terminate.toString() == "terminate")
         {
            penguinLoop.volume = 0;
            penguinLoop.removeEventListener("ended", l2_loopit, true);
            return;
         }
         l2_loopit();
      }

      function l2_loopit()
      {
         var penguinLoop = document.getElementById("level_2_loop");
         penguinLoop.volume = 1;
         penguinLoop.play();
         penguinLoop.addEventListener("ended", l2_loopit, true);
      }

      //
      // write message to debug area
      //
      function dbg(str, append)
      {
         var dbgObj = document.getElementById("dbg");
         dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
      }

      //
      // appends all game sounds to the document. called after the loading
      // screen itself is loaded.  The GameSounds.php file does a base64_encode
      // on the actual .ogg files residing on the server.  This is so the sound
      // objects can be repeatedly re-initialized without a network hit. This
      // is part of a workaround for Chrome because that browser does not 
      // correctly re-play short audio sounds (which is just about every sound
      // effect in the game)
      //
      function loadGameSounds()
      {
          var fileref=document.createElement('script')
          fileref.setAttribute("type","text/javascript")
          fileref.setAttribute("src", "http://dougx.net/plunder/GameSounds.php")

          var agent = navigator.userAgent;
          if ( agent.indexOf("MSIE") != -1 )
          {
             //
             // IE9 does not support OGG so we have to load a special
             // version of the file that has MP3 encoded sound
             //
             fileref.setAttribute("src", "GameSoundsIE9.php")
          }

      fileref.onload = function() { g_soundsLoaded = true; }

          document.getElementsByTagName("head")[0].appendChild(fileref)
      }

      function pause()
      {
         if (g_paused == null )
            g_paused = false;

         g_paused = !g_paused;

         if ( g_paused )
            dbg("Game Paused", false);
         else
            dbg("", false);
      }

View Code

图片 21

在线演示        源码下载

HTML5超级玛丽游戏重体验

重温少年时的快乐,这是用HTML5改版的超级玛丽游戏。

图片 22

在线演示        源码下载

HTML5跳伞游戏

跳伞游戏,比谁先安全着陆,点击鼠标开始下落,再点击鼠标展开降落伞,你要控制好时机,让自己最先安全着陆。

图片 23

在线演示        源码下载

发表评论

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

网站地图xml地图