o-treetree.hatenablog.com
1ヶ月ほど前にこれ↑が完成しました。
C言語で、（大抵の）ナンプレを解いてくれるプログラムです。
これをJavaScriptに書き換えて、Web上で使えるようにしました！
oha-yashi web test
↑こちらから。
特に機能に変わりはないですが、ボタン一発で解答できるようになったのはでかいですね
別に使い方は見ればわかると思うので、C→JSの移植で大変だったところをメモする。
本題は終了。
ちょっとまともなところがある。初歩の初歩の話だが
変更点
データの取り扱い、メソッド化
hoge.fuga()みたいなやつできればいいなぁってなったのでクラスを使ってみた
Cでは
typedef unsigned short np;
だったのをJSでは
class np{
constructor(d){
this.d = d;
}
にしてみた。
calc.hの
#define NUM(d) ((d)>>12)
#define set_num(d, i) d = d & 0x0fff | (i<<12)
#define BLOCK(n) (LINE(n)/3*3 + ROW(n)/3)
をJSで
class np{
NUM(){ return this.d>>12 }
set_num(i){ this.d = this.d & 0x0fff | (i<<12) }
}
function BLOCK(n){return Math.floor(LINE(n)/3)*3 + Math.floor(ROW(n)/3)}
としたり。
そんなにいいことはなかった。書き換えがめんどくなった。
set_num(data[n], i)がdata[n].set_num(i)になったのでその辺をまるっと修正する必要があった。
あとは、整数÷整数がCのような切り捨てではなくJSだとご丁寧に小数にしてくれるのでMath.floorをかまさなければいけなかった。
データのみを扱う操作くらいしかメソッドにできない割にあとでめんどくさくなった
関数の書き換え
functionの引数に型を明示しなくていいのは楽だと思った
/** @c NUM(data[n]) @js data[n].NUM() */
NUM(){ return this.d>>12 }
/** @c FLAG(data[n], i) @js data[n].FLAG(i) */
FLAG(i){ return this.d>>i & 1 }
↑この辺の書き換えが面倒だった
read_and_delete_lrb
void read_delete_lrb(int start, int kouho, int byA, int byB, int byC, char c){
int sum[3] = {}; int keep[3] = {};
int i, j, k, roop, sum_all, cont;
for(i=0; i<3; i++)for(j=0; j<3; j++){
roop = start + i*byB + j*byC;
for(k=0; k<3; k++){
if(roop == keep[k]) goto NEXT;
}
flag_off(data[roop], kouho);
NEXT:;
}
}
function read_delete_lrb(start, kouho, byA, byB, byC, c){
var sum = [3]; var keep = [3];
var i, j, roop, sum_all, cont;
for(i=0; i<3; i++)for(j=0; j<3; j++){
roop = start + i*byB + j*byC;
if(roop===keep[0] || roop===keep[1] || roop===keep[2]){
}else{
data[roop].flag_off(kouho);
}
}
}
roopはkeepのどれかに一つのみに一致するか、あるいはどれにも一致しない。
最初cの形をそのままjsに書き換えたらおかしくなった。gotoから↓みたいなcontinueにしたんだが
cの方自体は問題なく動作していたはずなのだが…………わからん
もう一回書き直してみたらちゃんと動作した。まあ現行の方が条件がわかりやすいな
NEXT:
for(i=0; i<3; i++)for(j=0; j<3; j++){
roop = start + i*byB + j*byC;
for(var k=0; k<3; k++){
if(roop===keep[k]){
continue NEXT;
}
}
data[roop].flag_off(kouho);
}
}
only_two_pair_lrb
void only_two_pair_lrb(int start, int byA, int byB){
int i, j, k, l, roop, cnt;
int q_k[10] = {};
for(k=1;k<=9;k++){
for(i=0;i<3;i++)for(j=0;j<3;j++){
roop = start + i*byA + j*byB;
if(FLAG(data[roop], k))q_k[k]++;
}
}
int pair_k_in[10][2] = {};
for(k=1; k<=9; k++){
cnt = 0;
if(q_k[k] == 2){
for(i=0;i<3;i++)for(j=0;j<3;j++){
roop = start + i*byA + j*byB;
if(FLAG(data[roop], k)){
pair_k_in[k][cnt] = roop;
cnt++;
}
}
}
}
for(k=1; k<=8; k++){
if(q_k[k] == 2){
for(l=k+1; l<=9; l++){
if(pair_k_in[k][0] == pair_k_in[l][0]
&& pair_k_in[k][1] == pair_k_in[l][1]){
data[ pair_k_in[k][0] ] = data[ pair_k_in[k][1] ] = 0x0;
data[ pair_k_in[k][0] ] = data[ pair_k_in[k][1] ] |= 1<<k;
data[ pair_k_in[k][0] ] = data[ pair_k_in[k][1] ] |= 1<<l;
}
}
}
}
}
function only_two_pair_lrb(start, byA, byB){
var i, j, k, l, roop, cnt;
var q_k = new Array(10).fill(0);
for(k=1;k<=9;k++){
for(i=0;i<3;i++)for(j=0;j<3;j++){
roop = start + i*byA + j*byB;
if(data[roop].FLAG(k))q_k[k]++;
}
}
var pair_k_in = Array2Dnull(10, 2);
for(k=1; k<=9; k++){
cnt = 0;
if(q_k[k] == 2){
for(i=0;i<3;i++)for(j=0;j<3;j++){
roop = start + i*byA + j*byB;
if(data[roop].FLAG(k)){
pair_k_in[k][cnt] = roop;
cnt++;
}
}
}
}
for(k=1; k<=8; k++){
if(q_k[k] == 2){
for(l=k+1; l<=9; l++){
if(pair_k_in[k][0] == pair_k_in[l][0]
&& pair_k_in[k][1] == pair_k_in[l][1]){
data[ pair_k_in[k][0] ].d = data[ pair_k_in[k][1] ].d = 0x0;
data[ pair_k_in[k][0] ].d = data[ pair_k_in[k][1] ].d |= 1<<k;
data[ pair_k_in[k][0] ].d = data[ pair_k_in[k][1] ].d |= 1<<l;
}
}
}
}
}
罠にはまるその1
int a[10] = {};
for(int i=0; i<10; i++){
a[i]++;
}
これ（概略）をJSにしようとして最初こうやった
var a = new Array(10);
for (i=0; i<10; i++){
a[i]++;
}
失敗。ここでaは空白の配列なので元々a[i] = undefined。インクリメントできずNaNになる
//ブラウザコンソール
> var a = new Array(10);
for (i=0; i<10; i++){
a[i]++;
}
< NaN
> a
< [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN] (10)
こうすれば良かった
var a = [0,0,0,0,0,0,0,0,0,0];
for (i=0; i<10; i++){
a[i]++;
}
//ブラウザコンソール
> var a = [0,0,0,0,0,0,0,0,0,0];
for (i=0; i<10; i++){
a[i]++;
}
< 0
> a
< [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] (10)
でもカッコよくないのでこうした
var a = new Array(10).fill(0);
for (i=0; i<10; i++){
a[i]++;
}
//ブラウザコンソール
> var a = new Array(10).fill(0);
for (i=0; i<10; i++){
a[i]++;
}
< 0
> a
< [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] (10)
罠にはまるその2(?)
多次元配列がJavaScriptには無い(?)のでつくらんといけない、ということで
function Array2Dnull(p, q){
var a = new Array(p);
for(var i=0; i<p; i++){
a[i] = new Array(q);
}
return a;
}
var a = Array2Dnull(10, 2);
罠にはまるその3(?)
Cの時data[n]自体をビット演算できた（ただの整数型なので）けどJSだとdata[n].dにしなければいけなかった
まあこれは単に面倒だったという話。
HTMLを使う利点
マス目をinputで作る
jQueryは便利ですね。
var masus = [];
function printMasu(){
for(var i=0; i<9; i++){
newRow = $("<div>").appendTo(viewField);
for(var j=0; j<9; j++){
roop = i*9 + j;
masus[roop] = $("<input>").attr({
type:"text", id:"box"+roop, maxLength:1
}).css({
borderStyle : "solid",
borderColor : "black",
borderTopWidth : i%3===0 ? "medium" : "thin",
borderBottomWidth : i%3===2 ? "medium" : "thin",
borderLeftWidth : j%3===0 ? "medium" : "thin",
borderRightWidth : j%3===2 ? "medium" : "thin"
}).val(
data[roop].NUM()===0 ? "" : data[roop].NUM()
).appendTo(newRow);
}
}
}
iのループで縦9行の、9列inputを並べるためのdiv要素newRowを作る。サイズとかはCSSで整える。
jのループではroop=i*9+jについて
masu[roop]に対して、input要素を作って、typeとidを決めてmaxLengthを指定し、cssをマスの位置によって設定し、dataによってvalueを放り込み、newRowの末尾につける
これが一文でできるとは。
css設定のborderStyleとborderColor、cssファイルに書いてみたら適用されませんでした。CSS読み込んだ後にinputを生成したからなんですかね…………CSSの同じ場所に書いたwidthとかheightは適用されてるのに…………謎。
マスに入れた数字をデータに読み込んで、処理して、マスに反映させるというのが大きな流れですねぇ
ボタンが作れる
ボタンのclickイベントに関数を結びつけることでチェックが楽になった
よかったね。
おしまい。
