Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 3,125 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<html><head><base href="https://websim.ai/cosmic-keystrokes"><title>Cosmic Keystrokes: Intergalactic Speed Typing Adventure</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @keyframes slide {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  .sliding-bg {
    background-image: url('https://images.websim.ai/1920x1080_space_background.jpg');
    background-repeat: repeat-x;
    animation: slide 60s linear infinite;
  }
</style>
</head>
<body class="bg-black text-white font-sans">
  <div class="sliding-bg absolute inset-0 z-0"></div>
  <div class="relative z-10 h-screen flex flex-col items-center justify-center">
    <h1 class="text-4xl font-bold mb-8">Cosmic Keystrokes</h1>
    <div id="game-container" class="w-full max-w-2xl bg-gray-800 bg-opacity-75 p-6 rounded-lg">
      <div id="word-display" class="text-3xl font-mono mb-4 h-12 text-center"></div>
      <input type="text" id="word-input" class="w-full bg-gray-700 text-white text-2xl p-2 rounded" autocomplete="off">
      <div class="flex justify-between mt-4">
        <div>Score: <span id="score">0</span></div>
        <div>Time: <span id="time">60</span>s</div>
      </div>
    </div>
    <button id="start-button" class="mt-8 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
      Start Game
    </button>
  </div>

  <script>
    const words = ['galaxy', 'nebula', 'asteroid', 'comet', 'planet', 'star', 'supernova', 'quasar', 'pulsar', 'cosmos'];
    let currentWord = '';
    let score = 0;
    let timeLeft = 60;
    let gameInterval;

    const wordDisplay = document.getElementById('word-display');
    const wordInput = document.getElementById('word-input');
    const scoreDisplay = document.getElementById('score');
    const timeDisplay = document.getElementById('time');
    const startButton = document.getElementById('start-button');

    function getRandomWord() {
      return words[Math.floor(Math.random() * words.length)];
    }

    function updateGame() {
      if (timeLeft > 0) {
        timeLeft--;
        timeDisplay.textContent = timeLeft;
      } else {
        endGame();
      }
    }

    function startGame() {
      score = 0;
      timeLeft = 60;
      scoreDisplay.textContent = score;
      timeDisplay.textContent = timeLeft;
      wordInput.value = '';
      wordInput.disabled = false;
      startButton.disabled = true;
      nextWord();
      gameInterval = setInterval(updateGame, 1000);
      wordInput.focus();
    }

    function endGame() {
      clearInterval(gameInterval);
      wordDisplay.textContent = 'Game Over!';
      wordInput.disabled = true;
      startButton.disabled = false;
    }

    function nextWord() {
      currentWord = getRandomWord();
      wordDisplay.textContent = currentWord;
    }

    wordInput.addEventListener('input', () => {
      if (wordInput.value.toLowerCase() === currentWord) {
        score++;
        scoreDisplay.textContent = score;
        wordInput.value = '';
        nextWord();
      }
    });

    startButton.addEventListener('click', startGame);
  </script>
</body></html>