API tools faq
paste
Advertisement
asimryu

word game

asimryu
Apr 16th, 2023
978
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Word Game</title>
  6.     <style>
  7.         * {
  8.             box-sizing: border-box;
  9.         }
  10.         html, body {
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.         body {
  15.             margin: 0;
  16.             padding: 0;
  17.            
  18.         }
  19.         #wordspace {
  20.             width: 100%;
  21.             height: 100%;
  22.             font-size: 1.5rem;
  23.             font-weight: bold;
  24.             background-color: black;
  25.             color: white;
  26.             padding: 0 50px;
  27.         }
  28.         #footer {
  29.             position: fixed;
  30.             bottom: 0;
  31.             left: 0;
  32.             width: 100%;
  33.             height: 50px;
  34.             background-color: #333;
  35.             display: flex;
  36.             justify-content: center;
  37.             align-items: center;
  38.             flex-direction: row;
  39.             align-items: stretch;
  40.         }
  41.         #footer > div {
  42.             flex: 1;
  43.             display: flex;
  44.             justify-content: center;
  45.             align-items: stretch;              
  46.         }
  47.         #footer .btns {
  48.             justify-content: start;
  49.         }
  50.         #footer .typeinput input {
  51.             width: 100%;
  52.             font-size: 1.2rem;
  53.         }
  54.         #footer .score {
  55.             justify-content: end;
  56.             line-height: 50px;
  57.             padding-right: 20px;
  58.             color: yellow;
  59.             font-size: 1.2rem;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <div id="wordspace"></div>
  65.     <div id="footer">
  66.         <div class="btns">     
  67.             <button id="start">Start</button>
  68.             <button id="stop">Stop</button>
  69.         </div>
  70.         <div class="typeinput">
  71.             <input type="text" id="typeinput" autofocus>
  72.         </div>
  73.         <div class="score">
  74.             <span>Score: </span>
  75.             <span id="score">0</span>
  76.         </div>
  77.     </div>
  78.     <script>
  79.         let timer4words = null;
  80.         let timer4drop = null;
  81.         document.getElementById('start').addEventListener('click', () => {
  82.             showWords();
  83.             timer4words = setInterval(() => {
  84.                 showWords();
  85.             }, 4000);
  86.             timer4drop = setInterval(() => {
  87.                 moveWords();
  88.             }, 1000);
  89.             document.getElementById('typeinput').focus();
  90.         });
  91.         document.getElementById('stop').addEventListener('click', () => {
  92.             clearInterval(timer4words);
  93.             clearInterval(timer4drop);
  94.         });
  95.  
  96.         document.getElementById('typeinput').addEventListener('keyup', (e) => {
  97.             if (e.keyCode === 13) {
  98.                 let words = document.getElementsByClassName('word');
  99.                 for (let i = 0; i < words.length; i++) {
  100.                     let word = words[i];
  101.                     if (word.innerText === e.target.value) {
  102.                         word.remove();
  103.                         document.getElementById('score').innerText = parseInt(document.getElementById('score').innerText) + 1;
  104.                     }
  105.                     if( word.style.top >= window.innerHeight-50) {
  106.                         word.remove();
  107.                     }
  108.                 }
  109.                 e.target.value = '';
  110.                 console.log(e.target.value);
  111.             }
  112.         });
  113.  
  114.         const getWords = async () => {
  115.             const response = await fetch('https://random-word-api.herokuapp.com/word?number=1');
  116.             const words = await response.json();
  117.             return words;
  118.         }
  119.         const showWords = async () => {
  120.             const words = await getWords();
  121.             let span = document.createElement('span');
  122.             span.classList.add('word');
  123.             span.style.position = 'absolute';
  124.             span.style.left = Math.floor(((window.innerWidth-200) - 200) * Math.random() + 200)  + "px";
  125.             span.style.top = 0;
  126.             span.style.color = "white";
  127.             span.innerText = words;
  128.             document.getElementById('wordspace').appendChild(span);
  129.         }
  130.         const moveWords = () => {
  131.             let words = document.getElementsByClassName('word');
  132.             for (let i = 0; i < words.length; i++) {
  133.                 let word = words[i];
  134.                 let top = parseInt(word.style.top);
  135.                 word.style.top = `${top + 10}px`;
  136.             }
  137.         }
  138.        
  139.     </script>
  140. </body>
  141. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!