tromino谜题javaScript版-- 《算法分析与设计》课程设计题目
@Tromino谜题javaScript版-- 《算法分析与设计》课程设计题目
tromino谜题js版
Tromino 是指一个由棋盘上的三个方块组成的 L 型骨牌。如何用 Tromino 覆盖一个缺少了一个方块（可以在棋盘上任何位置）的棋盘（下图展示了情况）。除了这个缺失的方块，Tromino 应该覆盖棋盘上的所有方块，Tromino 可以任意转向但不能有重叠。
tromino谜题的算法思想
Tromino谜题是一个经典的利用分治法来解决的问题，每次将棋盘从中心C划分成四部分P1，P2，P3，P4，然后将包围着中心C的四个格子中，除了在缺失的格子的区域里的那个格子不着色，其他的三个格子着上相同的颜色。然后再让四个部分再按照相同的规则去着色。如下图所示：
关于这个题目的算法思想我就只做一个简单的解释，网上有很多写得比较好，比较细致的博客可供大家更好的理解这个算法，比如Tromino谜题或者Tromino谜题 C++版
代码部分
html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tromino 谜题title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/reset.css">
head>
<body>
<div class="mainBody">
<div class="tromino_box">
div>
<div class="input_require">
方格尺寸:<input type="number" class="tromino_size">
缺失位置: 行：<input type="number" class="lose_line"> 列：<input type="number" class="lose_column">
<button class="show_tromino">显示结果button>
div>
div>
<script src="./index.js">script>
body>
html>
css部分
.mainBody{
width: 100%;
height: 721px;
background-color: rgb(226, 205, 209);
opacity: 0.8;
}
.mainBody .tromino_box{
position: absolute;
/* left: 30%;
top: 14%; */
}
.small{
left: 39%;
top: 20%;
}
.mid{
left: 33.5%;
top: 16%;
}
.large{
left: 30%;
top: 14%;
}
table{
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%);
background-color: #d6d5df;
}
td.lose{
background-color: #000000;
}
td.zero{
background-color: #c74646;
}
td.one{
background-color: #187007;
}
td.two{
background-color: #e29b6c;
}
td.three{
background-color: #add12b;
}
td.four{
background-color: #d464c2;
}
td.five{
background-color: #a8d5db;
}
td.six{
background-color: #783597;
}
td.seven{
background-color: #71a829;
}
td.eight{
background-color: #a3264b;
}
td.nine{
background-color: #c41f1f;
}
td.ten{
background-color: #2630b9;
}
td{
line-height: 20px;
color: #181717;
/* font-size: 12px; */
text-align: center;
font-weight: bold;
background-color: rgb(212, 207, 207);
border: 2px solid;
border-color: #fff #a1a1a1 #a1a1a1 #fff;
}
.td_size1{
width: 75px;
height: 75px;
font-size: 20px;
}
.td_size2{
width: 50px;
height: 50px;
font-size: 16px;
}
.td_size3{
width: 30px;
height: 30px;
font-size: 12px;
}
.input_require{
width: 590px;
height: 40px;
line-height: 40px;
background-color: #f8c6c6;
position: absolute;
left: 28%;
top: 3%;
color: #252323;
border-radius: 2px;
padding-left: 66px;
opacity: 0.95;
/* font-weight: bold; */
}
.input_require input{
width: 40px;
height: 15px;
outline: none;
}
.input_require .tromino_size{
margin-right: 20px;
}
.input_require .show_tromino{
width: 76px;
height: 30px;
background-color: rgb(245, 151, 151);
border: none;
border-radius: 8px;
position: relative;
left: 40px;
outline: none;
}
js部分
function Tromino(tr,td,loseX,loseY,tdClassName){
this.tr = tr;
this.td = td;
this.number = 1;
this.massage = [];
this.loseX = loseX;
this.loseY = loseY;
this.tdClassName = tdClassName;
this.doms = []; //存储所有单元格的DOM
this.body = document.getElementsByClassName('tromino_box')[0];
}
//按照输入的行和列创造格子
Tromino.prototype.createTable = function(){
// console.log(this.body);
var table = document.createElement('table');
for(var i = 0;i < this.tr;i++){
var tr = document.createElement('tr');
this.massage[i] = [];
this.doms[i] = [];
for(var j = 0; j < this.td; j++){
var td = document.createElement('td');
this.doms[i][j] = td;
td.pos = [i,j];
this.massage[i][j] = 0;
tr.appendChild(td);
}
table.appendChild(tr);
}
this.body.innerHTML = '';
this.body.appendChild(table);
}
Tromino.prototype.init = function(){
this.createTable();
this.massage[this.loseX][this.loseY] = -1;
this.doms[this.loseX][this.loseY].className = 'lose';
this.run_L(this.tr/2,this.td/2,this.loseX,this.loseY,this.tr);
console.log(this.massage)
this.getColor()
this.putNumber()
}
Tromino.prototype.getColor = function(){
var numberStyle = ['zero','one','two','three','four','five','six','seven','eight','nine','ten'];
for(var i = 0; i < this.tr; i++){
for(var j = 0; j < this.td; j++){
if(this.massage[i][j] != 0 && this.massage[i][j] != -1){
var num = this.massage[i][j]%11;
this.doms[i][j].className = numberStyle[num]+' '+this.tdClassName;
}
if(this.massage[i][j] != -1){
this.massage[i][j].className = this.tdClassName;
}
}
}
}
Tromino.prototype.putNumber = function(){
for(var i = 0; i < this.tr;i++){
for(var j = 0; j < this.td; j++){
this.doms[i][j].innerHTML = this.massage[i][j];
}
}
}
Tromino.prototype.run_L = function(centerX,centerY,loseX,loseY,len){
if(len < 2){
return ;
}
//缺失的方块在左上方
if(loseX < centerX && loseY < centerY){
// console.log('左上方');
this.massage[centerX-1][centerY] = this.number;
this.massage[centerX][centerY] = this.number;
this.massage[centerX][centerY-1] = this.number;
console.log('左上方',this.number);
console.log(centerX-1,centerY);
console.log(centerX,centerY);
console.log(centerX,centerY-1);
console.log("--------------");
this.number++;
var count = len / 4;
console.log(this.massage);
this.run_L(centerX+count,centerY-count,centerX,centerY-1,len/2); //右上角
this.run_L(centerX+count,centerY+count,centerX,centerY,len/2);//左上角
this.run_L(centerX-count,centerY+count,centerX-1,centerY,len/2); //左下角
this.run_L(centerX-count,centerY-count,loseX,loseY,len/2) //缺失的
}
//缺失的方块在左下方
else if(loseX >= centerX && loseY < centerY){
// console.log('左下方');
this.massage[centerX-1][centerY] = this.number;
this.massage[centerX][centerY] = this.number;
this.massage[centerX-1][centerY-1] = this.number;
console.log('左下方',this.number);
console.log(centerX-1,centerY);
console.log(centerX,centerY);
console.log(centerX-1,centerY-1);
console.log("------------");
this.number++;
var count = len / 4;
this.run_L(centerX-count,centerY-count,centerX-1,centerY-1,len/2); //右下角
this.run_L(centerX+count,centerY+count,centerX,centerY,len/2); //左上角
this.run_L(centerX-count,centerY+count,centerX-1,centerY,len/2); //左下角
this.run_L(centerX+count,centerY-count,loseX,loseY,len/2) //缺失的
}
//缺失的方块在右上方
else if(loseX < centerX && loseY >= centerY){
// console.log('右上方');
this.massage[centerX][centerY-1] = this.number;
this.massage[centerX][centerY] = this.number;
this.massage[centerX-1][centerY-1] = this.number;
console.log('右上方',this.number);
console.log(centerX,centerY-1);
console.log(centerX,centerY);
console.log(centerX-1,centerY-1);
console.log("------------");
this.number++;
var count = len / 4;
this.run_L(centerX+count,centerY-count,centerX,centerY-1,len/2); //右上角
this.run_L(centerX+count,centerY+count,centerX,centerY,len/2); //左上角
this.run_L(centerX-count,centerY-count,centerX-1,centerY-1,len/2); //右下角
this.run_L(centerX-count,centerY+count,loseX,loseY,len/2) //缺失的
}
//缺失的方块在右下方
else{
// console.log('右下方');
this.massage[centerX-1][centerY] = this.number;
this.massage[centerX-1][centerY-1] = this.number;
this.massage[centerX][centerY-1] = this.number;
console.log('右下方',this.number);
console.log(centerX-1,centerY);
console.log(centerX-1,centerY-1);
console.log(centerX,centerY-1);
console.log("------------");
this.number++;
var count = len / 4;
this.run_L(centerX-count,centerY-count,centerX-1,centerY-1,len/2); //右下角
this.run_L(centerX-count,centerY+count,centerX-1,centerY,len/2); //左下角
this.run_L(centerX+count,centerY-count,centerX,centerY-1,len/2); //右上角
this.run_L(centerX+count,centerY+count,loseX,loseY,len/2) //缺失的
}
}
//获取输入的需求信息
var size_input = document.getElementsByClassName('tromino_size')[0];
var lose_line = document.getElementsByClassName('lose_line')[0];
var lose_column = document.getElementsByClassName('lose_column')[0];
var show_button = document.getElementsByClassName('show_tromino')[0];
var body = document.getElementsByClassName('tromino_box')[0];
var size,line,column;
show_button.onclick = function(){
show_button.style = "color:#fff;"
size = Number(size_input.value) ;
line = Number(lose_line.value);
column = Number(lose_column.value);
tdClassName = "";
console.log(size,line,column);
console.log("size==4",size==4);
if(size == 4 || size == 8 || size == 16){
if(line >= size || column >= size || line < 0 || column < 0){
alert('输入的缺失位置不对');
return ;
}
switch(size){
case 4:body.className = "small tromino_box";tdClassName = "td_size1";break;
case 8:body.className = "mid tromino_box";tdClassName = "td_size2";break;
case 16:body.className = 'large tromino_box';tdClassName = "td_size3";break;
}
var tromino = new Tromino(size,size,line,column,tdClassName);
tromino.init();
}else{
alert('尺寸输入不对，请输入4或8或16');
return ;
}
}
代码运行结果展示及说明
说明：js运用了面向对象的思想，可实现任意2的n次方的Tromino问题，但是在界面中只显示了2的2、3、4次方三种的界面，以及界面背景颜色样式之类的，大家可根据自己的需求，自行调整。
好啦，文章到这里就结束了，如果这篇文章对你有帮助的话，还请给博主点个赞呗~~