28:null 29:["$","title",null,{"children":"Auto Tetris | Hall Zhang | Observable"}] 2e:T1d0e, class BackSheet { constructor(width, height) { this.width = width; this.height = height; this.matrix = []; for(var i = 0; i < height; i++){ var one = []; for(var j = 0; j < width; j++){ one.push({"val":0, "color":"#fff"}); } this.matrix.push(one); } } getMatrix(){ return this.matrix; } testBrickPutDown(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); for(var row = 0; row < brickMat.length; row++){ var curRow = brickMat[row]; for(var col = 0; col < curRow.length; col++){ if(curRow[col] > 0){ if(y-row >= this.height){ return false; } if(x + col < 0 || x + col >= this.width){ return false; } if(this.matrix[y-row] && this.matrix[y-row][x + col] && this.matrix[y-row][x + col].val > 0){ return false; } } } } return true; } putDownBrick(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); if(x < 0){x = 0;} for(var row = 0; row < brickMat.length; row++){ var curRow = brickMat[row]; for(var col = 0; col < curRow.length; col++){ if(curRow[col] > 0){ if(y-row < this.height && y-row >= 0 && x + col >= 0 && x + col < this.width){ this.matrix[y-row][x + col].val = curRow[col]; this.matrix[y-row][x + col].color = brick.getColor(); } } } } // console.log(this.matrix); } checkErase(){ var toErase = []; var idx = this.matrix.length-1; while(idx > 0){ var flg = true; for(var i = 0; i < this.matrix[idx].length; i++){ if(this.matrix[idx][i].val < 1){ flg = false; break; } } if(flg){ toErase.push(idx); } idx--; } return toErase; } checkEraseCntWithBrick(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); var count = 0; var idx = this.matrix.length-1; while(idx > 0){ var flg = true; for(var i = 0; i < this.matrix[idx].length; i++){ if(this.matrix[idx][i].val < 1){ flg = false; break; } } idx--; } for(var row = 0; row < brickMat.length; row++){ var curRow = brickMat[row]; var curRowCnt = 0; for(var col = 0; col < curRow.length; col++){ curRowCnt += curRow[col]; } if(y-row < this.height && y-row >= 0){ for(var col = 0; col < this.width; col++){ curRowCnt += this.matrix[y-row][col].val; } } if(curRowCnt == this.width){ count++; } } return count; } checkHoleCount(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); var count = 0; for(var c = 0; c < brickMat[0].length; c++){ for(var r = 0; r < brickMat.length; r++){ if(brickMat[r][c] > 0){ // for(var i = y-r+1; i < this.height; i++){ for(var i = y-r+1; i < Math.min(this.height, y-r+3); i++){ if(this.matrix[i] && this.matrix[i][x+c].val > 0){ break; } else{ count++; } } break; } } } return count; } checkTunelCount(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); var count = 0; for(var r = 0; r < brickMat.length; r++){ var col = 0; while(col < brickMat[r].length && brickMat[r][col] < 1){ col++; } var left = false; if(!this.matrix[y-r] || !this.matrix[y-r][x + col-1]){ left = true; } else if(this.matrix[y-r][x + col-1].val > 0){ left = true; } if(left){ var col = brickMat[r].length-1; while(col > 0 && brickMat[r][col] < 1){ col--; } if(!this.matrix[y-r] || !this.matrix[y-r][x + col+1]){ count++; } else if(this.matrix[y-r][x + col+1].val > 0){ count++; } } } return count; } checkWallSideCount(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var count = 0; if(x == 0){ for(var r = 0; r < brickMat.length; r++){ if(brickMat[r][0] > 0){ count++; } } } else if(x + brickMat[0].length == this.width){ var rightCol = brickMat[0].length -1; for(var r = 0; r < brickMat.length; r++){ if(brickMat[r][rightCol] > 0){ count++; } } } return count; } checkNeighbourCount(brick){ var brickMat = brick.getMatrix(); var x = brick.getX(); var y = brick.getY(); var count = 0; // left for(var r = 0; r < brickMat.length; r++){ var col = 0; while(col < brickMat[r].length && brickMat[r][col] < 1){ col++; } if(!this.matrix[y-r] || !this.matrix[y-r][x + col-1]){ if(x + col > 0){ count++; } } else if(this.matrix[y-r][x + col-1].val > 0){ count++; } } // right for(var r = 0; r < brickMat.length; r++){ var col = brickMat[r].length-1; while(col > 0 && brickMat[r][col] < 1){ col--; } if(!this.matrix[y-r] || !this.matrix[y-r][x + col+1]){ if(x + col + 1 < this.width){ count++; } } else if(this.matrix[y-r][x + col+1].val > 0){ count++; } } // below for(var c = 0; c < brickMat[0].length; c++){ var r = 0; while(r < brickMat.length && brickMat[r][c] < 1){ r++; } if(!this.matrix[y-r+1] || !this.matrix[y-r+1][x + c]){ count++; } else if(this.matrix[y-r+1][x + c].val > 0){ count++; } } return count; } }2f:Td18, class Brick { constructor(gridWidth) { this.gridWidth = gridWidth; var idx = Math.floor(Math.random() * BrickFactory.length); this.matrix = BrickFactory[idx]; this.cx = Math.floor(gridWidth/2); this.y = this.matrix.length; this.deltaY = 0; this.color = d3.schemeTableau10[idx]; // var colorScale = d3.scaleSequential(d3.interpolateGreys).domain([0, BrickFactory.length]); // this.color = colorScale(idx); } clone(){ let obj = new Brick(this.gridWidth); obj.matrix = []; for(var i = 0; i < this.matrix.length; i++){ var row = this.matrix[i]; var one = []; for(var j = 0; j < row.length; j++){ one.push(row[j]); } obj.matrix.push(one); } obj.cx = this.cx; obj.y = this.y; obj.color = this.color; return obj; } getMatrix(){ return this.matrix; } getCx(){ return this.cx; } setCx(cx){ this.cx = cx; } getX(){ return Math.floor(this.cx - this.matrix[0].length / 2); } getY(){ return this.y; } setY(y){ this.y = y; } getDeltaY(){ return this.deltaY; } getColor(){ return this.color; } downOneStep(backsheet){ this.y++; if(backsheet.testBrickPutDown(this)){ this.deltaY = 1; return true; } else{ this.y--; this.deltaY = 0; backsheet.putDownBrick(this); return false; } } leftOneStep(backsheet){ this.cx--; if(!backsheet.testBrickPutDown(this)){ this.cx++; return false; } else{ return true; } } rightOneStep(backsheet){ this.cx++; if(!backsheet.testBrickPutDown(this)){ this.cx--; return false; } else{ return true; } } rotate(backsheet,ccw=true){ var height = this.matrix.length; var width = this.matrix[0].length; var temp = []; for(var i = 0; i < width; i++){ var one = []; for(var j = 0; j < height; j++){ one.push(0); } temp.push(one); } for(var i = 0; i < height; i++){ for(var j = 0; j < width; j++){ if(ccw){ temp[j][i] = this.matrix[i][width-j-1]; } else{ temp[j][i] = this.matrix[height-i-1][j]; } } } var preMatrix = this.matrix; this.matrix = temp; if(!backsheet.testBrickPutDown(this)){ this.matrix = preMatrix; return false; } else{ return true; } } fastDown(backSheet){ var y = this.y; while(this.downOneStep(backSheet)){ } this.deltaY = this.y - y; } getHintY(backsheet){ var tempy = this.y; this.y++; while((backsheet.testBrickPutDown(this))){ this.y++; } var hinty = this.y-1; this.y = tempy; return hinty; } }30:T2e65, class Game { constructor(div) { this.gridWidth = 10; this.gridHeight = 23; this.bgPixWidth = 300; this.bgPixHeight = 687; this.gap = 2; this.curStrategy = null; this.score = 0; this.dropInterval = 100; this.botInterval = 100; this.HoleScore = -6; this.HeightScore = 2; this.EraseScore = [3,10,20,30]; this.TunelScore = 2; this.NeighbourScore = 1; this.WallSideScore = 0.5; this.brickSize = (this.bgPixWidth - this.gap * (this.gridWidth + 1)) / this.gridWidth; this.initSvgs(div); this.backSheet = new BackSheet(this.gridWidth, this.gridHeight); } isGameOver(){ return this.bGameOver; } destroy(){ this.svgBack.remove(); this.svgCur.remove(); } initSvgs(div){ this.svgBack = div.append("svg") .style("width", this.bgPixWidth + "px") .style("height", this.bgPixHeight + "px") .style("left", "0px") .style("top", "0px") .style("background-color", "#fff") // .style("border", "1px solid #ddd") .style("border-radius", "3px") .style("box-shadow", "1px 1px 10px rgba(31, 70, 147, 0.5)") .style("position", "absolute"); this.svgCur = div.append("svg") .style("width", this.bgPixWidth + "px") .style("height", this.bgPixHeight + "px") .style("left", "0px") .style("top", "0px") .style("position", "absolute"); this.initGridLines(this.svgBack); } initGridLines(svg){ for(var i = 0; i < this.gridWidth-1; i++){ var x = (i+1) * (this.gap + this.brickSize); svg.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", 0) .attr("y2", this.bgPixHeight) .style("stroke", "#eee") .style("stroke-width", "1px") .style("pointer-events", "none"); } for(var i = 0; i < this.gridHeight-1; i++){ var y = (i+1) * (this.gap + this.brickSize); svg.append("line") .attr("x1", 0) .attr("x2", this.bgPixWidth) .attr("y1", y) .attr("y2", y) .style("stroke", "#eee") .style("stroke-width", "1px") .style("pointer-events", "none"); } } update(){ if(this.bGameOver){ return this.score; } if(!this.dropTime || !this.botTime){ this.dropTime = new Date().getTime(); this.botTime = this.dropTime; return this.score; } if(!this.curBrick){ this.curBrick = new Brick(this.gridWidth); this.nxtBrick = new Brick(this.gridWidth); } var curTime = new Date().getTime(); if(curTime - this.botTime > this.botInterval){ this.botTime = curTime; this.botWork(); } if(curTime - this.dropTime > this.dropInterval){ this.dropTime = curTime; this.procDrop(); } return this.score; } procDrop(){ if(!this.curBrick.downOneStep(this.backSheet)){ var toErase = this.backSheet.checkErase(); if(toErase.length > 0){ this.renderBack(); this.score += toErase.length; this.doErase(toErase); this.svgCur.selectAll("*").remove(); } else{ this.renderBack(); this.renderCurrent(); } this.procNxtBrick(); } else{ this.renderBack(); this.renderCurrent(); } } procNxtBrick(){ this.curBrick = this.nxtBrick; this.nxtBrick = new Brick(this.gridWidth); if(!this.backSheet.testBrickPutDown(this.curBrick)){ this.bGameOver = true; } this.curStrategy = null; } renderBack(){ var svg = this.svgBack; var dy = this.curBrick.getDeltaY(); var backMat = this.backSheet.getMatrix(); for(var r = 0; r < backMat.length; r++){ var curRow = backMat[r]; for(var c = 0; c < curRow.length; c++){ if(curRow[c].val > 0 && !curRow[c].rect){ var drawx = this.gap * (c+1) + this.brickSize * c; var drawy = this.gap * (r+1) + this.brickSize * r; curRow[c].rect = svg.append("rect") .attr("x", drawx) .attr("y", drawy) .attr("rx", 3) .attr("ry", 3) .attr("width", this.brickSize) .attr("height", this.brickSize) .attr("fill", curRow[c].color); } } } } renderCurrent(){ var svg = this.svgCur; svg.selectAll("*").remove(); var x = this.curBrick.getX(); var y = this.curBrick.getY(); var hy = this.curBrick.getHintY(this.backSheet); var backMat = this.backSheet.getMatrix(); var brickMat = this.curBrick.getMatrix(); for(var r = 0; r < brickMat.length; r++){ var curRow = brickMat[r]; for(var c = 0; c < curRow.length; c++){ if(curRow[c] > 0){ var drawx = this.gap * (x + c+1) + this.brickSize * (x +c); var drawy = this.gap * (y-r+1) + this.brickSize * (y-r); if(y - r >= 0 && y - r <= backMat.length){ svg.append("rect") .attr("x", drawx) .attr("y", drawy) .attr("rx", 3) .attr("ry", 3) .attr("width", this.brickSize) .attr("height", this.brickSize) .attr("fill", this.curBrick.getColor()); } } } } } doErase(toErase){ var backMat = this.backSheet.getMatrix(); for(var i = 0; i < toErase.length; i++){ var idx = toErase[i]; var row = backMat[idx]; for(var c = 0; c < row.length; c++){ if(row[c].rect){ row[c].rect.transition() .duration(100) .attr("fill", "white") .transition() .duration(100) .attr("fill", row[c].color) .transition() .duration(100) .attr("fill", "white") .remove(); } } backMat.splice(idx, 1); } for(var i = 0; i < toErase.length; i++){ var one = []; for(var j = 0; j < backMat[0].length; j++){ one.push({"val":0, "color":"#fff"}); } backMat.unshift(one); } for(var r = 0; r < backMat.length; r++){ var curRow = backMat[r]; for(var c = 0; c < curRow.length; c++){ if(curRow[c].rect){ var drawx = this.gap * (c+1) + this.brickSize * c; var drawy = this.gap * (r+1) + this.brickSize * r; var self = this; curRow[c].rect.transition() .delay(300) .duration(100) .attr("x", drawx) .attr("y", drawy); } } } } botWork(){ if(!this.curStrategy){ this.produceBotStrategy(); } if(this.curStrategy.rotate > 0){ this.curStrategy.rotate--; this.curBrick.rotate(this.backSheet); this.renderCurrent(); } else if(this.curStrategy.move < 0){ this.curStrategy.move++; this.curBrick.leftOneStep(this.backSheet); this.renderCurrent(); } else if(this.curStrategy.move > 0){ this.curStrategy.move--; this.curBrick.rightOneStep(this.backSheet); this.renderCurrent(); } else{ if(this.curBrick.downOneStep(this.backSheet)){ this.renderCurrent(); } } } produceBotStrategy(){ var tempBrick = this.curBrick.clone(); var strategies = []; for(var i = 0; i < 4; i++){ if(i > 0){ if(!tempBrick.rotate(this.backSheet)){ break; } } var curx = tempBrick.getCx(); var cury = tempBrick.getY(); var one = {"rotate":i,"move":tempBrick.getCx() - curx,"y":0,"score":0}; strategies.push(one); this.calcStrategyScore(one, tempBrick); while(true){ tempBrick.setY(cury); if(!tempBrick.leftOneStep(this.backSheet)){ break; } one = {"rotate":i,"move":tempBrick.getCx() - curx,"y":0,"score":0}; strategies.push(one); this.calcStrategyScore(one, tempBrick); } tempBrick.setCx(curx); while(true){ tempBrick.setY(cury); if(!tempBrick.rightOneStep(this.backSheet)){ break; } one = {"rotate":i,"move":tempBrick.getCx() - curx,"y":0,"score":0}; strategies.push(one); this.calcStrategyScore(one, tempBrick); } tempBrick.setCx(curx); tempBrick.setY(cury); } strategies.sort(function(a,b){ return a.y - b.y; }); var miny = strategies[0].y; var HeightScore = this.HeightScore; strategies.map(function(d){ d.score += (d.y - miny) * HeightScore; return d; }); strategies.sort(function(a,b){return b.score - a.score;}); this.curStrategy = strategies[0]; } calcStrategyScore(strategy, brick){ var hinty = brick.getHintY(this.backSheet); brick.setY(hinty); var eraseCnt = this.backSheet.checkEraseCntWithBrick(brick); if(eraseCnt > 1){ strategy.score += this.EraseScore[eraseCnt-1]; } var holeCnt = this.backSheet.checkHoleCount(brick); if(holeCnt > 0){ strategy.score += this.HoleScore * holeCnt; strategy.holeCnt = holeCnt; } var tnCnt = this.backSheet.checkTunelCount(brick); if(tnCnt > 0){ strategy.score += this.TunelScore * tnCnt; strategy.tnCnt = tnCnt; } var wCnt = this.backSheet.checkWallSideCount(brick); if(wCnt > 0){ strategy.score += this.WallSideScore * wCnt; strategy.wCnt = wCnt; } var nbCnt = this.backSheet.checkNeighbourCount(brick); if(nbCnt > 0){ strategy.score += this.NeighbourScore * nbCnt; } strategy.y = brick.getY(); } } 31:[] 2c:{"id":"ea32396aa97ded90","slug":"auto-tetris","title":"Auto Tetris","thumbnail":"493ccdcd1b5344e9ff19c0ae88bdc43afd6c42327683caef8bf74639c4a2fa99","access_level":"public","create_time":"$D2022-06-02T08:34:40.154Z","update_time":"$D2022-06-04T23:28:08.517Z","view_time":null,"first_public_time":"$D2022-06-03T12:38:30.900Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"47596111eddc6e25","login":"zhanghao","name":"Hall Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d2b8ade22cb91342694488067ce366ebdb779752e5ce9d7cff27ff3dbdc96ad2","tier":"starter_2024"},"version":49,"publish_version":49,"role":null,"authored":false,"authors":[{"type":"individual","id":"4cd2f9210cf51ed7","login":"zhanghao","name":"Hall Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d2b8ade22cb91342694488067ce366ebdb779752e5ce9d7cff27ff3dbdc96ad2","tier":null}],"members":[{"type":"individual","id":"4cd2f9210cf51ed7","login":"zhanghao","name":"Hall Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d2b8ade22cb91342694488067ce366ebdb779752e5ce9d7cff27ff3dbdc96ad2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Auto Tetris","cells":[{"id":0,"value":"# Auto Tetris","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"{\n var divGame = d3.create(\"div\")\n .style(\"width\", width+\"px\")\n .style(\"height\", \"700px\");\n\n var curX = 310;\n var curY = 0;\n var maxWidth = 0;\n var curScoreSvg = newScoreSvg(divGame,curX, curY);\n \n var gm = new Game(divGame);\n while(true){\n if(gm.isGameOver()){\n gm.destroy();\n\n gm = new Game(divGame);\n\n curY += 32;\n if(curY > 687){\n curX = curX + maxWidth + 10;\n curY = 0;\n maxWidth = 0;\n }\n curScoreSvg = newScoreSvg(divGame, curX, curY);\n }\n var score = gm.update();\n \n maxWidth = Math.max(updateScore(curScoreSvg, score));\n \n yield divGame.node();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Use an object like this to represent a strategy:\n```JavaScript\n {\"rotate\":2,\"move\":2,\"y\":10,\"score\":2};\n```\nThis means rotate 2 times, then move right 2 steps(negative number represent moving left), drop to row 10. The strategy's score is 2.\n\nAbout score's calculation, I considered the following factors:\n- make new holes or not\n- drop to low or high place\n- can erase how many rows\n- fill slot or not\n- how many neighbours will have after drop down\n\nAfter calculate all factors above, select the highest score strategy to work.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"function newScoreSvg(div, x, y){\n var svg = div.append(\"svg\")\n .style(\"width\", \"10px\")\n .style(\"height\", \"25px\")\n .style(\"left\", x + \"px\")\n .style(\"top\", y +\"px\")\n // .style(\"border\", \"2px solid #aaa\")\n .style(\"border-radius\", \"10px\")\n .style(\"box-shadow\", \"1px 1px 10px rgba(31, 70, 147, 0.5)\")\n .style(\"position\", \"absolute\");\n\n svg.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n // .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"20px\")\n .attr(\"x\", 10)\n .attr(\"y\", 20)\n .attr(\"fill\", \"black\")\n .style(\"pointer-events\", \"none\")\n .text(\"0\");\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function updateScore(svg, score){\n var txt = svg.select(\"text\").text(score);\n var txtRct = txt.node().getBoundingClientRect();\n\n var svgWidth = txtRct.width + 20;\n svg.style(\"width\", svgWidth+\"px\");\n\n return svgWidth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"BrickFactory = [\n // Triada \n [\n [0,1,0],\n [1,1,1]\n ],\n\n // LCorner \n [\n [1,1,1],\n [1,0,0]\n ],\n\n // RCorner \n [\n [1,1,1],\n [0,0,1]\n ],\n\n // LZigzag \n [\n [1,1,0],\n [0,1,1]\n ],\n\n // RZigzag\n [\n [0,1,1],\n [1,1,0]\n ],\n\n // Stick \n [\n [1,1,1,1]\n ],\n\n // Box \n [\n [1,1],\n [1,1]\n ]\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3=require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"