可以做兼职的网站有哪些,1g内存vps 开电影网站,去哪学做网站,策划书怎么写 格式范文d3.js是一个不错的可视化框架#xff0c;同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块。话不多说先上图片。 1. js tetris类 由于方法拆分的比较细所以加上了一些备注#xff08;这不是我的风格#xff01;#xff09; c… 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;}})}//设置运动图形 如果仍有掉落空间则继续掉落 反之调用setHaveArrayinitGraph() {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 i0; ithis._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 langen
headmeta charsetUTF-8title$Title$/titlelink relstylesheet typetext/css hrefcss/base.css/script typetext/javascript srcjs/d3.v4.js/scriptscript typetext/javascript srcjs/base.js/script
/head
bodydiv classcontainerdiv classsvg-containerdiv idmodal classactivespan idnewGame onclicknewGame()New Game/span/div/divasidediv classnext/divdiv classscoretabletrtdLevel:/tdtd idlevel/td/trtrtdScore:/tdtd idscore/td/trtrtdTime:/tdtd idtime/td/tr/table/divdiv classpauseinput typecheckbox onclicktoggleGrid()/ 网格/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 转载于:https://www.cnblogs.com/vadim-web/p/11492095.html
