javascript实现小游戏俄罗斯方块

矫情吗；* 2023-05-30 06:08 46阅读 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107172342825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关基于C#制作一个俄罗斯方块小游戏

俄罗斯方块一直以来都是备受欢迎的经典益智游戏，本文将向您介绍如何利用C#的强大功能和灵活性来设计和实现一个简单但有趣的俄罗斯方块游戏。

浅浅的花香味﹌/ 2024年04月22日 15:24/ 0 赞/ 59 阅读

相关俄罗斯方块游戏设计与实现（Python）

目录第一章绪论 1 1.1 任务概述 1 1.1.1 软件功能 1 1.1.2 运行环境 1 1.2 需求分析 3 1.2.1 游戏界面 3 1

╰+哭是因爲堅強的太久メ/ 2024年04月03日 11:58/ 0 赞/ 69 阅读

相关 javascript实现小游戏俄罗斯方块

俄罗斯方块 style <style> div { display:block; back

矫情吗；*/ 2023年05月30日 06:08/ 0 赞/ 47 阅读

相关 JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

原文：[JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码][JavaScript jQuery_Tetris] 源代码下载地址： [http://ww

ゝ一世哀愁。/ 2022年07月14日 15:30/ 0 赞/ 165 阅读

相关 java开发学习俄罗斯方块游戏

学习程序开发，编一个俄罗斯方块游戏很不错的选择，既可以练一下算法，又可以学习界面开发。 \------------------------------------------

忘是亡心i/ 2022年06月18日 01:15/ 0 赞/ 186 阅读

相关【C语言】之实现俄罗斯方块游戏

实现思路：关键点是使用闹钟信号，闹钟定时一段时间触发信号函数，在信号函数里对方块进行自动下落操作，而主线控制界面显示以及处理用户的输入。共有两个文件 `main.c

水深无声/ 2022年05月29日 09:59/ 0 赞/ 191 阅读

相关 javascript 俄罗斯方块(含完整游戏代码)

俄罗斯方块类以下代码包括了俄罗斯方块生成以及上下左右旋转的操作。完整代码在github上: [俄罗斯方块小游戏源码](https://github.c

冷不防/ 2022年05月23日 09:39/ 0 赞/ 342 阅读

相关 Python笔记：利用pygame库实现一个俄罗斯方块小游戏(转载)

import random,time,pygame,sys from pygame.locals import 导pygame内定义的一些常量 FPS=

落日映苍穹つ/ 2021年12月20日 01:11/ 0 赞/ 228 阅读

相关俄罗斯方块：Python实现

网上搜到一个Pygame写的俄罗斯方块（tetris），大部分看懂的前提下增加了注释，Fedora19下运行OK的主程序： coding:utf8 ! /

「爱情、让人受尽委屈。」/ 2021年12月14日 00:41/ 0 赞/ 251 阅读

相关用JavaScript写的俄罗斯方块小游戏（很简单，很详细）

效果 ![20210225210512263.gif][] 编写外部框架 <!DOCTYPE html> <html> <h

雨点打透心脏的1/2处/ 2021年07月25日 01:20/ 0 赞/ 514 阅读