js写的漂亮俄罗斯方块

最新推荐文章于 2023-07-30 00:53:11 发布
最新推荐文章于 2023-07-30 00:53:11 发布
阅读量1.9w 收藏 15
点赞数 8
分类专栏： javascript 文章标签： html5游戏 俄罗斯方块 js游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx101q/article/details/78876902
版权

先看演示地址俄罗斯方块

再看截图

下面将代码贴出来以供大家学习探索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=540,user-scalable=no,target-densitydpi=high-dpi">
    <title>俄罗斯方块</title>

    <script type="text/javascript">
        var zt = false;
        (function () {


            var updatemovie = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
            var can;
            var paint;
            var xch = 0;
            var jsq = 0;
            var fktype;
            var fkstate;
            var score = 0;
            var speed = 1;
            var x;
            var W = 30;
            var y;
            var time = 0;
            var j = 0;
            var flag = 0;
            var zm = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            var tx = zm[0];
            var keycom = {"38": "turn()", "40": "down()", "37": "left()", "39": "right()"};
            var map = new Array2(13, 23, 0);//背景
            var shapes = [
                // i
                [[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
                    [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0]],
                // s
                [[0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0]],
                // z
                [[1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]],
                // j
                [[0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // o
                [[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // l
                [[1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // t
                [[0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0]]
//                ,
//
//                [[0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
//                    [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
//                    [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
//                    [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0]]
            ];

            function getT() {
                tx = zm[rmInt(26)];

            }

            function drawwall() {
                for (var i = 0; i < 12; i++) {
                    map[i][21] = 2;
                }
                for (var j = 0; j < 22; j++) {
                    map[11][j] = 2;
                    map[0][j] = 2;
                }
            }

            function makefk() {
                fktype = rmInt(7)
                fkstate = rmInt(4)
                x = W;
                y = 0;
                getT();
                if (gameover(x, y) == 1) {
                    alert("came over!");
                    newmap();
                    drawwall();
                    score = 0;

                }
            }

            function newmap() {
                for (var i = 0; i < 12; i++) {
                    for (var j = 0; j < 22; j++) {
                        map[i][j] = 0;
                    }
                }
            }

            function turn() {
                var tempturnState = fkstate;
                fkstate = (fkstate + 1) % 4;
                mplay('xz');
                if (blow(x, y, fktype, fkstate) == 1) {

                }
                if (blow(x, y, fktype, fkstate) == 0) {
                    fkstate = tempturnState;

                }
            }

            function left() {
                if (blow(x - 1 * W, y, fktype, fkstate) == 1) {
                    x = x - 1 * W;
                    mplay('mv');
                }

            }

            // 右移的方法
            function right() {
                if (blow(x + 1 * W, y, fktype, fkstate) == 1) {
                    x = x + 1 * W;
                    mplay('mv');
                }

            }

            // 下落的方法
            function down() {
                if (blow(x, y + 1 * W, fktype, fkstate) == 1) {
                    y = y + 1 * W;
                    delline();
                }

                if (blow(x, y + 1 * W, fktype, fkstate) == 0) {
                    add(x, y, fktype, fkstate);
                    makefk();
                    delline();
                }

            }

            // 是否合法的方法
            function blow(x, y, blockType, turnState) {
                for (var a = 0; a < 4; a++) {
                    for (var b = 0; b < 4; b++) {
                        if (((shapes[blockType][turnState][a * 4 + b] == 1) && (map[Math.floor(x / W)
                                + b + 1][Math.floor(y / W) + a] == 1))
                                || ((shapes[blockType][turnState][a * 4 + b] == 1) && (map[Math.floor(x / W)
                                + b + 1][Math.floor(y / W) + a] == 2))) {

                            return 0;
                        }
                    }
                }
                return 1;
            }

            // 消行的方法
            function delline() {
                var c = 0;
                for (var b = 0; b < 22; b++) {
                    for (var a = 0; a < 12; a++) {
                        if (map[a][b] == 1) {

                            c = c + 1;
                            if (c == 10) {
                                xch = b;
                                score += 10;
                                mplay('xc');

                            }
                        }
                    }

                    c = 0;
                }
            }

            // 判断你挂的方法
            function gameover(x, y) {
                if (blow(x, y, fktype, fkstate) == 0) {
                    return 1;
                }
                return 0;
            }

            // 把当前添加map
            function add(x, y, blockType, turnState) {
                var j = 0;
                for (var a = 0; a < 4; a++) {
                    for (var b = 0; b < 4; b++) {
                        if (map[Math.floor(x / W) + b + 1][Math.floor(y / W) + a] == 0) {
                            map[Math.floor(x / W) + b + 1][Math.floor(y / W) + a] = shapes[blockType][turnState][j];
                        }
                        ;
                        j++;
                    }
                }
            }

            function getscore() {
                return score;
            }

            // 画方块的的方法
            function Paint(g) {
                g.fillStyle = "snow";
                g.font = "italic small-caps bold 50px Arial";
                g.fillText("分数______", 500, 100);
                g.fillText(getscore(), 650, 100);
                g.fillText("所学字母______", 500, 200);
                g.font = "italic small-caps bold 20px Arial";
                g.fillText("玩法说明：←向左移动，→向右移动，↑变幻形状", 500, 350);
                g.fillText('↓加速下落，横向满格消除,加十分', 500, 400);
                g.fillStyle = "gold";
                g.font = "italic small-caps bold 100px Arial";
                g.fillText(tx, 750, 200);
                // 画当前方块
                for (var j = 0; j < 16; j++) {
                    if (shapes[fktype][fkstate][j] == 1) {

                        var grd = g.createRadialGradient((j % 4 + Int(x / W) + 1) * W, (Int(j / 4) + Int(y / W)) * W, 2, (j % 4 + Int(x / W) + 1) * W + 20, (Int(j / 4) + Int(y / W)) * W + 20, 40);
                        grd.addColorStop(0, "pink");
                        grd.addColorStop(0.6, "red");
                        grd.addColorStop(0.7, "pink");
                        grd.addColorStop(1, "white");
                        g.fillStyle = grd;
                        g.fillRect((j % 4 + Int(x / W) + 1) * W, (Int(j / 4) + Int(y / W)) * W, W - 1, W - 1);
                        g.fillStyle = "snow";
                        g.font = "26px Arial";
                        g.fillText(tx, (j % 4 + Int(x / W) + 1) * W + 5, (Int(j / 4) + Int(y / W)) * W + 23);

                    }


                }

                // 画已经固定的方块

                for (var j = 0; j < 22; j++) {
                    for (var i = 0; i < 12; i++) {
                        if (map[i][j] == 1) {

                            if (xch != 0 && j == xch) {
                                var grd = g.createRadialGradient(i * W, j * W, 2, i * W + 20, j * W + 20, 40);
                                grd.addColorStop(0, "gold");
                                grd.addColorStop(0.3, "red");
                                grd.addColorStop(0.6, "gold");
                                grd.addColorStop(1, "yellow");
                                g.fillStyle = grd;
                                g.fillRect(i * W, j * W, W - 1, W - 1);
                                jsq++;
                                if (jsq > 300) {
                                    for (var d = xch; d > 0; d--) {
                                        for (var e = 0; e < 11; e++) {
                                            map[e][d] = map[e][d - 1];

                                        }
                                    }
                                    xch = 0;
                                    jsq = 0;

                                }

                            } else {
                                var grd = g.createRadialGradient(i * W, j * W, 2, i * W + 20, j * W + 20, 40);
                                grd.addColorStop(0, "gold");
                                grd.addColorStop(0.3, "yellow");
                                grd.addColorStop(0.6, "red");
                                grd.addColorStop(1, "white");
                                g.fillStyle = grd;
                                g.fillRect(i * W, j * W, W - 1, W - 1);


                            }

                            g.fillStyle = "snow";
                            g.font = "italic small-caps bold 26px Arial";
                            g.fillText(tx, i * W + 3, j * W + 24);


                        }
                        if (map[i][j] == 2) {

                            var grd = g.createRadialGradient(i * W + 20, j * W, 2, i * W + 40, j * W + 20, 40);
                            grd.addColorStop(0, "red");
                            grd.addColorStop(0.3, "yellow");
                            grd.addColorStop(0.5, "orange");
                            grd.addColorStop(1, "white");
                            g.fillStyle = grd;
                            g.beginPath();
                            g.arc(i * W + 20, j * W, 20, (0 * Math.PI) / 180, (360 * Math.PI) / 180, true);
                            g.fill();


                        }
                    }
                }

            }

            function update() {
                drawmain();
                time += speed;
                if (time % 35 == 0) {

                    jt();
          if(time>1000){ time=0;}
                }

                updatemovie(update);
            }

            function drawmain() {
                if (null != paint) {
                    paint.clearRect(0, 0, 1000, 850);
                    paint.strokeStyle = "pink"

                    Paint(paint);
                }
            }

            function init() {
                can = document.getElementById("canvas");
                paint = can.getContext("2d");
                score = 0;
                addmusic('xc', './mic/xc.wav', false);
                addmusic('xz', './mic/xz2.mp3', false);
                addmusic('mv', './mic/xz1.wav', false);
                addmusic('bg', './mic/woniu.mp3', true);
                addmusic('yw', './mic/yw.mp3', false);
                makefk();
                newmap();
                drawwall();
                mplay('bg');
            }

            onload = function () {
                init();
                update();

            }

            function jt() {
                if (!zt) {

                    if (blow(x, y + W, fktype, fkstate) == 1) {
                        y = y + W;
                        delline();
                    }
                    ;
                    if (blow(x, y + W, fktype, fkstate) == 0) {

                        if (flag == 1) {
                            add(x, y, fktype, fkstate);
                            delline();
                            makefk();
                            flag = 0;
                        }
                        flag = 1;
                    }
                }
            }

            document.onkeydown = function (e) {
                eval(keycom[(e ? e : event).keyCode]);

            };


        })()

        function Array2(a, b, m) {
            console.log('d');
            var k = [];
            k.length = a;
            for (var i = 0; i < a; i++) {
                k[i] = new Array();
                k[i].length = b;
            }
            if (null != m) {
                for (var k2 = 0; k2 < a; k2++) {
                    for (var p = 0; p < b; p++) {
                        k[k2][p] = m;
                    }
                }
            }
            return k;
        }


        function rmInt(a) {
            return Math.floor(Math.random() * a);
        }
        function Int(a) {
            return Math.floor(a);

        }
        function getRandomColor() {
            var c = '#';
            var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
            for (var i = 0; i < 6; i++) {
                var cIndex = Math.round(Math.random() * 15);
                c += cArray[cIndex];
            }
            return c;
        }

        function addmusic(nam, src, loop) {
            var music = document.createElement("audio");

            if (loop) {
                var str = '<audio id="' + nam + '"   controls="controls" style="display: none"  loop="loop"  src="' + src + '" type="audio/mpeg"></audio>';
                music.innerHTML = str;

                document.body.appendChild(music);
            } else {

                var str = '<audio id="' + nam + '"  controls="controls" style="display: none"   src="' + src + '" type="audio/mpeg"></audio>';
                music.innerHTML = str;

                document.body.appendChild(music);

            }
        }

        function mplay(name) {

            var music = document.getElementById(name);
            // document.getElementById(name).play();

            if (music != null) {
                try {
                    document.getElementById(name).play();

                } catch (err) {

                    console.log("音乐加载错误");
                }

            }
        }

        function mstop(name) {

            var music = document.getElementById(name);


            if (music != null) {
                try {
                    document.getElementById(name).pause();

                } catch (err) {

                    console.log("音乐加载错误");
                }

            }
        }


    </script>
</head>
<body style="text-align: center;overflow-y: hidden">
<div style="border-radius: 100px;background-color: greenyellow">
    <button id="bt"
            style="color:green;font-size:30px;position:absolute;left:720px;top:260px;z-index: 50;width: 100px;height: 50px;border: 0;background-color: gold;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
            οnclick="javascript:var val=document.getElementById('bt').innerText;zt=(zt==false)? true:false;document.getElementById('bt').innerText=(document.getElementById('bt').innerText=='暂停')? '开始':'暂停'">
        暂停
    </button>
    <button id="bt1"
            style="color:green;font-size:30px;position:absolute;left:920px;top:260px;z-index: 50;width: 100px;height: 50px;border: 0;background-color: gold;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
            οnclick="javascript:window.location.reload();">重玩
    </button>
    <button id="bt2"
            style="color:green;font-size:30px;position:absolute;left:770px;top:450px;z-index: 50;width: 200px;height: 50px;border: 0;background-color: #ff5f5d;border-radius: 20px"
            οnclick="javascript:mplay('yw');">跟我读字母
    </button>


    <canvas id="canvas" width="1000" height="850"
            style="background-color:rgba(109, 116, 77, 0.74);border-radius: 50px"></canvas>
</div>
</body>

</html>



101tx
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)
2401_84166376的博客
05-02 1002
(4) 玩家可以看到游戏的积分。本文开发俄罗斯方块游戏程序，俄罗斯方块游戏的运行界面如上图所示。
JS Game发布：JavaScript漂亮俄罗斯方块
无心的专栏
07-22 5757
俄罗斯方块，地球人都知道。 网上流传的js俄罗斯方块也是多的像米，各有各的不方便，我这里代码全部自己书写，不参考任何现有俄罗斯方块游戏代码，功能及界面上博采众长，力争将我的Js俄罗斯方块做到脱颖而出。当然离尽善尽美还很远，但敢说比我见到过的所有js俄罗斯方块都要好（好玩、好看），如果你有看到更好的，请告诉我。 特点：1、按键反应灵敏（摒弃了onkeydown的系统自动repea
h5星球大战游戏源码
11-18
h5星球大战游戏源码，自己整理，亲测可用，仅供观赏与学习
❤️创意网页：贪吃蛇游戏 - 创造一个经典的小游戏
VLOKL的博客
07-30 795
❤️创意网页：贪吃蛇游戏 - 创造一个经典的小游戏
JavaScript实现俄罗斯方块
竹杖芒鞋轻胜马
07-19 1407
网页版俄罗斯方块欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mark...
C语言在VS2017环境下写俄罗斯方块的感悟
weixin_34306676的博客
06-07 227
2019独角兽企业重金招聘Python工程师标准>>> ...
趣味俄罗斯方块
m0_48387886的博客
06-07 1546
/定义全局变量*/ int i,j,Temp,Temp1,Temp2; //temp,temp1,temp2用于记住和转换方块变量的值 //标记游戏屏幕的图案：2，1，0分别表示该位置为游戏边框、方块、无图案;初始化为无图案 int a[80][80]={0}; int b4; //标记4个“口 ”方块，1表示有方块，0表示无方块 struct Tetris //声明俄罗斯方块的结构体 { int x; //中心方块的 x轴坐标 int y;
C语言开发的俄罗斯方块调试完
weixin_34067049的博客
09-26 70
C语言让人苦恼的地方是枯燥的控制台黑窗口程序和漂亮的图形化程序开发起来偏差的太大。导致很多学C语言的朋友学了许久许久还在和控制台打交道，图形化的程序始终上不了手，即使拷贝了一段代码，但是看着开发起来和曾经的学习是那么的格格不入和想不通。这里试着从一条新的途径，把枯燥的控制台程序逐渐引向漂亮的图形化。让学C语言时候，不再枯燥，不再“和实际脱节”。有了黑窗口的基础，有了图形化的世...
[LxcJie原创]JS写的俄罗斯方块
LxcJie的专栏
07-06 1504
前段时间研究了一下prototype.js的源代码，感觉真是一个漂亮的东东，于是在她的基础上写了这个俄罗斯，还有很多bug，望大家指正。〉〉〉〉〉〉〉〉2007.07.12改版，支持IE，FF，NS要运行，需要注意下面这一点：因为是基于prototype.js的脚本，所以prototype.js是必须的，大家可以到下面的链接去下载http://www.prototypejs.org
C语言编程学习开发的俄罗斯方块小游戏
debet2014的博客
06-10 322
C语言是面向过程的，而C＋＋是面向对象的 C和C++的区别： C是一个结构化语言，它的重点在于算法和数据结构。C程序的设计首要考虑的是如何通过一个过程，对输入（或环境条件）进行运算处理得到输出（或实现过程（事务）控制）。 C++，首要考虑的是如何构造一个对象模型，让这个模型能够契合与之对应的问题域，这样就可以通过获取对象的状态信息得到输出或实现过程（事务）控制。 所以C与C++的最...
用JavaScript写的俄罗斯方块小游戏
02-25
【JavaScript实现俄罗斯方块小游戏详解】 俄罗斯方块是一款经典的电子游戏，它的基本原理是通过不同形状的方块从屏幕顶部下落，玩家需要通过旋转和移动这些方块使其在底部排列完整，消除整行以获得分数。在这个用...
c语言Turbo C下写的俄罗斯方块
最新发布
09-21
c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯方块 c语言Turbo C下写的俄罗斯...
原生JS写俄罗斯方块简单版
03-24
【原生JS写俄罗斯方块简单版】是一个利用JavaScript实现的经典小游戏，主要涉及以下几个关键知识点： 1. **JavaScript基础**：整个游戏的核心是JavaScript代码，它负责游戏逻辑、动画效果和用户交互。开发者需要...
原生js写俄罗斯方块
01-08
首先，我们要理解【标题】中的关键点：“原生js写俄罗斯方块”。这意味着我们将使用纯JavaScript（不依赖任何库或框架）来编写游戏的核心逻辑。这通常涉及到事件监听、DOM操作、计时器、数组操作等技术。 在【描述...
JavaScript写的俄罗斯方块小游戏.zip
06-12
JavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏...
基于java的俄罗斯方块游戏系统设计与实现(项目报告+答辩PPT+源代码+数据库+截图+部署视频)
woaimx_1314的博客
05-22 9208
软件工程是一门研究用工程化方法构建和维护有效的，实用的和高质量的软件的学科；设计包括程序设计语言，数据库，算法，软件开发工具，系统平台，设计模式等很多方面；在现代社会中，软件应用于电子邮件，嵌入式系统，人机交互界面，办公套件，操作系统，编辑器，数据库，游戏等多个典型方面；同时，在如今社会的各式各样的行业中都有计算机软件的应用，包括工业，农业，银行，航空，政府部门等等，能有效的促进经济和社会的发展，提高人们的工作效率和生活效率。
html5可视化图形编辑器(基于canvas)
热门推荐
101tx的博客
10-28 4万+
我以前特别喜欢flash，不过flash水平一般，那是的我并不是程序员，充其量也就是个爱好者，在这个html5的时代中，我依旧对那个有时间轴的flash编辑界面念念不忘。于是便有了这篇文章。我的目标是做一款在线的图片，文档，动画，游戏生成器。目标比较大（个人比较贪），目前只实现了一部分，但是我相信时间能缔造一切，也希望大神们多多帮忙，谢谢了！我把所有的代码写上来，一是帮我记录开发过程，二是供大家查
websocket大文件发送（分片传送思想）
101tx的博客
11-05 4155
目前的项目是在做一款带桌面共享的代码编辑器，其中需要一个发送大文件的功能，传统的node.js处理大文件就是用Buffer.slice(0.offset)的思路把文件分割开，然后通过tcp或udp分开发送。前端中处理二进制的有Blob,它也有slice的方法，也可以将文件拆分开。然后借助websocket发开发送，然后在客户端（注意不是服务端）将文件合并。有人说websocket可以直接发，但是他的大小受到限制，比如发200M的东西，就会出问题。而我的方案就不会存在问题.最主要的是在发送文件的同时也不会影响
用javascript写个俄罗斯方块
08-10
可以使用JavaScript来编写俄罗斯方块游戏。首先，需要使用canvas元素在网页上绘制游戏界面。然后，使用JavaScript编写游戏的逻辑，包括方块的下落、旋转、移动等操作。最后，可以使用setInterval()函数让方块定时下落，并使用监听键盘事件的方式实现玩家对方块的操作。 以下是一个简单的例子： ```javascript // 创建canvas元素 var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); // 定义方块数组 var blocks = [[1, 1, 1, 1], [1, 1, 1, 0], [1, 1, 1, 0], [0, 1, 0, 0]]; // 定义方块的位置和颜色 var x = 0, y = 0; var color = 'red'; // 绘制方块 function drawBlock() { ctx.fillStyle = color; for (var i = 0; i < blocks.length; i++) { for (var j = 0; j < blocks[i].length; j++) { if (blocks[i][j]) { ctx.fillRect(x + j * 20, y + i * 20, 20, 20); } } } } // 下落函数 function moveDown() { y += 20; drawBlock(); } // 启动定时器 setInterval(moveDown, 1000); ``` 这只是一个简单的例子,更完整的实现还需要继续添加游戏规则，如游戏结束条件、得分计算等，还有更多的交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值