簡単なWebブラウザゲームを作りました。
簡単に出来ますので是非挑戦してみてください。
<!-- JavaScriptで当たりBoxを見つける -->
<!-- 新規作成 2021/6/26 -->
<!-- Author 乃木坂好きのITエンジニア -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Practice</title>
<style>
body {
display:flex;
flex-wrap:wrap;
}
.box {
width:100px;
height:100px;
background-color:lightcoral;
cursor:pointer;
transition: 0.8s;
margin: 0 8px 8px 0;
text-align: center;
line-height: 100px;
}
.win{
background:gold;
border-radius: 50%;
transform:rotate(360deg);
}
.lose{
transform:scale(0.9);
}
</style>
</head>
<body>
<script>
'use strict';
const num = 7;
// 0-7までの数字をランダムに表示する
const winner = Math.floor(Math.random() * num);
for(let i=0;i<num;i++){
const div = document.createElement('div');
div.classList.add('box');
div.addEventListener('click',() => {
if (i === winner){
div.textContent = 'Win!';
div.classList.add('win');
} else {
div.textContent = 'Lose!';
div.classList.add('lose');
}
});
document.body.appendChild(div);
}
</script>
</body>
</html>
num変数を変えて数を増やしたり、減らしたりすることもできます。
当たり、外れのメッセージを変えても良いでしょう。
↧