Shape Game
Choose the correct shapes based on the rules:
Score: 0
Time remaining: 60 seconds
以下がリクエストに基づいた実装例です。ジョークとして、選択された形状が星の場合に「あなたは星の能力を持っているようですね！」というメッセージを表示しています。
```html
<!DOCTYPE html>
<html>
<head>
<title>Shape Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 3em;
margin-top: 50px;
}
p {
font-size: 2em;
margin-top: 20px;
}
#shapes {
display: flex;
justify-content: center;
margin-top: 50px;
}
.shape {
height: 100px;
width: 100px;
margin: 20px;
border-radius: 50%;
box-shadow: 0 0 10px gray;
cursor: pointer;
}
.circle {
background-color: red;
}
.triangle {
background-color: green;
transform: rotate(45deg);
}
.rectangle {
background-color: blue;
}
.star {
background-color: yellow;
transform: rotate(45deg);
position: relative;
}
.star:before, .star:after {
content: "";
position: absolute;
height: 100px;
width: 5px;
top: -22px;
left: 47px;
background-color: yellow;
box-shadow: 0 0 10px gray;
}
.star:before {
transform: rotate(30deg);
}
.star:after {
transform: rotate(-30deg);
}
#score {
font-size: 2em;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Shape Game</h1>
<p>Choose the correct shapes based on the rules:</p>
<div id="shapes"></div>
<div id="score">Score: 0</div>
<p id="timer">Time remaining: 60 seconds</p>
<script>
var shapes = ['circle', 'triangle', 'rectangle', 'star'];
var rules = ['Choose two of the same shape', 'Choose two of different shapes', 'Choose two of the same color', 'Choose two of different colors'];
var score = 0;
var timeLeft = 60;
var timerId;
function newGame() {
score = 0;
timeLeft = 60;
updateScore();
updateTime();
createShapes();
timerId = setInterval(updateTime, 1000);
}
function updateScore() {
document.getElementById('score').innerHTML = 'Score: ' + score;
}
function updateTime() {
timeLeft--;
document.getElementById('timer').innerHTML = 'Time remaining: ' + timeLeft + ' seconds';
if (timeLeft === 0) {
clearInterval(timerId);
endGame();
}
}
function createShapes() {
document.getElementById('shapes').innerHTML = '';
var ruleIndex = Math.floor(Math.random() * rules.length);
var rule = rules[ruleIndex];
var isSameShape = rule.includes('same shape');
var isSameColor = rule.includes('same color');
var numShapes = isSameShape ? 2 : 1;
var numColors = isSameColor ? 2 : 1;
var shapeIndex = Math.floor(Math.random() * shapes.length);
var correctShape = shapes[shapeIndex];
for (var i = 0; i < numShapes; i++) {
var shape = correctShape;
if (!isSameShape) {
while (shape === correctShape) {
shapeIndex = Math.floor(Math.random() * shapes.length);
shape = shapes[shapeIndex];
}
}
var isCorrectColor = Math.random() < (1 / numColors);
var colorIndex = Math.floor(Math.random() * (isCorrectColor ? 1 : 2));
var color = colorIndex === 0 ? shape : getOtherColor(shape);
var shapeDiv = document.createElement('div');
shapeDiv.className = 'shape ' + shape;
shapeDiv.style.backgroundColor = color;
shapeDiv.onclick = function() {
var chosenShape = this.className.split(' ')[1];
if (chosenShape === correctShape) {
score++;
if (correctShape === 'star') {
alert("You seem to have the ability to shine like a star!");
}
} else {
score--;
}
updateScore();
createShapes();
};
document.getElementById('shapes').appendChild(shapeDiv);
}
}
function getOtherColor(color) {
var colors = ['red', 'green', 'blue', 'yellow'];
var index = colors.indexOf(color);
colors.splice(index, 1);
return colors[Math.floor(Math.random() * colors.length)];
}
function endGame() {
var message = '';
if (score >= 20) {
message = "You are a master of non-verbal logical thinking!";
} else if (score >= 10) {
message = "You have so-so non-verbal logical thinking skills. You need more training.";
} else {
message = "You need more training to develop your nonverbal logical thinking skills.";
}
alert(message);
newGame();
}
newGame();
</script>
</body>
</html>
```