API tools faq
paste
Advertisement
workmj

first try at keyboard game

workmj
Jul 1st, 2024 (edited)
178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.14 KB | Help | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Chromebook Keyboard Drag and Drop Game</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             text-align: center;
  11.             background-color: #f0f8ff;
  12.         }
  13.  
  14.         .game-container {
  15.             margin: 20px auto;
  16.             width: 100%;
  17.         }
  18.  
  19.         .keyboard-row {
  20.             display: flex;
  21.             justify-content: center;
  22.             margin-bottom: 2px;
  23.             width: 100%;
  24.         }
  25.  
  26.         .key {
  27.             width: 50px; /* Default width */
  28.             height: 50px; /* Default height */
  29.             margin: 5px;
  30.             cursor: pointer;
  31.             border-radius: 5px;
  32.             background-color: white;
  33.             border: 3px solid #000;
  34.             display: flex;
  35.             justify-content: center;
  36.             align-items: center;
  37.         }
  38.  
  39.         .key img {
  40.             max-width: 100%;
  41.             max-height: 100%;
  42.         }
  43.  
  44.         .key.correct {
  45.             background-color: #90ee90;
  46.         border-color: #90ee90;
  47.         }
  48.  
  49.         .keybank {
  50.             display: flex;
  51.             flex-wrap: wrap;
  52.             justify-content: center;
  53.         }
  54.  
  55.         .hidden {
  56.             display: none;
  57.         }
  58.  
  59.         .congratulations {
  60.             margin-top: 20px;
  61.         }
  62.  
  63.         .dragging {
  64.             opacity: 0.5;
  65.         }
  66.  
  67.     #keyboard-container {
  68.         background-color: grey;
  69.         border: 3px solid #000;
  70.         padding: 5px;
  71.         border-radius: 10px; /* Rounded corners */
  72.     }
  73.     </style>
  74. </head>
  75.  
  76.  
  77.  
  78. <body>
  79.     <div class="game-container">
  80.         <h1>Chromebook Keyboard Drag and Drop Game</h1>
  81.         <div id="keyboard-container">
  82.             <div class="keyboard-row" id="row1"></div>
  83.             <div class="keyboard-row" id="row2"></div>
  84.             <div class="keyboard-row" id="row3"></div>
  85.             <div class="keyboard-row" id="row4"></div>
  86.             <div class="keyboard-row" id="row5"></div>
  87.             <div class="keyboard-row" id="row6"></div>
  88.         </div>
  89.         <div id="keybank" class="keybank">
  90.             <!-- Keys to drag will be generated here -->
  91.         </div>
  92.     </div>
  93.  
  94.     <div id="congratulations" class="congratulations hidden">
  95.         <h2>Congratulations! You've completed the keyboard!</h2>
  96.        <button onclick="restartGame()">Play Again</button>
  97.    </div>
  98.  
  99.  
  100.  
  101.    <script>
  102.        const keys = [
  103.            { symbol: 'Esc', image: 'https://drive.google.com/thumbnail?id=1b7mScbRhzw5S5qznbdyrD3f_m67Zhi6N&sz=w100', position: '1', width: 40, height: 50, row: 1 },
  104.             { symbol: 'larrow', image: 'images/larrow-key.png', position: '2', width: 40, height: 50, row: 1 },
  105.             { symbol: 'rarrow', image: 'images/rarrow-key.png', position: '3', width: 40, height: 50, row: 1 },
  106.             { symbol: 'F3', image: 'images/f3-key.png', position: '4', width: 40, height: 50, row: 1 },
  107.             { symbol: 'F4', image: 'images/f4-key.png', position: '5', width: 40, height: 50, row: 1 },
  108.             { symbol: 'F5', image: 'images/f5-key.png', position: '6', width: 40, height: 50, row: 1 },
  109.             { symbol: 'F6', image: 'images/f6-key.png', position: '7', width: 40, height: 50, row: 1 },
  110.             { symbol: 'F7', image: 'images/f7-key.png', position: '8', width: 40, height: 50, row: 1 },
  111.             { symbol: 'F8', image: 'images/f8-key.png', position: '9', width: 40, height: 50, row: 1 },
  112.             { symbol: 'F9', image: 'images/f9-key.png', position: '10', width: 40, height: 50, row: 1 },
  113.             { symbol: 'F10', image: 'images/f10-key.png', position: '11', width: 40, height: 50, row: 1 },
  114.             { symbol: 'F11', image: 'images/f11-key.png', position: '12', width: 40, height: 50, row: 1 },
  115.             { symbol: 'F12', image: 'images/f12-key.png', position: '13', width: 40, height: 50, row: 1 },
  116.             { symbol: '`', image: 'images/tilde-key.png', position: '17', width: 40, height: 50, row: 2 },
  117.             { symbol: '1', image: 'images/1-key.png', position: '18', width: 40, height: 50, row: 2 },
  118.             { symbol: '2', image: 'images/2-key.png', position: '19', width: 40, height: 50, row: 2 },
  119.             { symbol: '3', image: 'images/3-key.png', position: '20', width: 40, height: 50, row: 2 },
  120.             { symbol: '4', image: 'images/4-key.png', position: '21', width: 40, height: 50, row: 2 },
  121.             { symbol: '5', image: 'images/5-key.png', position: '22', width: 40, height: 50, row: 2 },
  122.             { symbol: '6', image: 'images/6-key.png', position: '23', width: 40, height: 50, row: 2 },
  123.             { symbol: '7', image: 'images/7-key.png', position: '24', width: 40, height: 50, row: 2 },
  124.             { symbol: '8', image: 'images/8-key.png', position: '25', width: 40, height: 50, row: 2 },
  125.             { symbol: '9', image: 'images/9-key.png', position: '26', width: 40, height: 50, row: 2 },
  126.             { symbol: '0', image: 'images/0-key.png', position: '27', width: 40, height: 50, row: 2 },
  127.             { symbol: '-', image: 'images/minus-key.png', position: '28', width: 40, height: 50, row: 2 },
  128.             { symbol: '=', image: 'images/equal-key.png', position: '29', width: 40, height: 50, row: 2 },
  129.             { symbol: 'Backspace', image: 'images/backspace-key.png', position: '30', width: 80, height: 50, row: 2 },
  130.             { symbol: 'Tab', image: 'images/tab-key.png', position: '31', width: 60, height: 50, row: 3 },
  131.             { symbol: 'Q', image: 'images/q-key.png', position: '32', width: 40, height: 50, row: 3 },
  132.             { symbol: 'W', image: 'images/w-key.png', position: '33', width: 40, height: 50, row: 3 },
  133.             { symbol: 'E', image: 'images/e-key.png', position: '34', width: 40, height: 50, row: 3 },
  134.             { symbol: 'R', image: 'images/r-key.png', position: '35', width: 40, height: 50, row: 3 },
  135.             { symbol: 'T', image: 'images/t-key.png', position: '36', width: 40, height: 50, row: 3 },
  136.             { symbol: 'Y', image: 'images/y-key.png', position: '37', width: 40, height: 50, row: 3 },
  137.             { symbol: 'U', image: 'images/u-key.png', position: '38', width: 40, height: 50, row: 3 },
  138.             { symbol: 'I', image: 'images/i-key.png', position: '39', width: 40, height: 50, row: 3 },
  139.             { symbol: 'O', image: 'images/o-key.png', position: '40', width: 40, height: 50, row: 3 },
  140.             { symbol: 'P', image: 'images/p-key.png', position: '41', width: 40, height: 50, row: 3 },
  141.             { symbol: '[', image: 'images/open-bracket-key.png', position: '42', width: 40, height: 50, row: 3 },
  142.             { symbol: ']', image: 'images/close-bracket-key.png', position: '43', width: 40, height: 50, row: 3 },
  143.             { symbol: '\\', image: 'images/backslash-key.png', position: '44', width: 60, height: 50, row: 3 },
  144.             { symbol: 'Caps Lock', image: 'images/caps-lock-key.png', position: '45', width: 70, height: 50, row: 4 },
  145.             { symbol: 'A', image: 'images/a-key.png', position: '46', width: 40, height: 50, row: 4 },
  146.             { symbol: 'S', image: 'images/s-key.png', position: '47', width: 40, height: 50, row: 4 },
  147.             { symbol: 'D', image: 'images/d-key.png', position: '48', width: 40, height: 50, row: 4 },
  148.             { symbol: 'F', image: 'images/f-key.png', position: '49', width: 40, height: 50, row: 4 },
  149.             { symbol: 'G', image: 'images/g-key.png', position: '50', width: 40, height: 50, row: 4 },
  150.             { symbol: 'H', image: 'images/h-key.png', position: '51', width: 40, height: 50, row: 4 },
  151.             { symbol: 'J', image: 'images/j-key.png', position: '52', width: 40, height: 50, row: 4 },
  152.             { symbol: 'K', image: 'images/k-key.png', position: '53', width: 40, height: 50, row: 4 },
  153.             { symbol: 'L', image: 'images/l-key.png', position: '54', width: 40, height: 50, row: 4 },
  154.             { symbol: ';', image: 'images/semicolon-key.png', position: '55', width: 40, height: 50, row: 4 },
  155.             { symbol: '\'', image: 'images/quote-key.png', position: '56', width: 40, height: 50, row: 4 },
  156.             { symbol: 'Enter', image: 'images/enter-key.png', position: '57', width: 90, height: 50, row: 4 },
  157.             { symbol: 'Shift', image: 'images/left-shift-key.png', position: '58', width: 90, height: 50, row: 5 },
  158.             { symbol: 'Z', image: 'images/z-key.png', position: '59', width: 40, height: 50, row: 5 },
  159.             { symbol: 'X', image: 'images/x-key.png', position: '60', width: 40, height: 50, row: 5 },
  160.             { symbol: 'C', image: 'images/c-key.png', position: '61', width: 40, height: 50, row: 5 },
  161.             { symbol: 'V', image: 'images/v-key.png', position: '62', width: 40, height: 50, row: 5 },
  162.             { symbol: 'B', image: 'images/b-key.png', position: '63', width: 40, height: 50, row: 5 },
  163.             { symbol: 'N', image: 'images/n-key.png', position: '64', width: 40, height: 50, row: 5 },
  164.             { symbol: 'M', image: 'images/m-key.png', position: '65', width: 40, height: 50, row: 5 },
  165.             { symbol: ',', image: 'images/comma-key.png', position: '66', width: 40, height: 50, row: 5 },
  166.             { symbol: '.', image: 'images/period-key.png', position: '67', width: 40, height: 50, row: 5 },
  167.             { symbol: '/', image: 'images/slash-key.png', position: '68', width: 40, height: 50, row: 5 },
  168.             { symbol: 'Shift', image: 'images/right-shift-key.png', position: '69', width: 120, height: 50, row: 5 },
  169.             { symbol: 'Ctrl', image: 'images/left-ctrl-key.png', position: '70', width: 50, height: 50, row: 6 },
  170.             { symbol: 'Fn', image: 'images/fn-key.png', position: '71', width: 50, height: 50, row: 6 },
  171.             { symbol: 'Alt', image: 'images/left-alt-key.png', position: '72', width: 50, height: 50, row: 6 },
  172.             { symbol: 'Space', image: 'images/space-key.png', position: '73', width: 300, height: 50, row: 6 },
  173.             { symbol: 'Alt', image: 'images/right-alt-key.png', position: '74', width: 50, height: 50, row: 6 },
  174.             { symbol: 'Ctrl', image: 'images/right-ctrl-key.png', position: '75', width: 50, height: 50, row: 6 }
  175.         ];
  176.  
  177.         document.addEventListener('DOMContentLoaded', () => {
  178.             createKeyboard();
  179.             createKeyBank();
  180.         });
  181.  
  182.         function createKeyboard() {
  183.             keys.forEach(key => {
  184.                 const keyElement = document.createElement('div');
  185.                 keyElement.classList.add('key');
  186.                 keyElement.style.width = `${key.width}px`;
  187.                 keyElement.style.height = `${key.height}px`;
  188.                 keyElement.dataset.image = key.image;
  189.                 keyElement.dataset.position = key.position;
  190.                 keyElement.dataset.row = key.row;
  191.  
  192.                 const imgElement = document.createElement('img');
  193.                 imgElement.src = key.image;
  194.                 imgElement.alt = key.symbol;
  195.  
  196.                 keyElement.appendChild(imgElement);
  197.  
  198.                 keyElement.addEventListener('dragover', handleDragOver);
  199.                 keyElement.addEventListener('drop', handleDrop);
  200.  
  201.                 document.getElementById(`row${key.row}`).appendChild(keyElement);
  202.             });
  203.         }
  204.  
  205.         function createKeyBank() {
  206.             const shuffledKeys = shuffleArray(keys.slice());
  207.  
  208.             shuffledKeys.forEach(key => {
  209.                 const keyElement = document.createElement('div');
  210.                 keyElement.classList.add('key');
  211.                 keyElement.dataset.position = key.position;
  212.                 keyElement.style.width = `${key.width}px`;
  213.                 keyElement.style.height = `${key.height}px`;
  214.                 keyElement.draggable = true;
  215.                 keyElement.dataset.symbol = key.symbol;
  216.  
  217.  
  218.                 const imgElement = document.createElement('img');
  219.                 imgElement.src = key.image;
  220.                 imgElement.alt = key.symbol;
  221.  
  222.                 keyElement.appendChild(imgElement);
  223.  
  224.                 keyElement.addEventListener('dragstart', handleDragStart);
  225.                 keyElement.addEventListener('dragend', handleDragEnd);
  226.  
  227.                 document.getElementById('keybank').appendChild(keyElement);
  228.             });
  229.         }
  230.  
  231.         function shuffleArray(array) {
  232.             for (let i = array.length - 1; i > 0; i--) {
  233.                 const j = Math.floor(Math.random() * (i + 1));
  234.                 [array[i], array[j]] = [array[j], array[i]];
  235.             }
  236.             return array;
  237.         }
  238.  
  239.         function handleDragStart(e) {
  240.             e.dataTransfer.setData('text/plain', e.target.dataset.position);
  241.             e.target.classList.add('dragging');
  242.         }
  243.  
  244.         function handleDragEnd(e) {
  245.             e.target.classList.remove('dragging');
  246.         }
  247.  
  248.         function handleDragOver(e) {
  249.             e.preventDefault();
  250.             e.currentTarget.classList.add('drag-over');
  251.         }
  252.  
  253. function handleDrop(e) {
  254.     e.preventDefault();
  255.     e.currentTarget.classList.remove('drag-over');
  256.  
  257.     const position = e.dataTransfer.getData('text/plain');
  258.     const draggedKey = document.querySelector(`#keybank .key[data-position='${position}']`);
  259.  
  260.     if (draggedKey && e.currentTarget.dataset.position === position) {
  261.         e.currentTarget.innerHTML = draggedKey.innerHTML;
  262.         e.currentTarget.classList.add('correct');
  263.         draggedKey.classList.add('hidden');
  264.  
  265.         checkForCompletion();
  266.     }
  267. }
  268.         function checkForCompletion() {
  269.             const keys = document.querySelectorAll('#keyboard-container .key');
  270.             const completed = Array.from(keys).every(key => key.classList.contains('correct'));
  271.  
  272.             if (completed) {
  273.                 document.getElementById('congratulations').classList.remove('hidden');
  274.             }
  275.         }
  276.  
  277.         function restartGame() {
  278.             document.getElementById('congratulations').classList.add('hidden');
  279.             document.getElementById('keyboard-container').innerHTML = '';
  280.             document.getElementById('keybank').innerHTML = '';
  281.             createKeyboard();
  282.             createKeyBank();
  283.         }
  284.     </script>
  285. </body>
  286. </html>
  287.  
  288.  
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!