俄罗斯方块 javascript 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
    div { display: block; background-color: black; position: absolute; font: 17px Tahoma; color: #fff; }
    
    span { float: left; background-color: gray; width: 12px; height: 12px; border: 4px gray outset; margin: 0 1 1 0; overflow: hidden; }
    
    p { float: left; width: 8px; height: 8px; border: 2px gray outset; overflow: hidden; margin: 0; padding: 0; }
    
    #main { width: 375px; height: 430px; display: block; background-color: gray; position: relative; }
    
    #body { width: 241px; height: 401px; left: 15px; top: 15px; border: 1px solid #999; }
    
    #score { width: 80px; height: 24px; left: 270px; top: 15px; padding: 4px; }
    
    #level { width: 80px; height: 24px; left: 270px; top: 50px; padding: 4px; }
    
    #next { width: 50px; height: 50px; left: 270px; top: 85px; border: 19px black solid; }
    
    #ctrl { width: 80px; height: 55px; left: 270px; top: 360px; padding: 4px; text-align: center; background-color: gray; }
    
    #ctrl button { width: 80px; height: 25px; }
</style>
<script>

    //By: X!ao_f QQ:120000512  

    var G = {

        fs: [],

        fn: [],

        score: 0,

        l: ['#9F0', '#FF3', '#F33', '#C0C', '#33C', '#0F3', '#F93'],

        v: [0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0xFFFF],

        d: [[0xCC00], [0x4444, 0xF0], [0x8C40, 0x6C00], [0x4C80, 0xC600], [0x44C0, 0x8E00, 0xC880, 0xE200], [0x88C0, 0xE800, 0xC440, 0x2E00], [0x4E00, 0x8C80, 0xE400, 0x4C40]],

        init: function () {

            var body = document.getElementById( 'body' );

            var next = document.getElementById( 'next' );

            for ( var i = 0; i < 240; i++ ) {

                G.fs.push( body.appendChild( document.createElement( "span" ) ) );

            }

            for ( var i = 0; i < 16; i++ ) {

                G.fn.push( next.appendChild( document.createElement( "p" ) ) );

            }

            G.domScore = document.getElementById( 'score' );

            G.domLevel = document.getElementById( 'level' );

            document.onkeydown = function ( e ) { G.event( e || window.event, 0 ) };

            G.rand();

            G.next();

        },

        timeTesk: function () {

            if ( G.pause ) return;

            if ( !G.move( G.x, G.y + 1, G.t ) ) {

                var s = 0;

                for ( var i = 0; i < 19; i++ ) {

                    G.v[i] = G.v[i] | G.m[i];

                    if ( G.v[i] == 0xFFF ) {

                        for ( var k = i; k > 0; k-- ) {

                            G.v[k] = G.v[k - 1];

                        }

                        G.score += ++s;

                    }

                }

                G.next();

                return false;

            }

            G.draw();

            return true;

        },

        move: function ( x, y, t ) {

            var m = [];

            for ( var k = 0; k < 4; k++ ) {

                m[y + k] = ( G.d[G.n][t] >> ( 3 - k ) * 4 & 0xF ) << Math.max( x, 0 ) >> -Math.min( x, 0 );

                if ( m[y + k] & G.v[y + k] ) {

                    return false;

                }

            }

            G.x = x;

            G.y = y;

            G.t = t;

            G.m = m;

            G.draw();

            return true;

        },

        rand: function () {

            G.n = G._n;

            G.t = G._t;

            G.c = G._c;

            G._n = parseInt( Math.random() * G.d.length );

            G._t = parseInt( Math.random() * G.d[G._n].length );

            G._c = parseInt( Math.random() * G.l.length );

        },

        next: function () {

            G.rand();

            if ( parseInt( G.score / 20 ) != G.level ) {

                G.level = parseInt( G.score / 20 );

                clearInterval( G.handle );

                G.handle = setInterval( "G.timeTesk()", 500 / ( G.level + 1 ) );

            }

            G.domScore.innerHTML = 'Score:' + G.score;

            G.domLevel.innerHTML = 'Level:' + G.level;

            var i = 0;

            while ( !( G.d[G.n][G.t] >> i * 4 & 0xF ) ) i++;

            if ( !G.move( 3, i - 3, G.t ) ) {

                alert( 'Game over!' );

                clearInterval( G.handle );

            }

        },

        draw: function () {

            for ( var i = 0; i < 240; i++ ) {

                if ( ( G.v[parseInt( i / 12 )] >> ( 11 - i % 12 ) ) & 0x1 ) {

                    G.fs[i].style.visibility = '';

                } else if ( ( G.m[parseInt( i / 12 )] >> ( 11 - i % 12 ) ) & 0x1 ) {

                    G.fs[i].style.visibility = '';

                    G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];

                } else {

                    G.fs[i].style.visibility = 'hidden';

                }

            }

            for ( var i = 0; i < 16; i++ ) {

                if ( G.d[G._n][G._t] >> ( 15 - i ) & 0x1 ) {

                    G.fn[i].style.visibility = '';

                    G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];

                } else {

                    G.fn[i].style.visibility = 'hidden';

                }

            }

        },

        event: function ( e, t ) {

            switch ( e.keyCode ) {

                case 37:

                    G.move( G.x + 1, G.y, G.t );

                    break;

                case 39:

                    G.move( G.x - 1, G.y, G.t );

                    break;

                case 38:

                    G.move( G.x, G.y, ( G.t + 1 ) % G.d[G.n].length );

                    break;

                case 40:

                    G.timeTesk();

                    break;

                case 32:

                    while ( G.timeTesk() );

            }

        }

    }  

</script>
<body onload='G.init();'>
    <div id='main'>
        <div id='body'>
        </div>
        <div id='score'>
        </div>
        <div id='level'>
        </div>
        <div id='next'>
        </div>
        <div id='ctrl'>
            <button onclick="javascript:location.href=location.href;">
                New</button>
            <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">
                Pause</button>
        </div>
    </GMain>
</body>
</html>
posted @ 2011-04-13 00:14  易独  阅读(200)  评论(0)  编辑  收藏  举报
乐巴儿 ∣一个有声音的公众号
长按，识别二维码，加关注