【もりけん塾73記事】JavaScriptでじゃんけんゲームを日本語になおしてみる

フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。

フロントエンドエンジニアのもりけん（@terrace_tech）先生のツイートより、現場でよく作る機能が以下のものが多いようです。

現場でよく作る機能

・ログインログアウト
・登録、パスワード忘れ、メルアド変更
・検索
・ページネーション
・エラートースト、確認モーダル
・各種保存時バリデーション
・お知らせ
・お気に入り
・ファイルアップロード、ダウンロード
・バーチャライゼーション
・DnDでの並び替え、カスタマイズ

— フロントエンドエンジニア (@terrace_tech) August 21, 2020

目標物として意識してJavaScriptを学んでいこうと思います。

JavaScriptのじゃんけんゲームを読んでみて

私

こりゃわからんわ…

となったので前回に記事でまとめた動画をみてJavaScriptの頭に少しでもなるように半日ほどみました！

さっそく実践でどのように使われているのか、理解できるように…理解したい…！ので調べれるものは調べ、わからないところは考え、それでも不明なときは、もりけん先生に質問してみようと思います！

じゃんけんゲームを作るときにどうやって作るのか

昨日エンジニアになった友人にじゃんけんゲームを理解しようとしている旨を話すと、

と聞かれたので、日本語でじゃんけんゲームを一度作ってみようと思います。

日本語でじゃんけんゲームを作る

じゃんけんゲームは2人以上いて成り立つもので今回作成しようとしているものは

なので、これを軸に考えていきます。

これがあっているかわかりませんが…この文章だと使えそうなJavaScriptは何かを挙げてみたいと思います。

日本語で作成したじゃんけんゲームで使えるJavaScriptは何かを挙げる

上記の日本語が合っているものと過程して…JavaScriptで使うであろうものをあげてみます。

これらをもとに作る…かな？

実際にyoutubeで紹介されていたコードをみてみます。

JavaScriptでじゃんけんゲームのコード

全然前に進めなかったyoutubeのじゃんけんゲームのコードをお借りしました。

 app.js
const game = () => {
let pScore = 0;
let cScore = 0;
//Start the Game
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");
playBtn.addEventListener("click", () => {
introScreen.classList.add("fadeOut");
match.classList.add("fadeIn");
});
};
//Play Match
const playMatch = () => {
const options = document.querySelectorAll(".options button");
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
const hands = document.querySelectorAll(".hands img");
hands.forEach(hand => {
hand.addEventListener("animationend", function() {
this.style.animation = "";
});
});
//Computer Options
const computerOptions = ["rock", "paper", "scissors"];
options.forEach(option => {
option.addEventListener("click", function() {
//Computer Choice
const computerNumber = Math.floor(Math.random() * 3);
const computerChoice = computerOptions[computerNumber];
setTimeout(() => {
//Here is where we call compare hands
compareHands(this.textContent, computerChoice);
//Update Images
playerHand.src = `./assets/${this.textContent}.png`;
computerHand.src = `./assets/${computerChoice}.png`;
}, 2000);
//Animation
playerHand.style.animation = "shakePlayer 2s ease";
computerHand.style.animation = "shakeComputer 2s ease";
});
});
};
const updateScore = () => {
const playerScore = document.querySelector(".player-score p");
const computerScore = document.querySelector(".computer-score p");
playerScore.textContent = pScore;
computerScore.textContent = cScore;
};
const compareHands = (playerChoice, computerChoice) => {
//Update Text
const winner = document.querySelector(".winner");
//Checking for a tie
if (playerChoice === computerChoice) {
winner.textContent = "It is a tie";
return;
}
//Check for Rock
if (playerChoice === "rock") {
if (computerChoice === "scissors") {
winner.textContent = "Player Wins";
pScore++;
updateScore();
return;
} else {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
return;
}
}
//Check for Paper
if (playerChoice === "paper") {
if (computerChoice === "scissors") {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player Wins";
pScore++;
updateScore();
return;
}
}
//Check for Scissors
if (playerChoice === "scissors") {
if (computerChoice === "rock") {
winner.textContent = "Computer Wins";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player Wins";
pScore++;
updateScore();
return;
}
}
};
//Is call all the inner function
startGame();
playMatch();
};
//start the game function
game();

引用：Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial

randomとif...elseがありました！

が他にもたくさん！笑

constとlet

constは定数で数字が変わらないもので、letは変数で数字が変わるもののときに使う。

最初のconstという容器にはプレイヤーとコンピュータのスコアが入っている。

次のconstたちには

 html
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");

ゲームがスタートする容器と

ボタンを押してゲームをする容器

スクリーン画面にdocument上に…ん〜？

このあたりがわからないなぁ

document.querySelector

これが調べてもよくわからない…＞＜

addEventListener

addは加えるでEventListenerは同一要素の同一イベントに対しても複数ひも付けられるイベントハンドラー？？

classList.add

classListはプロパティでこれを使えるメンバーはaddがあって、addはリストに追加するもの。

forEach

this.style.animation

Math.floor

setTimeout(()

if ( === "") {
} else {}

おわりに

じゃんけんゲームがまだわからないのでJavaScriptの本を読んでいく！

もうちょっとわかりやすく書いた記事ないのかを探す！

崩して書いてくれているものを探すぞー！

あとJavaScriptについて理解が深まったら記事をちゃんとまとめて内容もキーワードも意識して作成しなおさないとブログの質が落ちる…

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ