javascript实现小游戏俄罗斯方块

最新推荐文章于 2022-12-03 08:47:52 发布

大可&不必

最新推荐文章于 2022-12-03 08:47:52 发布

阅读量321

点赞数 1

分类专栏：原生javascript 文章标签： javascript实现小游戏俄罗斯方块

本文链接：https://blog.csdn.net/style201904/article/details/102959230

版权

原生javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

俄罗斯方块

style

 <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>

body

<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;">开始</button>
            <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">结束</button>
        </div>
    </div>
</body>

javascript

<script>
 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>

在这里插入图片描述

大可&不必

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript实现小游戏俄罗斯方块

俄罗斯方块style <style> div { display:block; background-color:black; position:absolute; font:17px Tahoma; color:#fff; } span { floa...
复制链接

扫一扫

专栏目录