①test.html
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=SHIFT-JIS”/>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<link rel=”stylesheet” type=”text/css” href=”test.css”>
<script type=”text/javascript” src=”./test.js”>
</script>
<title>じゃんけんゲーム</title>
<style type=”text/css”>
/* pタグのスタイル設定
p {
color: blue;
line-height: 1.5;
}
*/
</style>
</head><body>
<p>あなたが出したい手をクリックしてね！</p>
<input type=”button” name=”rock” value=”グー” onClick=”battle(1)”>
<br>
<br>
<input type=”button” name=”scissors” value=”チョキ” onClick=”battle(2)”>
<br>
<br>
<input type=”button” name=”paper” value=”パー” onClick=”battle(3)”><div class=”box”></div>
</script>
</body>
</html>
②test.css
p {
color: blue;
line-height: 1.5;
font-size: large;
background-color: yellow;
}
③test.js
function battle(btnNo){
var enemy = Math.floor(Math.random() * (4-1) + 1);
//alert(btnNo);
//alert(enemy);
if (btnNo == enemy){
alert(“あいこー 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
}
if (btnNo == 1) {
if (enemy == 2) {
alert(“かち！ 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
} else if (enemy == 3){
alert(“まけ。。。 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
}
}else if (btnNo == 2){
if (enemy == 3) {
alert(“かち！ 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
} else if (enemy == 1){
alert(“まけ。。。 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
}
}else{
if (enemy == 1) {
alert(“かち！ 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
} else if (enemy == 2){
alert(“まけ。。。 自分は” + numToRockScissorsPaper(btnNo) + “、相手は” + numToRockScissorsPaper(enemy));
}
}
}function numToRockScissorsPaper(num){
if (num == 1) {
return “グー”;
} else if (num == 2) {
return “チョキ”;
} else if (num == 3) {
return “パー”;
}
}
Follow me!
