JavaScriptでじゃんけんゲームを作ろう！

JavaScriptを使ってじゃんけんゲームを作ろう！

手順

1.新規にjyankenフォルダを作成。
2.jyankenフォルダの中にimagesフォルダを作成する。
3.以下をダウンロード展開し、中に入っている３枚の画像をimagesフォルダに入れる。
(コピペを使って配置できる)

hands.zip

1 ファイル 1.08 MB

ダウンロード

4.jyankenフォルダの中にcssフォルダを作成し、その中にmain.cssを作成する。
記述する内容は以下

body{
	display:flex;
	height:100vh;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	font-family: "Nico Moji";
	background:#b7f3a9;
	color:#333;
}
form{
	font-size:6vmin;
}
input{
	width:4vmin;
	height:4vmin;
	position:relative;
	top:2px;
}
button{
	margin-top:5vmin;
	width:25vmin;
	height:8vmin;
	font-size:5vmin;
	font-family: "Nico Moji";
	color:#333;
}
div{
	display:flex;
	width:80%;
	justify-content:space-around;
}
img{
	width:35vmin;
	height:35vmin;
}
p{
	font-size:7vmin;
}

5.jyankenフォルダの中にindex.htmlを作成する。記述する内容は以下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
<title>じゃんけんぽん</title>
</head>
<body>
<form>
<input type="radio" name="hand" value="0">ぐー<br>
<input type="radio" name="hand" value="1">ちょき<br>
<input type="radio" name="hand" value="2">ぱー<br>
<button type="submit">ショウブ</button>
</form>
<div>
<img src="images/choki.png">
<img src="images/pa.png">
</div>
<p>アナタのかちです！</p>
<script>
//厳格モードでの実行
'use strict';
//画像の名前
const picts=['gu','choki','pa'];
//結果の文言
const results=['あいこ','アナタのまけです...','あなたのかちです！'];
//formを取得(今回は一つしかないので[0])
const form=document.forms[0];
//img要素を取得(今回は２つあるので配列として取得)
const images=document.querySelectorAll('img');
//div要素を取得(今回は一つしかない 同意-> document.getElementsByTagName('div')[0])
const imgBox=document.querySelector('div');
//最初は非表示
imgBox.style.display='none';
//p要素を取得(今回は一つしかない)
const result=document.querySelector('p');
//最初は非表示
result.style.display='none';
//フォームにサブミットボタンを押したときの挙動を登録
form.addEventListener('submit',function(eve){
  //submitボタンを押した時にページ遷移するのを防ぐ
  eve.preventDefault();
  //ラジオのvalueはform.ネーム属性.valueで取得できる。それを整数に変換
  let radioValue=form.hand.value;
  //何も選択しなかった場合valueは空文字になる
  if(radioValue===''){return;}
  let userHand=Number(radioValue);
  //Math.floorで小数点以下を切り捨て整数に変換
  let pcHand=Math.floor((Math.random()*3));
  //画像を決定
  for(let i=0;i<images.length;i++){
    images[i].src= 'images/' + picts[i==0? userHand:pcHand] + '.png';
  }
  //imgBox要素を表示
  imgBox.style.display='flex';
  //勝敗の文言の作成
  result.textContent=results[(userHand+3 -pcHand) % 3];
  //文言の表示
  result.style.display='block';
});
</script>
</body>
</html>