在好例子网，分享、交流、成长！
您当前所在位置：首页 → Others 开发实例 → 一般编程问题 → js俄罗斯方块 小游戏源码

js俄罗斯方块 小游戏源码

一般编程问题

下载此实例
  • 开发语言：Others
  • 实例大小：0.02M
  • 下载次数：18
  • 浏览次数：140
  • 发布时间：2020-08-23
  • 实例类别：一般编程问题
  • 发 布 人：dfh
  • 文件格式：.html
  • 所需积分：0
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】记事本小游戏，

【实例截图】

from clipboard

【核心代码】<!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>


标签： 俄罗斯方块 俄罗斯 小游戏 记事本 游戏

实例下载地址

js俄罗斯方块 小游戏源码

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警