プログラミングテストに備えてメモ

今度プログラミングのテストをする機会があるのでその時のカンニング用にメモしておきます。
ブログにはこんな使い方もあるのですね。終わってしまった never まとめみたいだな

・html,css,Javascript実行環境
超絶初心者のためのフロント入門（HTML、CSS、JavaScript） - Qiita

・ブラウザ上で動くゲーム
【初心者向け】JavaScript(jQuery)でコインめくりゲームを作ってみました | 株式会社オーツー｜スタッフブログ

・jQueryを使ったゲーム
美しすぎるカードゲームjQueryで作る神経衰弱｜福岡のホームページ制作会社・メディア総研株式会社マグネッツ事業部

・javascriptの簡単なタイマー
実際に書いて動かすのに1時間もかかったけど笑
カウントダウンタイマー－JavaScript入門

・神経衰弱を作成している、これも移して動かしてみた。
美しすぎるカードゲームjQueryで作る神経衰弱｜福岡のホームページ制作会社・メディア総研株式会社マグネッツ事業部

・これもゲーム、直でコードを書いてみる
50行余りでこんなゲームが作成できるとはすごいな。
参照URL
jQueryで簡単に暇つぶしゲームを作ってみた - Qiita

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Dobble</title>
  </head>

  <body>

    <p class="title">Dobble</p>

    <p class="text"></p>

    <button class="start">開始する</button>

    <div class="game">
      <div class="board board_1"></div>

      <p class="line"></p>

      <div class="board board_2"></div>
    </div>


  </body>

  <script src="js/jquery.min.js"></script>
  <script src="js/script.js"></script>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  font-family: Verdana,
    Roboto,
    "Droid Sans",
    "游ゴシック",
    YuGothic,
    "メイリオ",
    Meiryo,
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN",
    "ＭＳ Ｐゴシック",
    sans-serif;
}

img {
  width: 20vw;
  height: 20vh;
}

.title {
  font-weight: bold;
}

.start {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  /*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.game {
  width: 100%;
}

.board {
  width: 90vw;
  height: 45vh;
  margin: 0 auto;
}

.line {
  border-top: medium solid #000000;
}

$('.start ').on("click", function () {

  const startTime = performance.now(); //現在の時間を取得
  $('.text').text("");
  $('.start').hide(); //ボタンを隠す

//配列の入れ替えを行う
  function shuffle(array) {
    for (let i = array.length - 1; i >= 0; i--) {
      let rand = Math.floor(Math.random() * (i + 1)); //ランダムに出した数字を切り捨てて整数にする
      // 配列の数値を入れ替える
      [array[i], array[rand]] = [array[rand], array[i]]
    }
    return array;
  }

  function board_set() {
    const board = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    array = shuffle(board);
    let board_1 = []
    let board_2 = []
    for (let j = 0; j <= 6; j++) {
      board_1.push(array[j])
      board_2.push(array[j + 7])//7つの要素を持つリストを2つ作成
    }
    same = board[14]
    board_1.push(same)
    board_2.push(same) //リストの最後に1つ加えて同じ要素にする
    board_1 = shuffle(board_1);
    board_2 = shuffle(board_2);//再びシャッフル
    return {
      board_1,
      board_2
    }
  }

  let {
    board_1,
    board_2
  } = board_set();

  for (let k = 0; k <= 7; k++) {
　//シャッフルされた配列にimgを差し込んでいく
    $('.board_1').append('<img class="img_' + board_1[k] + '" src="img/' + board_1[k] + '.png"></img>');
    $('.board_2').append('<img class="img_' + board_2[k] + '" src="img/' + board_2[k] + '.png"></img>');
  }

  $('.img_' + same).on("click", function () {
    const endTime = performance.now();
    const time = Math.round((endTime - startTime) / 100) / 10;
    $('.text').text(time + "秒でクリア！");
    for (let k = 0; k <= 7; k++) {
      $('.board_1').empty();
      $('.board_2').empty();
    }
    $('.start').show()
    $('.start').text("リセット");
  });
});

紫色のつぶやき

どうせそんな悩みは1年後にはどうでもよくなってる

プログラミングテストに備えてメモ