Web プログラミング

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

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

 

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

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

 

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

 

こりゃわからんわ…

 

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

 

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

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

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

 

日本語でじゃんけんゲーム作るとどうやって作る?

 

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

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

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

  • プレイヤー
  • コンピューター

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

 

メモ

①コンピュータは、

  • グー
  • チョキ
  • パー

をランダムに1つ出す設定をする。

②プレイヤー側は

  • グー
  • チョキ
  • パー

のいづれかのボタンを1つ選ぶとコンピュータと勝負ができるような設定にする。

③コンピュータとプレイヤーの勝敗を決めるために、

  • win
  • draw
  • loose

を表示する。

④勝利した方にスコアをつけてあげる

⑤再度、じゃんけんゲームが始められるような設定を作る

 

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

 

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

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

 

  • ramdom(0~1未満の乱数)
  • if...else if命令(もしグーがでたら…)

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

 

実際に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:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada