d3.js 制作简单的俄罗斯方块

d3.js是一个不错的可视化框架，同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块。话不多说先上图片。

1. js tetris类

由于方法拆分的比较细所以加上了一些备注（这不是我的风格！）

const graphMap = [
    {
        name: '倒梯形',
        position: [[0,4],[1,3],[1,4],[1,5]],
        rotate: [[[0,0],[-2,0],[-1,-1],[0,-2]],[[1,0],[1,2],[0,1],[-1,0]],[[-1,0],[1,0],[0,1],[-1,2]],[[0,0],[0,-2],[1,-1],[2,0]]],
        color: '#D7DF01'
    },
    {
        name: '一字型',
        position: [[0,3],[0,4],[0,5],[0,6]],
        rotate: [[[-1,1],[0,0],[1,-1],[2,-2]],[[1,2],[0,1],[-1,0],[-2,-1]],[[2,-2],[1,-1],[0,0],[-1,1]],[[-2,-1],[-1,0],[0,1],[1,2]]],
        color: '#0000FF'
    },
    {
        name: '正方形',
        position: [[0,4],[0,5],[1,4],[1,5]],
        rotate: [[[0,0],[0,0],[0,0],[0,0]],[[0,0],[0,0],[0,0],[0,0]],[[0,0],[0,0],[0,0],[0,0]],[[0,0],[0,0],[0,0],[0,0]]],
        color: '#FF0000'
    },
    {
        name: 'Z字型',
        position: [[0,3],[0,4],[1,4],[1,5]],
        rotate: [[[0,1],[1,0],[0,-1],[1,-2]],[[1,1],[0,0],[-1,1],[-2,0]],[[1,-2],[0,-1],[1,0],[0,1]],[[-2,0],[-1,1],[0,0],[1,1]]],
        color: '#800080'
    },
    {
        name: '反Z字型',
        position: [[1,3],[1,4],[0,4],[0,5]],
        rotate: [[[-1,1],[0,0],[1,1],[2,0]],[[0,1],[-1,0],[0,-1],[-1,-2]],[[2,0],[1,1],[0,0],[-1,1]],[[-1,-2],[0,-1],[-1,0],[0,1]]],
        color: '#FFA500'
    },
    {
        name: 'L字型',
        position: [[1,3],[0,3],[0,4],[0,5]],
        rotate: [[[-1,1],[0,2],[1,1],[2,0]],[[0,1],[1,0],[0,-1],[-1,-2]],[[1,-1],[0,-2],[-1,-1],[-2,0]],[[0,-1],[-1,0],[0,1],[1,2]]],
        color: '#90EE90'
    },
    {
        name: '反L字型',
        position: [[0,3],[0,4],[0,5],[1,5]],
        rotate: [[[-1,2],[0,1],[1,0],[0,-1]],[[2,0],[1,-1],[0,-2],[-1,-1]],[[1,-2],[0,-1],[-1,0],[0,1]],[[-2,0],[-1,1],[0,2],[1,1]]],
        color: '#AEEBFF'
    }
]
class Tetris {
    constructor() {
        this._grid = [];
        this._rows = 18;
        this._cols = 10;
        this._div = 33;
        this._nextDiv = 15;
        this._duration = 1000;
        this._width = this._div * this._cols;
        this._height = this._div * this._rows;
        this._svg = null;
        this._nextSvg = null;
        this._timeout = null;
        this._time = null;
        this._showGrid = false;
        this._haveArray = [];
        this._curtArray = [];
        this._colors = '';
        this._rotateIndex = 0;
        this._rotateArray = [];
        this._fixedColor = '#666';
        this._nextNumber = 0;
        this._graphMap = graphMap;
        this._level = 1;
        this._levelLimit = [0,20,50,90,140,200,270,350,440,540,650,770,900,1040,1190,1350,1520];
        this._score = 0;
        this._timeNumber = 0;
        this.initSvg();
        this.initNextSvg();
        this.addKeyListener();
    }
    initSvg() {
        this._svg = d3.select('.svg-container')
            .append('svg')
            .attr('width', this._width)
            .attr('height', this._height)
            .attr('transform', 'translate(0, 4)')
    }
    initNextSvg() {
        this._nextSvg = d3.select('.next')
        .append('svg')
        .attr('width', 100)
        .attr('height', 60)
    }
    toggleGrid() {
        if(this._showGrid) {
            this._showGrid = false;
            d3.select('g.grid').remove();
        } else {
            this._showGrid = true;
            this._grid = this._svg.append('g')
            .attr('class', 'grid')
            this._grid.selectAll('line.row')
            .data(d3.range(this._rows))
            .enter()
            .append('line')
            .attr('class', 'row')
            .attr('x1', 0)
            .attr('y1', d => d * this._div)
            .attr('x2', this._width)
            .attr('y2', d => d * this._div)
            this._grid.selectAll('line.col')
            .data(d3.range(this._cols))
            .enter()
            .append('line')
            .attr('class', 'col')
            .attr('x1', d => d * this._div)
            .attr('y1', 0)
            .attr('x2', d => d * this._div)
            .attr('y2', this._height)
        }
    }
    addKeyListener() {
        d3.select('body').on('keydown', () => {
            switch (d3.event.keyCode) {
                case 37:
                    this.goLeft();
                break;
                case 38:
                    this.rotate();
                    break;
                case 39:
                    this.goRight();
                    break;
                case 40:
                    this.goDown();
                    break;
                case 32:
                    console.log('空格');
                    break;
                case 80:
                    console.log('暂停');
                    break;
                default:
                    break;
            }
        })
    }
    //设置运动图形 如果仍有掉落空间则继续掉落 反之调用setHaveArray
    initGraph() {
        this.renderGraph();
        this._timeout = setTimeout(() => {
            if(this.canDown()) {
                this.downArray();
                this.initGraph();
            } else {
                this.setHaveArray();
                if(!this.gameOver()) {
                    this.randomData();
                    this.nextGraphNumber();
                    this.initGraph();
                } else {
                    clearTimeout(this._time);
                    d3.select('#modal').style('top', '0px')
                }
            }
        }, this._duration * (1 - ((this._level - 1) / this._levelLimit.length) / 2))
    }
    //渲染图形
    renderGraph() {
        this._svg.selectAll('rect.active').remove();
        this._svg.selectAll('rect.active')
        .data(this._curtArray)
        .enter()
        .append('rect')
        .attr('class', 'active')
        .attr('x', d => this._div * d[1] + 1)
        .attr('y', d => this._div * d[0] + 1)
        .attr('width', this._div - 3)
        .attr('height', this._div - 3)
        .attr('stroke', this._color)
        .attr('stroke-width', 2)
        .attr('fill', this._color)
        .attr('fill-opacity', 0.5)
    }
    //设置掉落后的数组，并清除运动的图形 重置状态
    setHaveArray() {
        this._curtArray.forEach(d => this._haveArray.push(d));
        this._svg.selectAll('rect.active').attr('class', 'fixed').attr('fill', this._fixedColor).attr('fill-opacity', 0.5).attr('stroke', this._fixedColor);
        this._rotateIndex = 0;
        this.clearLines();
    }
    //检测有满列 然后消除
    clearLines() {
        let clearLinesArr = [];
        let allRowsObj = {};
        let temp = [];
        let arr = this._haveArray.map(d => d[0]);
        arr.forEach(d => {
            if(allRowsObj.hasOwnProperty(d)) {
                allRowsObj[d] ++
            } else {
                allRowsObj[d] = 1;
            }
        })
        for(var i in allRowsObj) {
            if(allRowsObj[i] == this._cols) {
                clearLinesArr.push(i)
            }
        }
        if(clearLinesArr.length != 0) {
            this.setScoreAndLevel(clearLinesArr.length);
            this._haveArray = this._haveArray.filter(a => !clearLinesArr.some(b => b == a[0]));
            this._haveArray = this._haveArray.map(d => [this.downSome(d[0],clearLinesArr), d[1]])
            this._svg.selectAll('rect.fixed').remove();
            this._svg.selectAll('rect.fixed').data(this._haveArray)
            .enter()
            .append('rect')
            .attr('class', 'fixed')
            .attr('x', d => this._div * d[1] + 1)
            .attr('y', d => this._div * d[0] + 1)
            .attr('width', this._div - 3)
            .attr('height', this._div - 3)
            .attr('stroke', this._fixedColor)
            .attr('stroke-width', 2)
            .attr('fill', this._fixedColor)
            .attr('fill-opacity', 0.5)
        }
    }
    //消除时 判断下落层数
    downSome(c, arr) {
        let num = 0;
        arr.forEach(d => {
            if(c < d) {
                num ++;
            }
        })
        return num + c;
    }
    //设置等级和分数
    setScoreAndLevel(num) {
        switch(num) {
            case 1:
                this._score = this._score + 1;
                break;
            case 2:
                this._score = this._score + 3;
                break;
            case 3:
                this._score = this._score + 6;
                break;
            case 4:
                this._score = this._score + 10;
            default:
                break;
        }
        for(var i=0; i<this._levelLimit.length; i++) {
            if(this._score <= this._levelLimit[i]) {
                this._level = i + 1;
                break;
            }
        }
        d3.select('#score').html(this._score);
        d3.select('#level').html(this._level);
    }
    //左移动
    goLeft() {
        if(this.canLeft()) {
            this.leftArray();
            this.renderGraph();
        }
    }
    //右移动
    goRight() {
        if(this.canRight()) {
            this.rightArray();
            this.renderGraph();
        }
    }
    //旋转
    rotate() {
        if(this.canRotate()) {
            this.rotateArray();
            this.renderGraph();
        }
    }
    //下移动
    goDown() {
        if(this.canDown()) {
            this.downArray();
            this.renderGraph();
        }
    }
    //下落更新数组
    downArray() {
        this._curtArray = this._curtArray.map(d => {
            return [d[0] + 1, d[1]]
        })
    }
    //左移更新数组
    leftArray() {
        this._curtArray = this._curtArray.map(d => {
            return [d[0], d[1] - 1]
        })
    }
    //右移更新数组
    rightArray() {
        this._curtArray = this._curtArray.map(d => {
            return [d[0], d[1] + 1]
        })
    }
    //旋转更新数组
    rotateArray() {
        let arr = this._rotateArray[this._rotateIndex];
        this._curtArray = this._curtArray.map((d,i) => {
            return [d[0] + arr[i][0], d[1] + arr[i][1]]
        })
        this._rotateIndex = (this._rotateIndex + 1) % 4;
    }
    //判断是否可以下落
    canDown() {
        let max = 0;
        let status = true;
        let nextArr = this._curtArray.map(d => {
            if(d[0] + 1 > max) {
                max = d[0];
            }
            return [d[0] + 1, d[1]]
        });
        nextArr.forEach(d => {
            this._haveArray.forEach(item => {
                if(item[0] == d[0] && item[1] == d[1]) {
                    status = false;
                }
            })
        })
        if(!status || max > 16) {
            return false;
        } else {
            return true;
        }
    }
    //判断是否可以左移
    canLeft() {
        let min = this._cols;
        let status = true;
        let nextArr = this._curtArray.map(d => {
            if(d[1] - 1 < min) {
                min = d[1];
            }
            return [d[0], d[1] - 1]
        })
        nextArr.forEach(d => {
            this._haveArray.forEach(item => {
                if(item[0] == d[0] && item[1] == d[1]) {
                    status = false;
                }
            })
        })
        if(!status || min <= 0) {
            return false;
        } else {
            return true;
        }
    }
    //判断是否可以右移
    canRight() {
        let max = 0;
        let status = true;
        let nextArr = this._curtArray.map(d => {
            if(d[1] + 1 > max) {
                max = d[1];
            }
            return [d[0], d[1] + 1]
        })
        nextArr.forEach(d => {
            this._haveArray.forEach(item => {
                if(item[0] == d[0] && item[1] == d[1]) {
                    status = false;
                }
            })
        })
        if(!status || max > this._cols - 2) {
            return false;
        } else {
            return true;
        }
    }
    //判断可以变形
    canRotate() {
        let max = 0;
        let min = this._cols;
        let status = true;
        let arr = this._rotateArray[this._rotateIndex];
        let nextArr = this._curtArray.map((d,i) => {
            if(d[1] + 1 > max) {
                max = d[1];
            }
            if(d[1] - 1 < min) {
                min = d[1];
            }
            return [d[0] + arr[i][0], d[1] + arr[i][1]]
        })
        if(!status || max > this._cols - 1 || min < 0) {
            return false;
        } else {
            return true;
        }
    }
    //判断游戏结束
    gameOver() {
        let status = false;
        this._haveArray.forEach(d => {
            if((d[0] == 0 && d[1] == 3) || (d[0] == 0 && d[1] == 4) || (d[0] == 0 && d[1] == 5) || (d[0] == 0 && d[1] == 6)) {
                status = true;
            }
        })
        return status;
    }
    //随机生成图形块
    randomData() {
        this._curtArray = this._graphMap[this._nextNumber].position;
        this._color = this._graphMap[this._nextNumber].color;
        this._rotateArray = this._graphMap[this._nextNumber].rotate;
    }
    //预设下一个图形展示
    nextGraphNumber() {
        let rand = [0,0,1,1,2,2,3,4,5,6];
        this._nextNumber = rand[Math.floor(Math.random() * 10000) % 10];
        this._nextSvg.selectAll('rect.ne').remove();
        this._nextSvg.selectAll('rect.ne')
            .data(this._graphMap[this._nextNumber].position)
            .enter()
            .append('rect')
            .attr('class', 'ne')
            .attr('x', d => this._nextDiv * (d[1] - 1) + 1)
            .attr('y', d => this._nextDiv * (d[0] + 1) + 1)
            .attr('width', this._nextDiv - 3)
            .attr('height', this._nextDiv - 3)
            .attr('stroke', this._graphMap[this._nextNumber].color)
            .attr('stroke-width', 2)
            .attr('fill', this._graphMap[this._nextNumber].color)
            .attr('fill-opacity', 0.5)
    }
    //初始化数据
    initData() {
        this._haveArray = [];
        this._level = 1;
        this._score = 0;
        this._timeNumber = 0;
        this._svg.selectAll('rect').remove();
        d3.select('#score').html(0);
        d3.select('#level').html(1);
        d3.select('#time').html(0);
    }
    //开始时间
    initTime() {
        this._time = setInterval(() => {
            this._timeNumber ++;
            d3.select('#time').html(this._timeNumber);
        },1000)
    }
    //开始游戏
    startGame() {
        this.initData();
        this.randomData();
        this.nextGraphNumber();
        this.initGraph();
        this.initTime();
    }
}

2. css 代码

* {
  padding: 0;
  margin: 0;
}
body {
  width: 480px;
  margin: 30px auto;
}
.svg-container {
  overflow: hidden;
  border: 5px solid rgba(0,0,0,0.2);
  width: 330px;
  position: relative;
  float: left;
}
#modal {
  position: absolute;
  top: 0px;
  background-color: white;
  border-bottom: 5px solid rgb(202,202,202);
  padding: 20px;
  width: 310px;
  text-align: center;
  z-index: 100;
  transition: 200ms linear;
}
#newGame {
  text-decoration: none;
  color: gray;
  font-size: 25px;
  cursor: pointer;
}
aside {
  position: relative;
  float: right;
}
aside .next {
  width: 100px;
  height: 60px;
  padding: 10px;
  border: 5px solid rgba(0,0,0,0.2);
  border-radius: 2px;
  margin-bottom: 10px;
}
aside .score {
  width: 100px;
  padding: 10px;
  border: 5px solid rgba(0,0,0,0.2);
  border-radius: 2px;
  color: gray;
}
aside .pause {
  color: gray;
  font-size: 12px;
  font-style: italic;
  padding-left: 3px;
  margin-top: 15px;
}
.row {
  stroke: lightgray;
}
.col {
  stroke: lightgray;
}

3. html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <script type="text/javascript" src="js/d3.v4.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
    <div class="container">
        <div class="svg-container">
            <div id="modal" class="active">
                    <span id="newGame" onclick="newGame()">New Game</span>
            </div>
        </div>
        <aside>
            <div class="next"></div>
            <div class="score">
                <table>
                    <tr>
                        <td>Level:</td>
                        <td id="level"></td>
                    </tr>
                    <tr>
                        <td>Score:</td>
                        <td id="score"></td>
                    </tr>
                    <tr>
                        <td>Time:</td>
                        <td id="time"></td>
                    </tr>
                </table>
            </div>
            <div class="pause">
                <input type="checkbox" onclick="toggleGrid()"/> 网格
            </div>
        </aside>
    </div>
<script>
var tetris = new Tetris();

function toggleGrid() {
    tetris.toggleGrid()
}
function newGame() {
    document.getElementById('modal').style.top = '-100px';
    tetris.startGame()
}
</script>
</body>
</html>

想预览或者下载demo的人请移步至原文

原文地址 http://www.bettersmile.cn