-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathleftright.html
147 lines (134 loc) · 3.95 KB
/
leftright.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Left or Right Game</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#game-text {
font-size: 48px;
color: white;
text-transform: uppercase;
}
#score {
position: absolute;
top: 10px;
right: 10px;
color: white;
}
#start-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
#instructions {
max-width: 80%;
}
</style>
</head>
<body>
<div id="start-screen">
<h1>Left or Right Game</h1>
<p id="instructions">
Click the left side of the screen or press "Z" when you see "left".<br>
Click the right side of the screen or press "/" when you see "right".<br>
Be quick! The game speeds up as you score points.
</p>
<button id="start-button">Start Game</button>
</div>
<div id="game" style="display: none;">
<div id="game-text"></div>
<div id="score">Score: 0</div>
</div>
<script>
const game = document.getElementById('game');
const gameText = document.getElementById('game-text');
const scoreElement = document.getElementById('score');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
let score = 0;
let currentDirection;
let interval;
let timeout;
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
function getRandomDirection() {
return Math.random() < 0.5 ? 'left' : 'right';
}
function updateGameText() {
clearTimeout(timeout);
gameText.style.color = 'white';
currentDirection = getRandomDirection();
gameText.textContent = currentDirection;
timeout = setTimeout(() => {
gameText.style.color = 'red';
resetGame();
}, intervalTime());
}
function updateScore() {
score++;
scoreElement.textContent = `Score: ${score}`;
}
function resetGame() {
score = 0;
scoreElement.textContent = `Score: ${score}`;
clearInterval(interval);
interval = setInterval(updateGameText, intervalTime());
}
function intervalTime() {
return 1000 - (10 * score);
}
function handleKeyPress(event) {
if (event.key === 'z' || event.key === '/') {
if ((event.key === 'z' && currentDirection === 'left') || (event.key === '/' && currentDirection === 'right')) {
clearTimeout(timeout);
gameText.style.color = 'green';
updateScore();
clearInterval(interval);
interval = setInterval(updateGameText, intervalTime());
} else {
gameText.style.color = 'red';
resetGame();
}
}
}
function handleScreenTap(event) {
const screenWidth = window.innerWidth;
const tappedLeft = event.clientX < screenWidth / 2;
if ((tappedLeft && currentDirection === 'left') || (!tappedLeft && currentDirection === 'right')) {
clearTimeout(timeout);
gameText.style.color = 'green';
updateScore();
clearInterval(interval);
interval = setInterval(updateGameText, intervalTime());
} else {
gameText.style.color = 'red';
resetGame();
}
}
if (isMobile) {
document.addEventListener('click', handleScreenTap);
} else {
document.addEventListener('keydown', handleKeyPress);
}
function startGame() {
startScreen.style.display = 'none';
game.style.display = 'block';
resetGame();
}
startButton.addEventListener('click', startGame);
resetGame();
</script>
</body>
</html>