Tastiera digitale by @LeoMosc - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<h2>Titolo di intestazione di secondo livello
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
downloadConsente di scaricare file al click di collegamento ipertestuale.
<h5>Titolo di intestazione di quinto livello
srcIndica la provenienza di una risorsa esterna (tramite URL).

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

progetto 3 morra cinese

Ricomincio da Zero

Group 1 - Irregular Verbs

JavaScript Debug Console

Analizzatore Exif

esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!--<!DOCTYPE html>
<html>
  <head>
    <title>Tastiera</title>
    <style></style>
    <script></script>
  </head>
  <body>
    <input type="text" id="input-field">
    <div id="keyboard">
      <div class="rowsmall">  
        <button class="key2" onclick="pressKey(!)">!</button>
        <button class="key2" onclick="pressKey("")">""</button>        
        <button class="key2" onclick="pressKey(£)">£</button>        
        <button class="key2" onclick="pressKey($)">$</button>        
        <button class="key2" onclick="pressKey(%)">%</button>
        <button class="key2" onclick="pressKey(&)">&</button>
        <button class="key2" onclick="pressKey(/)">/</button>
        <button class="key2" onclick="pressKeypartondaa()">(</button>
        <button class="key2" onclick="pressKeypartondab()">)</button>
        <button class="key2" onclick="pressKey(=)">=</button>
      </div>
      <div class="row">  
        <button class="key" onclick="pressKey(1)">1</button>
        <button class="key" onclick="pressKey(2)">2</button>        
        <button class="key" onclick="pressKey(3)">3</button>        
        <button class="key" onclick="pressKey(4)">4</button>        
        <button class="key" onclick="pressKey(5)">5</button>
        <button class="key" onclick="pressKey(6)">6</button>
        <button class="key" onclick="pressKey(7)">7</button>
        <button class="key" onclick="pressKey(8)">8</button>
        <button class="key" onclick="pressKey(9)">9</button>
        <button class="key" onclick="pressKey(0)">0</button>

      </div>
    </div>
  </body>
</html>

-->

<div id="keyboard">
      <div class="rowsmallone">  
        <button class="key2" onclick="pressKey(!)">!</button>
        <button class="key" onclick="pressKey(1)">1</button>
        <button class="key2" onclick="pressKey("")">""</button> 
<button class="key" onclick="pressKey(2)">2</button>
        <button class="key2" onclick="pressKey(£)">£</button> 
<button class="key" onclick="pressKey(3)">3</button>        
        <button class="key" onclick="pressKey(4)">4</button>        
        
        <button class="key2" onclick="pressKey($)">$</button> 

<button class="key" onclick="pressKey(5)">5</button>
       
        <button class="key2" onclick="pressKey(%)">%</button>
 <button class="key" onclick="pressKey(6)">6</button>
        

        <button class="key2" onclick="pressKey(&)">&</button>
<button class="key" onclick="pressKey(7)">7</button>
        

        <button class="key2" onclick="pressKey(/)">/</button>

<button class="key" onclick="pressKey(8)">8</button>
        
        <button class="key2" onclick="pressKeypartondaa()">(</button>
<button class="key" onclick="pressKey(9)">9</button>
        
        <button class="key2" onclick="pressKeypartondab()">)</button>
<button class="key" onclick="pressKey(0)">0</button>


        <button class="key2" onclick="pressKey(=)">=</button>


      </div>
      <div class="row">  
        
                
        

      </div>

/*#keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.rowsmall {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: px;
}
*/
.key {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;
  margin: 5px;
  font-size: 1.2em;
  width: 50px;
  height: 50px;
  text-align: right;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 100%,0% 100%,0% 50%, 50% 50%);
}
/*
.key:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}*/
.key2 {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: px;
  margin: 5px;
  font-size: 0.9em;
   width: 25px;
  height: 25px;
}
/*
.key2:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

#input-field {
  display: block;
  margin-top: 10px;
  padding: 5px;
  font-size: 1.2em;
  border-radius: 5px;
  border: 1px solid #ccc;
}*/
.rowsmallone.key2 {
  display: flex;
  justify-content: center;
  align-items: center;
 bottom: px;
 
}

function pressKey(key) {
  const input = document.querySelector('#input-field');
  input.value += key;
}
function pressKeypartondaa(key) {
  const input = document.querySelector('#input-field');
  input.value += "(";
 
}
function pressKeypartondab(key) {
  const input = document.querySelector('#input-field');
  input.value += ")";
 
}

function deleteLastChar() {
  const input = document.querySelector('#input-field');
  input.value = input.value.slice(0, -1);
}
const player = document.getElementById('player');
let positionX = 0;
let positionY = 0;
let isJumping = false;

function moveLeft() {
  positionX -= 10;
  player.style.left = positionX + 'px';
}

function moveRight() {
  positionX += 5;
  player.style.left = positionX + 'px';
}

function jump() {
  if (!isJumping) {
    isJumping = true;
    let count = 0;
    let timer = setInterval(function() {
      positionY += 5;
      count++;
      if (count === 20) {
        clearInterval(timer);
        let timerDown = setInterval(function() {
          positionY -= 5;
          count--;
          if (count === 0) {
            clearInterval(timerDown);
            isJumping = false;
          }
          player.style.bottom = positionY + 'px';
        }, 20);
      }
      player.style.bottom = positionY + 'px';
    }, 20);
  }
}

document.addEventListener('keydown', function(event) {
  if (event.code === 'ArrowLeft') {
    moveLeft();
  } else if (event.code === 'ArrowRight') {
    moveRight();
  } else if (event.code === 'Space') {
    jump();
  }
});