メサイア・ワークス

css3+ECMAScriptで数合わせ(神経衰弱)を作ろうとしたら、上手く行かない〜。自動生成したdiv要素にaddEventListener内で、1枚目のカードを指定するでエラーになる！

2020年5月22日に admin が投稿

css3+ECMAScriptで数合わせ(神経衰弱)を作ろうとしたら、上手く行かない〜。自動生成したdiv要素にaddEventListener内で、1枚目のカードを指定するでエラーになる！分からんなら、放置して違う方続きを読む css3+ECMAScriptで数合わせ(神経衰弱)を作ろうとしたら、上手く行かない〜。自動生成したdiv要素にaddEventListener内で、1枚目のカードを指定するでエラーになる！→

カードのシャッフル・アルゴリズムFisher–Yates(フィッシャー・イェーツ)を試してみた。意外とランダムはあってもシャッフルって初めてかも…。

2020年5月20日に admin が投稿

カードのシャッフル・アルゴリズムFisher–Yates(フィッシャー・イェーツ)を試してみた。意外とランダムはあってもシャッフルって初めてかも…。

// 同じ番号のカードを2枚ずつ生成。
const card_num = 10;
let card = [];
for(let i=0; i<(card_num/2); i++){
  card[i] = i;
  card[(card_num-1) - i] = i;
}
// [0, 1, 2, 3, 4, 4, 3, 2, 1, 0]
console.log(card);

// カードをシャッフル。Fisher–Yates(フィッシャー・イェーツ)アルゴリズムを用いる方法
// カード枚数だけ入れ替えをする。後ろから1枚ずつ(num-1,num-2,num-3...2,1,0)
for(let i = card.length - 1; i > 0; i--) {
    // 交換するカードを、ランダムで決定      
    var i_change = Math.floor(Math.random() * (i + 1));
    // 対象のカード2枚を、入れ替える(分割代入)
    [card[i], card[i_change]] = [card[i_change], card[i]] ;
}
console.log(card);

// 同じ番号のカードを2枚ずつ生成。

const card_num = 10;

let card = [];

for(let i=0; i<(card_num/2); i++){

card[i] = i;

card[(card_num-1) - i] = i;

}

// [0, 1, 2, 3, 4, 4, 3, 2, 1, 0]

console.log(card);

// カードをシャッフル。Fisher–Yates(フィッシャー・イェーツ)アルゴリズムを用いる方法

// カード枚数だけ入れ替えをする。後ろから1枚ずつ(num-1,num-2,num-3...2,1,0)

for(let i = card.length - 1; i > 0; i--) {

// 交換するカードを、ランダムで決定

var i_change = Math.floor(Math.random() * (i + 1));

// 対象のカード2枚を、入れ替える(分割代入)

[card[i], card[i_change]] = [card[i_change], card[i]] ;

}

console.log(card);

firebase(googleのサーバレス)で、リアルタイムチャットのサンプルがあったので実装してみた。

2020年5月19日に admin が投稿

firebase(googleのサーバレス)で、リアルタイムチャットのサンプルがあったので実装してみた。こういうのは有料動画だよね～。 https://dotinstall.com/lessons/basic_fire 続きを読む firebase(googleのサーバレス)で、リアルタイムチャットのサンプルがあったので実装してみた。→

JSが急に分かりづらくなった理由(ES6以降とNode.js、それ以前の話)

2020年5月19日に admin が投稿

JSが急に分かりづらくなった理由(ES6以降とNode.js、それ以前の話) 参考URL https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f 1, j 続きを読む JSが急に分かりづらくなった理由(ES6以降とNode.js、それ以前の話)→

ブラウザに100*100pxの四角を表示して、クリックする度に色がランダムに変わるサンプル。こうやってJS/CSSを組み合わせるとフロントエンド感ある。

2020年5月19日に admin が投稿

ブラウザに100*100pxの四角を表示して、クリックする度に色がランダムに変わるサンプル。こうやってJS/CSSを組み合わせるとフロントエンド感ある。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js test</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="color" id="color">skyblue</div>
  <div class="box" id="target"></div>
  <script>
    'use script';
    function changeColor(){
      // #000000-#ffffffをランダムで出力
      var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);
      // 文字列と色で表示する。
      document.getElementById('color').textContent= randomColor;
      document.getElementById('target').style.background = randomColor;
      //document.getElementById('target').style.borderRadius = '50%';
    }
    // 最初にランダムな色を設定
    window.addEventListener('load', changeColor, false);
    // クリックされた時もランダムな色を設定
    document.getElementById('target').addEventListener('click', () => {changeColor(); });

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

.box{

width: 100px;

height: 100px;

background-color: skyblue;

cursor: pointer;

}

</style>

</head>

<body>

<div class="color" id="color">skyblue</div>

'use script';

function changeColor(){

// #000000-#ffffffをランダムで出力

var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);

// 文字列と色で表示する。

document.getElementById('color').textContent= randomColor;

document.getElementById('target').style.background = randomColor;

//document.getElementById('target').style.borderRadius = '50%';

}

// 最初にランダムな色を設定

window.addEventListener('load', changeColor, false);

// クリックされた時もランダムな色を設定

document.getElementById('target').addEventListener('click', () => {changeColor(); });

</script>

</body>

</html>