Brain Battles is a game that improves reaction time and physiologically changes your brain by inducing the creation of new neural pathways.
You compete against another player to see how quickly you can recognize a certain pattern and adjust to changing conditions.
- Vanilla
Javascript
for overall structure and game logic, HTML5
for DOM manipulation and rendering,CSS
to design layout and style elements.
Play with friends
I rewarded players for maintaining a streak and subtracted points and reset the streak on incorrect input.
function handleCorrectAnswer() {
if (streakCount <= 20) {
streakCount += 10;
}
p1ScoreCount += streakCount;
}
function handleWrongAnswer() {
streakCount = 0;
if (p1ScoreCount > 0) {
p1ScoreCount -= 10;
}
}
Animations for correct and incorrect answers.
.correct-answer {
transform: scale(1.07, 1.07);
transition: transform 140ms ease-out
}
.incorrect-answer {
animation: shake .08s ease 0s infinite;
}
@keyframes shake {
0% {transform: translate(-17px,0px)};
33% {transform: translate(17px,0px)};
66% {transform: translate(-17px,0px)};
100% {transform: translate(17px,0px)};
}
Core logic of the game was broken down into single functions to follow Single Responsiblity Principle.
export function afterP1Input(e) {
handleKeyDown(e);
if (userInput) {
if (checkCorrectAnswer()) {
renderPlayer1Arrow();
correctAnswerTransition();
handleCorrectAnswer();
}else {
incorrectAnswerAnimation();
handleWrongAnswer();
}
p1Score.innerHTML = p1ScoreCount;
userInput = undefined;
}
}
- Time attack game mode
- More games
- Play against an AI
- Allow players to play together over LAN