席替え占いシミュレーション

2019年7月6日2019年9月21日

席替えの占いシミュレーションです。

男性の席ボタン、女性の席ボタンを押すと男女それぞれの席がランダムで配置されます。

うまく意中の相手と隣の席になれるかな？？
※chrome推奨です。

席順を表示できる改良版を公開しました。
席替えシミュレーションV2

主なソースとしてjsはこんな感じです。

const line = 6;
const column = 6;
const maxSeats = 40;
var limitCt = 0;
window.onload = function() {
  let k = 1;
  for (let i = 1; i &lt;= line; i++) {
    for (let j = 1; j &lt;= column; j++) {
      const div = document.createElement('div');
      div.id='seat_' + k;
      div.classList.add('box');
      div.classList.add('flex');
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
  const div = document.createElement('div');
  div.classList.add('box');
  div.classList.add('flex');
  div.classList.add('dummy');
  document.body.appendChild(div);

  for (let i = 1; i &lt; 5; i++) {
    const div = document.createElement('div');
    div.id='seat_' + k;
    div.classList.add('box');
    div.classList.add('flex');
    document.body.appendChild(div);
    k++;
  }
}

var setSheat = function(clickedButton) {
  let setCt = true;
  while(setCt  &amp;&amp; limitCt &lt; maxSeats){
    let seatCt = Math.floor(Math.random() * 40 + 1);
    let attr = document.getElementById("seat_" + seatCt);
    if (!attr.classList.contains('man') &amp;&amp; !attr.classList.contains('woman')){
      attr.classList.add(clickedButton);
      setCt = false;
      limitCt++;
    }
  }
};

var reset = function() {
  for (let k = 1; k &lt;= maxSeats; k++) {
      var attr = document.getElementById("seat_" + k);
      if (attr.classList.contains('man')){
        attr.classList.remove('man');
      }
      if (attr.classList.contains('woman')){
        attr.classList.remove('woman');
      }
  }
  limitCt = 0;
};

const line = 6;

const column = 6;

const maxSeats = 40;

var limitCt = 0;

window.onload = function() {

let k = 1;

for (let i = 1; i <= line; i++) {

for (let j = 1; j <= column; j++) {

const div = document.createElement('div');

div.id='seat_' + k;

div.classList.add('box');

div.classList.add('flex');

document.body.appendChild(div);

k++;

}

const div2 = document.createElement('div');

document.body.appendChild(div2);

}

const div = document.createElement('div');

div.classList.add('box');

div.classList.add('flex');

div.classList.add('dummy');

document.body.appendChild(div);

for (let i = 1; i < 5; i++) {

const div = document.createElement('div');

div.id='seat_' + k;

div.classList.add('box');

div.classList.add('flex');

document.body.appendChild(div);

k++;

}

var setSheat = function(clickedButton) {

let setCt = true;

while(setCt && limitCt < maxSeats){

let seatCt = Math.floor(Math.random() * 40 + 1);

let attr = document.getElementById("seat_" + seatCt);

if (!attr.classList.contains('man') && !attr.classList.contains('woman')){

attr.classList.add(clickedButton);

setCt = false;

limitCt++;

}

};

var reset = function() {

for (let k = 1; k <= maxSeats; k++) {

var attr = document.getElementById("seat_" + k);

if (attr.classList.contains('man')){

attr.classList.remove('man');

}

if (attr.classList.contains('woman')){

attr.classList.remove('woman');

}

limitCt = 0;

};

私の今までの成果物はこちらです。
成果物一覧

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

ITパスポート、基本情報技術者、応用情報技術者などIPAが提供する国家資格の過去問を学べるモバイルアプリをリリースしました。
詳しくは下記のプレスリリースをご覧ください。
https://prtimes.jp/main/html/rd/p/000000008.000073303.html

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

成果物

Posted by ちこ

静的コンテンツをWordPress内の記事に埋め込む方法

英単語検定の種類や難易度は？

コメント一覧

まだ、コメントがありません