d3.js是一個不錯的可視化框架，同時對于操作dom也是十分方便的。今天我們使用d3.js配合es6的類來制作一個童年小游戲--俄羅斯方塊。話不多說先上圖片。

1. js tetris類

由于方法拆分的比較細(xì)所以加上了一些備注（這不是我的風(fēng)格！）

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;}})}//設(shè)置運動圖形 如果仍有掉落空間則繼續(xù)掉落 反之調(diào)用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)}//設(shè)置掉落后的數(shù)組，并清除運動的圖形 重置狀態(tài) 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)}}//消除時 判斷下落層數(shù) downSome(c, arr) {let num = 0;arr.forEach(d => {if(c < d) {num ++;}})return num + c;}//設(shè)置等級和分?jǐn)?shù) 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();}}//旋轉(zhuǎn) rotate() {if(this.canRotate()) {this.rotateArray();this.renderGraph();}}//下移動 goDown() {if(this.canDown()) {this.downArray();this.renderGraph();}}//下落更新數(shù)組 downArray() {this._curtArray = this._curtArray.map(d => {return [d[0] + 1, d[1]]})}//左移更新數(shù)組 leftArray() {this._curtArray = this._curtArray.map(d => {return [d[0], d[1] - 1]})}//右移更新數(shù)組 rightArray() {this._curtArray = this._curtArray.map(d => {return [d[0], d[1] + 1]})}//旋轉(zhuǎn)更新數(shù)組 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;}}//判斷游戲結(jié)束 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;}//預(yù)設(shè)下一個圖形展示 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)}//初始化數(shù)據(jù) 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()"/> 網(wǎng)格</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>

想預(yù)覽或者下載demo的人請移步至原文

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/vadim-web/p/11492095.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的d3.js 制作简单的俄罗斯方块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。