記号の表示 javascript

Question

前提・実現したいこと

以下の図形を作成したい。また、別で簡単なコードがあれば知りたい。
suji×sujiの〇の行列に右端から✖を書く問題
例：
suji=5　のとき
〇〇〇〇✖
〇〇〇✖〇
〇〇✖〇〇
〇✖〇〇〇
✖〇〇〇〇

イメージとしては、
・〇の直角二等辺三角形に✖を端に１つずつ足して、向きの違う直角二等辺三角形を足す。
・行でsuji-1まで〇を足し、隣に✖を足し、sujiまで記号がなければ〇をsujiまで追加
の2種類の実装をしてみたいと考えています。よろしくお願いいたします。

発生している問題・エラーメッセージ

〇〇〇〇✖〇
〇〇〇✖〇〇
〇〇✖〇〇〇
〇✖〇〇〇〇
✖〇〇〇〇

一番右端に余分な列があり削除できない。

該当のソースコード

function draw(){
	var suji = parseInt(document.getElementById('suji').value);
    	var answer = "";
	for(var i=1;i<=suji;i++){
        for(var j=1; j<=suji; j++){
        	if (j<=suji-i) {answer = answer + "〇";
            }	
        }
		answer = answer + "✖";

		for(var j=1; j<=suji; j++){
        	if (j<suji& j>=suji-i) {answer = answer + "〇";
            }
        }
		answer = answer +"<br>";
	}
    }

    
	document.getElementById("answer").innerHTML = answer;

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[azuapricot]

「実装をしてみたいと考えています。よろしくお願いいたします。」
そうですか、頑張ってくださいと言われてもしょうがないです。
何ができなくて、何をやってみたかをもう少し詳細に記載しましょう

[python555]

ありがとうございます。
for文の中の2つ目のfor文で右端の制限をかけているが、どうしてもうまくかかりません。。。
よろしくお願いいたします。

[azuapricot]

for(){
for(){
}
}
のシンプルな二重for文でいけそうですけど無理でした？難しく考えすぎなきが

[python555]

if文は使わずに、forの2重ループのみということでしょうか。
方針だけでも教えていただけますでしょうか。

[azuapricot]

回答しましたがやっぱりシンプルな二重ループで問題なさそうです

Answer 1

var answer = "";
var num = 5;
for(var i=0; i < num; i++){
    for(var j=0; j<num; j++){
        if(j + 1 == num - i) {
            answer += "●";
        } else {
            answer += "〇";
        }
    }
    answer += "\n";
}

console.log(answer);

出力結果

〇〇〇〇●
〇〇〇●〇
〇〇●〇〇
〇●〇〇〇
●〇〇〇〇

num = 4にしたらこんなかんじ↓

〇〇〇●
〇〇●〇
〇●〇〇
●〇〇〇

Comments

[python555]

できました！ありがとうございます。

やはり、向きの異なる〇の直角二等辺三角形の間に✖を入れていくことは難しいのでしょうか。もしご存じでしたら教えていただけると嬉しいです。

[azuapricot]

直角二等辺三角形である必要があるんですか・・・？
それとも×にしたい・・・？

[azuapricot]

うーん？

[azuapricot]

それとも二等辺三角形どうしをくっつけたい・・・？

[python555]

例えば、suji=3のとき
〇〇
〇
の直角二等辺三角形の右端に✖を1つずつ足して、
〇〇✖
〇✖
✖
最後に直角二等辺三角形を足して、
〇〇✖
〇✖〇
✖〇〇
のような考え方です。

[azuapricot]

あくまでも３つを区切りたい？と？

[azuapricot]

×のところの処理をif文の中に書くだけではできないんです？そのいまやろうとしてるやつは

[azuapricot]

どうわけようとしているのかはわかりませんが、変数わけたり配列つかったりもう少し複雑になりそうな。

[python555]

どうしてもいうわけではありませんが、初めに自分が思いついた方法がこのような考え方であったので、実現できるのであれば実装してみたいなと思っています。
プログラミングにするには難しい考え方なんですね、ありがとうございます。

[azuapricot]

いえ、工夫次第ではできるんじゃないかなーと思います
ただ繰り返しやif文のところがちょこっと違うだけ？

Answer 2

こんなのどうでしょ？

    function draw(num) {
        let result = document.getElementById('result');
        let circle = '○';
        let cross = 'X';
        let row = [];
        for (let i = 0; i < num; i++) {
            let line = circle.repeat(num);
            line = line + cross + line;
            row.push(line.substr(i + 1, num));
        }
        result.innerHTML = row.join('<br>');
    }
    draw(8);

追記

    function draw(num) {
        let result = document.getElementById('result');
        let circle = '○';
        let cross = 'X';
        let row = [];

        for (let i = num - 1; i > 0; i--) {
            row.push(circle.repeat(i));
        }
        console.log(row.join('\n'));

        row.forEach(function (line, i) {
            row[i] = line + cross;
        });
        row[row.length] = cross;
        console.log(row.join('\n'));

        row.forEach(function (line, i) {
            row[i] = (line + circle.repeat(num)).substr(0, num);
        });
        console.log(row.join('\n'));
    }
    draw(8);

Comments

[python555]

ありがとうございます。

[退会済みユーザー]

それだけかよ笑

[python555]

すいません。。。

このような形で考えてみたのですが実装できなくて、もしご存じでしたらよろしくお願いいたします。
例えば、suji=3のとき
〇〇
〇
の直角二等辺三角形の右端に✖を1つずつ足して、
〇〇✖
〇✖
✖
最後に直角二等辺三角形を足して、
〇〇✖
〇✖〇
✖〇〇

[退会済みユーザー]

それって。無駄にすごーく長いコードになるけど？

[python555]

やはりそうなんですね。ありがとうございます。

あと、letを使ったことがないのと「line = line + cross + line;」の部分がよくわからないのですが、教えていただけますでしょうか。

[退会済みユーザー]

line = circle.repeat(num)
ここでnum（=4）の数だけ、○を連結して、○○○○ とする

line = line + cross + line
ここで
line = ○○○○X○○○○
となる

として、
substrでスタートをひとつずつずらしながら文字列を切り取る

○|○○○X|○○○○
○○|○○X○|○○○
○○○|○X○○|○○
○○○○|X○○○|○

こんな感じ

[python555]

なるほどです！
そういうことだったんですね。こちらのコードは自然な発想ですね。
ありがとうございます。

Answer 3

三角形　＋　区切り　＋　三角形

4の時一辺が5になっちゃったけど調節したらなんとかなりそう（）

var answer = "";
var num = 4;
for(var i=0; i <= num; i++){
    for(var j=0; j<num-i; j++){
        //左上半分の三角形分
        answer += "〇";
    }
    answer += "●";
    
    for(var k=num; k > num - i; k--){
        //右下半分の三角形分
        answer += "〇";
    }
    
    answer += "\n";
}

console.log(answer);

出力結果

〇〇〇〇●
〇〇〇●〇
〇〇●〇〇
〇●〇〇〇
●〇〇〇〇

Comments

[python555]

うまく調整したらできました！丁寧にありがとうございました！

[azuapricot]

なんとかなったようでなによりです◎