カテゴリー: programming

Javascript プロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = {
    math: 80,
    english: 90,
  };

  scores.physics = 70;
  delete scores.english;
  console.log(scores);
}

Javascript 配列の値

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];
  let sum = 0;
// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 sum += score;
 console.log(`${index}: ${score}`);
});

console.log(`Sum: ${sum}`);
console.log(`Average: ${sum / scores.length}`);
}

Javascript forEach()

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];

// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 console.log(`${index}: ${score}`);
});
}

Javascript 配列と反復処理

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];

// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.push(77, 88);

for(let i = 0; i <= 4; i++){
  console.log(scores[i]);
}
}

Javascript 配列の要素にアクセス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];

  console.log(scores[2]);
  console.log(scores.length);
  scores[1] = 95;
  console.log(scores);
}

Javascript 配列

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [
    70, 
    90, 
    80, 
    85,
  ];

  console.log(scores);
}

マルチプレイヤー数当てゲーム

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>マルチプレイヤー数当てゲーム</title>
</head>
<body>
<header>
  <h1>マルチプレイヤー数当てゲーム</h1>
</header>

<div class="player-registration">
  <input type="text" id="playerName" placeholder="プレイヤー名">
  <input type="file" id="profileImage" accept="image/*">
  <button id="submitPlayer">プレイヤー登録</button>
</div>

<!-- モーダルウィンドウの追加 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <p id="modalMessage"></p>
  </div>
</div>

<section class="game-rules">
  <h2>ゲームのルール</h2>
  <p>1から100までの数字を10回以内に当ててください。正解するとポイントが獲得できます。</p>
</section>

<div class="game-container">
  <div class="user-stats">
    <p>総プレイゲーム数: <span id="totalGamesPlayed">0</span></p>
    <p>正解総数: <span id="totalCorrectGuesses">0</span></p>
  </div>

  <div class="live-feedback" id="liveFeedback"></div>

  <input type="number" id="guessInput" min="1" max="100" placeholder="あなたの予想">
  <button id="guessButton">予想する</button>
  <p id="message"></p>
  <p>残り予想回数: <span id="remainingGuesses">10</span></p>
</div>

<div class="leaderboard">
  <h2>トッププレイヤー</h2>
  <ul id="topPlayers"></ul>
</div>

<footer>
  <p>© 2023 数当てゲーム開発者</p>
  <p>お問い合わせ: <a href="mailto:contact:tyosuke2010@gmail.com">contact:tyosuke2010@gmail.com</a></p>
</footer>

<script src="script.js"></script>
</body>
</html>

script.js

document.addEventListener('DOMContentLoaded', () => {
    let secretNumber = Math.floor(Math.random() * 100) + 1;
    let guessesRemaining = 10;
    let gamesPlayed = 0;
    let correctGuesses = 0;

    const playerNameInput = document.getElementById('playerName');
    const submitPlayerButton = document.getElementById('submitPlayer');
    const guessInput = document.getElementById('guessInput');
    const guessButton = document.getElementById('guessButton');
    const message = document.getElementById('message');
    const totalGamesPlayed = document.getElementById('totalGamesPlayed');
    const totalCorrectGuesses = document.getElementById('totalCorrectGuesses');
    const remainingGuesses = document.getElementById('remainingGuesses');
    const liveFeedback = document.getElementById('liveFeedback');

    submitPlayerButton.addEventListener('click', () => {
        const playerName = playerNameInput.value;
        if (playerName) {
            alert(`ようこそ、${playerName}さん！`);
            playerNameInput.disabled = true;
            submitPlayerButton.disabled = true;
        } else {
            alert('プレイヤー名を入力してください。');
        }
    });

    guessButton.addEventListener('click', () => {
        const userGuess = parseInt(guessInput.value);
        if (!userGuess || userGuess < 1 || userGuess > 100) {
            alert('1から100までの数字を入力してください。');
            return;
        }

        guessesRemaining--;
        remainingGuesses.textContent = guessesRemaining;

        if (userGuess === secretNumber) {
            correctGuesses++;
            totalCorrectGuesses.textContent = correctGuesses;
            message.textContent = `正解！ ${userGuess} が正しい数字です！`;
            resetGame();
        } else if (guessesRemaining === 0) {
            message.textContent = `ゲームオーバー！正しい数字は ${secretNumber} でした。`;
            resetGame();
        } else {
            message.textContent = userGuess > secretNumber ? 'もっと低い数字です！' : 'もっと高い数字です！';
            liveFeedback.textContent = `あなたの予想: ${userGuess}`;
        }
    });

    function resetGame() {
        secretNumber = Math.floor(Math.random() * 100) + 1;
        guessesRemaining = 10;
        remainingGuesses.textContent = guessesRemaining;
        guessInput.value = '';
        gamesPlayed++;
        totalGamesPlayed.textContent = gamesPlayed;
    }
});

style.css

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    text-align: center;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    margin-bottom: 15px;
}

header h1 {
    margin: 0;
}

.player-registration, .game-container, .game-rules, .leaderboard {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

input[type='text'], input[type='number'], input[type='file'], button {
    display: block;
    width: 90%;
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

button {
    background-color: #5f9ea0;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #486f70;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
}

/* 追加スタイル */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 5px;
    
}

Javascript 関数式

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  console.log(double(10));
  //関数宣言
  function double(num){
    return num * 2;
  }

  // //関数式
  // const double = function(num){
  //   return num * 2;
  // };
}

Javascirpt 引数のスコープ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  function double(num){
    return num * 2;
  }
  function triple(num){
    return num * 3;
  }
  console.log(double(10));
  //console.log(num);
  console.log(triple(20));
}

Javascirpt return

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  function calcurateTotal(price, amount, rate = 1.1) {
    // if (amount >= 100) {
    //   return price * amount;
    // } else {
    //   return price * amount * rate;
    // }

    if (amount >= 100) {
      // 早期リターン
      return price * amount;
    }
    return price * amount * rate;
  }

  console.log(calcurateTotal(100, 100));
  console.log(calcurateTotal(1000, 10));
}