js写的漂亮俄罗斯方块

先看演示地址俄罗斯方块

再看截图

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

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



  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值