Home>

### how to solve 2x3 puzzles using javascript

Using JavaScript, 6 numbers from 0 to 5 are arranged in a rectangular shape as shown in the image below, and the movement to rotate the 4 on the left side including the center by 1 around the trunk is L, and the 4 on the right side Let R be the movement that rotates one clockwise. In the example of this image, the initial state is given as [2,1,5,0,3,4], and the goal state is given as g = [0,1,2,3,4,5]. I want to make a function puzzle (state) that returns the youngest and shortest movement as a character string like "RRLLRRR ..." in a lexicographic order to change from the state to the goal state. How do I program it? I don't know if I should assemble it.

What I tried

I know that I should search from the given state to the goal state using breadth-first search, but I understand how to memorize the pattern that appeared and how to extract the character string from the goal state. not.

Supplement

For image patterns, I'm thinking of a function that returns "LR". Also, the goal state is g = [0,1,2,3,4,5] every time.

• Answer # 1

I think there seems to be an efficient solution, but
If you have this amount of data, you should check all of them.
After 10 loops in calculation, you can pick up from the original data to the final data that can be converted.
There are 120 types of data

codepen lr game

• Answer # 2

I don't know how to solve it, but isn't it the basis?
I also posted an example of how to apply it, and made some modifications.

``````<! DOCTYPE html>
<meta charset = "UTF-8">
<title>A23</title>
<style>
td, input [type = "button"] {
font-size: xx-large;
border: 2px gray ridge;
border-radius: 40px;
padding: 1ex 1em;
}
</style>
<body>
<table id = "A">
<tr><td><td><td>
<tr><td><td><td>
</table>
<p>
<input type = "button" value = "L">
<input type = "button" value = "Reset">
<input type = "button" value = "R"><br>
<input type = "text" size = "40" value = "" id = "S">
</p>
<script>
class A23 {
constructor (... arg) {
this.reset (... arg);
}
R () {
let [a, b, c, d, e, f] = this.map;
this.map = [a, e, b, d, f, c];
this.history + ='R';
return this;
}
L () {
let [a, b, c, d, e, f] = this.map;
this.map = [b, e, c, a, d, f];
this.history + ='L';
return this;
}
advance (str ='') {
[... str] .forEach (s =>this [s] ());
this.history + = str;
return this;
}
reset (LR ='', map = [0, 1, 2, 3, 4, 5]) {
this.map = map;
this.history ='';
return this.advance (LR);
}
copy () {
return new this.constructor ('', this.map);
}
}
// ____________________________
function disp () {
[... A.querySelectorAll ('td')]
.forEach ((e, i) =>e.textContent = a23.map [i]);
S.value = a23.history;
}
function handler ({target: e}) {
let {type, value} = e;
if ('button' === type)
switch (e.value) {
case'L': a23.L ();break;
case'R': a23.R ();break;
case'Reset': a23.reset ();
}
disp ();
}
const a23 = new A23;
disp ();
document.addEventListener ('click', handler, false);
</script>``````