以下がHTML,CSS,JavaScriptで実装したプログラムです。なお、Math.random()を用いてランダムな図形を生成しています。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>非言語的論理的思考能力ゲーム</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
margin-bottom: 50px;
}
#container {
margin: 0 auto;
width: 80%;
height: 500px;
border: 1px solid #333;
position: relative;
}
.shape {
width: 80px;
height: 80px;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.circle {
background-color: #FFB6C1;
border-radius: 50%;
}
.square {
background-color: #ADD8E6;
border-radius: 0;
}
.triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid #90EE90;
}
.rotate {
transform: rotate(45deg);
}
.scale-up {
transform: scale(1.2);
}
.scale-down {
transform: scale(0.8);
}
.hidden {
display: none;
}
#score {
margin-top: 20px;
font-size: 24px;
}
#time {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>非言語的論理的思考能力ゲーム</h1>
<div id="container"></div>
<div id="score"></div>
<div id="time"></div>
<script>
const container = document.querySelector("#container");
const score = document.querySelector("#score");
const time = document.querySelector("#time");
const shapes = ['circle', 'square', 'triangle'];
const colors = ['#FFB6C1', '#ADD8E6', '#90EE90'];
const patterns = ['rotate', 'scale-up', 'scale-down'];
const acclamation = ["すごい！","うまい！","やったね！","見事！"]
const WRONG_POINT = 10; //間違えた場合の減点
let currentScore = 0;
let startTime;
//ランダムな図形を生成し画面上に表示
function generateShape() {
const shape = shapes[Math.floor(Math.random() * shapes.length)];
const color = colors[Math.floor(Math.random() * colors.length)];
const pattern = patterns[Math.floor(Math.random() * patterns.length)];
const newShape = document.createElement("div");
newShape.classList.add("shape", shape);
newShape.style.backgroundColor = color;
newShape.addEventListener("click", handleClick);
newShape.dataset.pattern = pattern;
container.appendChild(newShape);
setShapePosition(newShape);
setShapePattern(newShape, pattern);
}
//図形の配置位置をランダムに決定
function setShapePosition(shape) {
const maxX = container.clientWidth - shape.offsetWidth;
const maxY = container.clientHeight - shape.offsetHeight;
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
shape.style.left = randomX + "px";
shape.style.top = randomY + "px";
}
//図形のパターンをランダムに指定
function setShapePattern(shape, pattern) {
shape.classList.add(pattern);
}
//図形をクリックしたときの処理
function handleClick(event) {
const target = event.target;
const pattern = target.dataset.pattern;
const expectedClass = patterns.includes(pattern) ? `shape ${patterns.join(' ')} ${pattern}` : `shape ${pattern}`;
if (target.classList.value === expectedClass){
currentScore++;
if (currentScore%5 === 0){
const acclamationText = acclamation[Math.floor(Math.random() * acclamation.length)];
alert(acclamationText + "スコア" + currentScore);
}
score.textContent = "スコア: " + currentScore;
container.removeChild(target);
generateShape();
} else {
currentScore = Math.max(0, currentScore - WRONG_POINT);
score.textContent = "スコア: " + currentScore;
}
}
//時間をカウントダウンする処理
function countdown() {
const currentTime = new Date().getTime();
const remainingTime = 45 - Math.floor((currentTime - startTime) / 1000);
time.textContent = "残り時間: " + remainingTime + "秒";
if (remainingTime === 0) {
container.removeEventListener("click", handleClick);
time.style.color = "red";
if (currentScore === 0) {
alert("スコア0！！頑張りましょう。")
} else {
alert(`おめでとうございます！スコアは ${currentScore} 点です！`);
}
} else {
setTimeout(countdown, 1000);
}
}
//ゲームを開始する処理
function startGame() {
startTime = new Date().getTime();
generateShape();
setTimeout(countdown, 1000);
}
//ゲームの開始ボタンをクリックしたときの処理
const startButton = document.createElement("button");
startButton.textContent = "ゲーム開始";
startButton.addEventListener("click", function() {
container.innerHTML = "";
currentScore = 0;
score.textContent = "スコア: " + currentScore;
time.textContent = "";
time.style.color = "#333";
container.addEventListener("click", handleClick);
startGame();
});
document.body.appendChild(startButton);
</script>
</body>
</html>
```
実行例は以下のようになります。
[](https://gyazo.com/30c076dc959e9a614acb8de0bef2a0cb)
