タグ: programming

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 moreScores = [77, 88];
  const scores = [70,90,80,85, ...oreScores];
  const [first, ...others] = scores;

  console.log(first);
  console.log(others);
}

Javasript 分割代入

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';

{
let start = 'Tokyo';
let goal = 'Osaka';

//start = goal;
//goal = start;

//let temp = "";
//temp = start;
//start = goal;
//goal = temp;

[goal, start] = [start, goal]

console.log(start);
console.log(goal);
}

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];
  // const first = scores[0];
  // const second = scores[1];
  // const third = scores[2];
  // const fourth = scores[3];
  const [first, second, third, fourth] = scores;

  console.log(first);
  console.log(second);
  console.log(third);
  console.log(fourth);
}

Javascript filter()

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 prices = [100, 150, 200];

  // const pricesOver150 = [];
  // prices.forEach((price) => {
  //   if (price >= 150) {
  //     pricesOver150.push(price);
  //   }
  // });

  const pricesOver150 = prices.filter((price) => {
    return price >= 150;
  });

  console.log(pricesOver150);
}

Javascript map()

<!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 prices = [100, 150, 200];

  // const pricesWithTax = [];
  // prices.forEach((price) => {
  //   pricesWithTax.push(price * 1.1);
  // });

  const pricesWithTax = prices.map((price) => {
    return price * 1.1;
  });

  console.log(pricesWithTax);
}

Javascript join()､split()

imdex.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 names = ['Taro', 'Jiro', 'Saburo'];

  // // Taro|Jiro|Saburo
  // console.log(names.join('|'));
  // console.log(names.join());
  // console.log(names.join(''));

  const names = 'Taro|Jiro|Saburo';
  console.log(names.split('|'));
}

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]);
}
}

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

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;
    
}