用JS实现的俄罗斯方块

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS实现的俄罗斯方块相关的知识,希望对你有一定的参考价值。

一边练习一下javascript,一边搞的稍微有趣一点。
这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。
完整代码如下,预先显示下一个方块的功能没做。Game Over也没有写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>俄罗斯方块</title>
    <style>
        p.tips {margin-top: 20px; text-align: center;}
        table#gameUI {margin: 30px auto;}
        td {width: 20px; height: 20px; border: 1px solid red;}
        td.wall {background-color: red;}
    </style>
</head>
<body>
<p class="tips">按回车开始游戏</p>
<table id="gameUI"></table>
</body>
<script>
    // 参数设置
    var rows = 22, cells = 14;  // 界面的高度和宽度
    // 获取元素
    var tab = document.getElementById(‘gameUI‘);
    var tips = document.getElementsByClassName(‘tips‘)[0];
    // 设置变量
    var control;  // 当前控制的方块
    var score = 0;  // 分数
    var scoreConf = [100, 200, 300, 350];  // 一次小几行,分数不同
    init();

    function init() {
        // 为了页面时的初始化
        createTab();
        bindKeyEnter();
        // gameStart()
    }

    function bindKeyEnter() {
        // 按下回车处理的事件
        document.onkeydown = function (ev) {
            if (ev.keyCode===13){
                tips.innerHTML =‘游戏开始‘;
                document.onkeydown = null;
                gameStart();
            }
        }
    }

    function gameStart() {
        // 开始游戏
        bindKeysForGame();
        tips.innerHTML = ‘按 Z 或 X 旋转方块‘;
        control = createSqu();
        control.position = [1, 4];  // 添加blocks[0]的位置属性
        map(control);
        setInterval("move(‘down‘)", 500)
    }

    function createSqu() {
        // 创建一个方块
        var types = [
            {‘name‘: "方块", ‘color‘: ‘saddlebrown‘, ‘blocks‘: [[0, 0], [0, 1], [1, 0], [1, 1]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [1, 0], [1, 1]]
                ]},
            {‘name‘: "7形", ‘color‘: ‘green‘, ‘blocks‘: [[0, 0], [0, 1], [1, 1], [2, 1]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [1, 1], [2, 1]],
                    [[1, 0], [1, 1], [1, 2], [0, 2]],
                    [[0, 0], [1, 0], [2, 0], [2, 1]],
                    [[0, 0], [1, 0], [0, 1], [0, 2]]
                ]},
            {‘name‘: "反7", ‘color‘: ‘green‘, ‘blocks‘: [[0, 0], [0, 1], [1, 0], [2, 0]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [1, 0], [2, 0]],
                    [[0, 0], [0, 1], [0, 2], [1, 2]],
                    [[0, 1], [1, 1], [2, 0], [2, 1]],
                    [[0, 0], [1, 0], [1, 1], [1, 2]]
                ]},
            {‘name‘: "长条", ‘color‘: ‘darkorange‘, ‘blocks‘: [[0, 0], [0, 1], [0, 2], [0, 3]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [0, 2], [0, 3]],
                    [[0, 0], [1, 0], [2, 0], [3, 0]]
                ]},
            {‘name‘: "丁字", ‘color‘: ‘blue‘, ‘blocks‘: [[0, 0], [0, 1], [1, 1], [0, 2]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [1, 1], [0, 2]],
                    [[1, 0], [0, 1], [1, 1], [2, 1]],
                    [[1, 0], [1, 1], [0, 1], [1, 2]],
                    [[0, 0], [1, 0], [1, 1], [2, 0]]
                ]},
            {‘name‘: "Z字", ‘color‘: ‘gold‘, ‘blocks‘: [[0, 0], [0, 1], [1, 1], [1, 2]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[0, 0], [0, 1], [1, 1], [1, 2]],
                    [[0, 1], [1, 0], [1, 1], [2, 0]]
                ]},
            {‘name‘: "反Z", ‘color‘: ‘gold‘, ‘blocks‘: [[1, 0], [1, 1], [0, 1], [0, 2]],
                ‘styleIndex‘: 0, ‘styles‘: [
                    [[1, 0], [1, 1], [0, 1], [0, 2]],
                    [[0, 0], [1, 0], [1, 1], [2, 1]]
                ]}
        ];
        var index = Math.floor(Math.random()*types.length+1);
        return types[index-1]
    }

    function map(square) {
        // 把方块画在表格里
        var rubber = arguments[1] ? arguments[1] : false;
        for (var i=0; i<square.blocks.length; i++) {
            var cell = tab.rows[square.blocks[i][0]+square.position[0]].cells[square.blocks[i][1]+square.position[1]];
            if (rubber){
                cell.style.backgroundColor = ‘‘;
                cell.classList.remove(‘control‘)
            } else {
                cell.style.backgroundColor = square.color;
                cell.classList.add(‘control‘)
            }
        }
    }

    function fixed(square){
        // 固定方块
        for (var i=0; i<square.blocks.length; i++) {
            var cell = tab.rows[square.blocks[i][0]+square.position[0]].cells[square.blocks[i][1]+square.position[1]];
            cell.classList.remove(‘control‘);
            cell.classList.add(‘fixed‘)
        }
    }

    function bindKeysForGame() {
        // 游戏时候需要绑定的按键
        document.onkeydown = function (ev) {
            switch (ev.keyCode) {
                case 37:  // 向左
                    move(‘left‘);
                    break;
                case 38:  // 向上
                    // move(‘up‘);
                    change();
                    break;
                case 39:  // 向右
                    move(‘right‘);
                    break;
                case 40:  // 向下
                    move(‘down‘);
                    break;
                case 90:  // 字母Z
                    change(true);
                    break;
                case 88:  // 字母X
                    change();
                    break;
                // default:
                //     tips.innerHTML = ev.keyCode;
            }
        }
    }

    function change() {
        // 改变形状
        var contrarotate = arguments[0] ? arguments[0] : false;
        if (contrarotate) {
            control.styleIndex -= 1;
            if (control.styleIndex < 0) {
                control.styleIndex = control.styles.length-1;
            }
        } else {
            control.styleIndex += 1;
            if (control.styleIndex > control.styles.length-1){
                control.styleIndex = 0;
            }
        }
        var target = [[0,0],[0,0],[0,0],[0,0]];
        for (var i=0; i<control.styles[control.styleIndex].length; i++){
            target[i][0] = control.styles[control.styleIndex][i][0]+control.position[0];
            target[i][1] = control.styles[control.styleIndex][i][1]+control.position[1];
        }
        if (canMove(target)){
            map(control, true);
            for (var j=0; j<control.blocks.length; j++){
                control.blocks[j][0] = control.styles[control.styleIndex][j][0];
                control.blocks[j][1] = control.styles[control.styleIndex][j][1];
            }
            map(control)
        }
    }

    function move(mode) {
        var row, cell;
        switch (mode){
            case ‘left‘:
                row = 0;
                cell = -1;
                break;
            case ‘right‘:
                row = 0;
                cell = 1;
                break;
            case ‘up‘:
                row = -1;
                cell = 0;
                break;
            case ‘down‘:
                row = 1;
                cell = 0;
                break;
        }
        var target = [[0,0],[0,0],[0,0],[0,0]];
        for (var i=0; i<control.blocks.length; i++){
            target[i][0] = control.blocks[i][0]+control.position[0]+row;
            target[i][1] = control.blocks[i][1]+control.position[1]+cell;
        }
        if (canMove(target)){
            map(control, true);
            control.position[0] += row;
            control.position[1] += cell;
            map(control)
        } else {
            if (mode===‘down‘) {
                //  向下移动,并且判定为不可移动,则固定
                fixed(control);  // 固定住方块
                checkAndClean(control);  // 检查消行
                control = createSqu();
                control.position = [1, 4];  // 添加blocks[0]的位置属性
                map(control);
            }
        }
    }

    function checkAndClean(square) {
        // 检查并消除
        var checked = [];
        var cleaned = [];
        var row;
        for (var i=0; i<square.blocks.length; i++){
            row = square.blocks[i][0] + square.position[0];
            if (checked.indexOf(row) === -1){
                checked.push(row);
                var needClean = true;
                for (var j=1; j<cells-1; j++ ) {
                    var cell = tab.rows[row].cells[j];
                    if(cell.className.search(/(fixed)/) === -1){
                        needClean = false;
                        break;
                    }
                }
                if (needClean) {
                    // 消除一行
                    cleaned.push(row);
                    for (var k=1; k<cells-1; k++) {
                        cell = tab.rows[row].cells[k];
                        cell.classList.remove(‘fixed‘);
                        cell.style.backgroundColor = ‘‘;
                    }
                }
            }
        }
        cleaned.length && addScore(cleaned.length) && goDown(cleaned);  // 结算分数,然后下沉
    }

    function addScore(n) {
        n = n<=scoreConf.length ? n : scoreConf[scoreConf.length-1];
        score += scoreConf[n-1];
        tips.innerHTML = "分数:" + score;
        return true
    }

    function goDown(list) {
        // 消行后的沉降
        var count = 0;
        for (var i=list.length; i--;){
            for (var r=list[i]-1; r--;){
                tab.rows[r+2+count].innerHTML = tab.rows[r+1+count].innerHTML
            }
            count += 1;
        }
    }

    function canMove(target) {
        // 是否可以移动
        for (var j=0; j<target.length; j++){
            var cell = tab.rows[target[j][0]].cells[target[j][1]];
            if(cell.className.search(/(wall|fixed)/) > -1){
                return false
            }
        }
        return true
    }

    function createTab() {
        // 绘制游戏界面
        for (var r=rows; r--;){
            var row = tab.insertRow();
            for (var c=cells; c--;){
                var cell = row.insertCell();
                if (r===0 || r===rows-1 || c===0 || c===cells-1){
                    cell.classList.add(‘wall‘);
                }
            }
        }
    }

</script>
</html>

以上是关于用JS实现的俄罗斯方块的主要内容,如果未能解决你的问题,请参考以下文章

《JavaScript100例|01》之javaScript实现俄罗斯方块,唤起了女朋友儿时的回忆!

js实现一款俄罗斯方块

俄罗斯方块

C# 俄罗斯方块源代码

俄罗斯方块游戏自动机

js 实现俄罗斯方块