Cosmic keystrokes

const words = [‘ability’, ‘able’, ‘about’, ‘above’, ‘accept’, ‘according’, ‘account’, ‘across’, ‘action’, ‘activity’, ‘actually’, ‘address’, ‘administration’, ‘admit’, ‘adult’, ‘affect’, ‘after’, ‘again’, ‘against’, ‘agency’, ‘agent’, ‘ago’, ‘agree’, ‘agreement’, ‘ahead’, ‘air’, ‘all’, ‘allow’, ‘almost’, ‘alone’, ‘along’, ‘already’, ‘also’, ‘although’, ‘always’, ‘American’, ‘among’, ‘amount’, ‘analysis’, ‘and’, ‘animal’, ‘another’, ‘answer’, ‘any’, ‘anyone’, ‘anything’, ‘appear’, ‘apply’, ‘approach’, ‘area’, ‘argue’, ‘arm’, ‘around’, ‘arrive’, ‘art’, ‘article’, ‘artist’, ‘as’, ‘ask’, ‘assume’, ‘at’, ‘attack’, ‘attention’, ‘attorney’, ‘audience’, ‘author’, ‘authority’, ‘available’, ‘avoid’, ‘away’, ‘baby’, ‘back’, ‘bad’, ‘bag’, ‘ball’, ‘bank’, ‘bar’, ‘base’, ‘be’, ‘beat’, ‘beautiful’, ‘because’, ‘become’, ‘bed’, ‘before’, ‘begin’, ‘behavior’, ‘behind’, ‘believe’, ‘benefit’, ‘best’, ‘better’, ‘between’, ‘beyond’, ‘big’, ‘bill’, ‘billion’, ‘bit’, ‘black’, ‘blood’, ‘blue’, ‘board’, ‘body’, ‘book’, ‘born’, ‘both’, ‘box’, ‘boy’, ‘break’, ‘bring’, ‘brother’, ‘budget’, ‘build’, ‘building’, ‘business’, ‘but’, ‘buy’, ‘by’, ‘call’, ‘camera’, ‘campaign’];

let score = 0;
let currentWord;
let startTime;

const game = document.getElementById(‘game’);
const player = document.getElementById(‘player’);
const wordInput = document.getElementById(‘word-input’);
const typedWord = document.getElementById(‘typed-word’);
const submitWord = document.getElementById(‘submit-word’);
const scoreDisplay = document.getElementById(‘score’);

let playerX = 10;
let playerY = game.offsetHeight – 50;
const speed = 5;

function placeWord() {
const word = document.createElement(‘div’);
word.textContent = words[Math.floor(Math.random() * words.length)];
word.className = ‘absolute text-2xl’;
word.style.left = `${game.offsetWidth + 10}px`;
word.style.top = `${Math.random() * (game.offsetHeight – 50)}px`;
game.appendChild(word);
return word;
}

function checkCollision(word) {
const playerRect = player.getBoundingClientRect();
const wordRect = word.getBoundingClientRect();
return !(
playerRect.right wordRect.right ||
playerRect.bottom wordRect.bottom
);
}

function startInput(word) {
currentWord = word.textContent;
wordInput.style.display = ‘block’;
typedWord.value = ”;
typedWord.focus();
startTime = Date.now();
}

function endInput() {
wordInput.style.display = ‘none’;
const endTime = Date.now();
const elapsedTime = endTime – startTime;
const timeBonus = Math.max(2000 – elapsedTime, 0);
score += Math.round(1000 + timeBonus);
scoreDisplay.textContent = score;
}

function checkInput() {
if (typedWord.value === currentWord) {
endInput();
}
}

function gameLoop() {
playerY = Math.max(0, Math.min(playerY, game.offsetHeight – player.offsetHeight));
playerX = Math.max(0, Math.min(playerX, game.offsetWidth – player.offsetWidth));
player.style.top = `${playerY}px`;
player.style.left = `${playerX}px`;

const words = Array.from(document.querySelectorAll(‘#game > div:not(#player)’));
words.forEach(word => {
const currentLeft = parseInt(word.style.left);
word.style.left = `${currentLeft – speed}px`;
if (checkCollision(word)) {
startInput(word);
}
if (currentLeft < -word.offsetWidth) {
word.remove();
}
});

if (Math.random() {
if (e.key === ‘w’) playerY -= speed;
if (e.key === ‘a’) playerX -= speed;
if (e.key === ‘s’) playerY += speed;
if (e.key === ‘d’) playerX += speed;
});

typedWord.addEventListener(‘input’, checkInput);
submitWord.addEventListener(‘click’, checkInput);

gameLoop();