onkeypress tastiera (event)

**Pierl** · 08-04-2022, 14:22

Scusate la banalitï¿½ e il disturbo, ma dopo innumerevoli infruttuose ricerche in rete chiedo aiuto per un compito che mia figlia (prima liceo), ai primissimi passi, deve fare per informatica.

Su un lavoro fatto in classe deve apportare a casa queste modifiche secondo queste istruzioni dell professoressa.
Muovere con alcuni dei tasti della tastiera anzichï¿½ con i bottoni (per esempio, 'a' per sinistra, 'd' per destra, 's' per sotto e 'w' per sopra).... bisogna mettere nel tag di apertura del body la proprietï¿½ onkeypress="tastiera(event)" (qualora la funzione Javascript si chiamasse tastiera) e creare, appunto, una funzione Javascript function tastiera(e) {//codice} ...e.key ci dice quale tasto della tastiera ï¿½ stato premuto.

Abbiamo messo nel tag body la proprietï¿½

codice:

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>gina che si muove attorno a giannozza</title>
    <link rel="stylesheet" href="index.css">
    <script type="text/javascript" src="indexx.js"></script>
  </head>
  <body onkeypress="tastiera(event)" id="corpo">
    <div onclick="spostaSu()" id="bottoneSu">SU</div>
    <div onclick="spostaGiu()" id="bottoneGiu">GIU</div>
    <div onclick="spostaDestra()" id="bottoneDestra">DX</div>
    <div onclick="spostaSinistra()" id="bottoneSinistra">SX</div>
    <div id="gina"></div>
    <div id="giannozza"></div>
  </body>
</html>

Abbiamo creato la funzione tastiera usando lo stesso codice dei tasti, solo che va con tutti i tasti, non riusciamo a dire di utilizzare un tasto specifico per destra sinistra ecc. La profe ha scritto questo una funzione Javascript function tastiera(e) {//codice} ...e.key ci dice quale tasto della tastiera ï¿½ stato premuto. ma quel e.key non capiamo come utilizzarlo

var x_gina=800;
var y_gina=450;
var x_giannozza=500;
var y_giannozza=250;


function tastiera(e) {x_gina=x_gina-25;
  document.getElementById('gina').style.left=x_gina+"px";}  


function spostaSu() {
  y_gina=y_gina-25;
  document.getElementById('gina').style.top=y_gina+"px";
}
function spostaGiu() {
  y_gina=y_gina+25;
  document.getElementById('gina').style.top=y_gina+"px";
}
function spostaSinistra() {
  x_gina=x_gina-25;
  document.getElementById('gina').style.left=x_gina+"px";
  //calcoliamo il centro della prima palla
  var x_centro_gina=x_gina+50;
  var y_centro_gina=y_gina+50;


}
function spostaDestra() {
  x_gina=x_gina+25;
  document.getElementById('gina').style.left=x_gina+"px";
}

Grazie in anticipo per l'aiuto.

**KillerWorm** · 08-04-2022, 17:13

Ciao, precisiamo che il forum non è un luogo dove richiedere la risoluzione dei propri esercizi scolastici. Personalmente posso fornire solo delle indicazioni per poter arrivare voi stessi ad una soluzione. Per il resto è necessario studiare e/o chiedere al prof di turno.

solo che va con tutti i tasti

Questo è corretto, l'evento onkeypress viene eseguito alla pressione di qualsiasi tasto.

A questo punto, come da indicazioni, bisogna capire quale tasto è stato premuto.

Alla funzione tastiera() viene passato, come argomento, l'oggetto event, che contiene tutte le proprietà dell'evento scaturito. Nel tuo caso, il riferimento di questo oggetto è passato alla variabile "e" dichiarata come argomento di tale funzione.

Una di queste proprietà, per l'evento onkeypress, è appunto key.
Vedere la documentazione: KeyboardEvent key Property

Quindi, in linea di massima, e.key (dentro quella funzione) restituisce una stringa che rappresenta il tasto premuto.

Per testare ciò che viene restituito, è possibile inserire un banale alert(e.key) dentro quella funzione.

A questo punto basterà impostare qualche condizione (dei semplici if o qualche altra struttura condizionale a seconda di ciò che è stato studiato/richiesto) in cui verificare se è stato premuto uno dei tasti richiesti nell'esercizio; confrontando quindi il valore restituito da e.key con la specifica stringa per ciascun caso.

Nelle istruzioni di ciascuna condizione andrà posto lo script per lo spostamento. Dal momento che, come vedo, sono state già impostate delle specifiche funzioni per lo spostamento, è possibile richiamare semplicemente queste, relativamente all'azione da effettuare per ciascuna condizione, piuttosto che riscrivere il codice per lo spostamento in ognuna delle condizioni.

Questo, a grandi linee; chiaramente è necessario avere chiari i concetti di base per poter elaborare una qualsiasi soluzione.

Buon proseguimento.

**ninja72** · 08-04-2022, 22:16

Qui c'è un esempio spartano di come si potrebbe essere fatto. Notte

codice:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8">
    <title>gina che si muove attorno a giannozza</title>
    <style>
        .controlli {
            z-index: auto;
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: auto;
            grid-template-areas:
                "testo testo testo"
                ". su ."
                "sx . dx"
                ". giu .";
        }

        #titolo {
            grid-area: testo;
            text-align: center;
        }

        #bottoneSu {
            grid-area: su;
        }

        #bottoneGiu {
            grid-area: giu;
        }

        #bottoneDestra {
            grid-area: dx;
        }

        #bottoneSinistra {
            grid-area: sx;
        }

        #gina {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            z-index: -1;
        }

        #giannozza {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="controlli">
        <h3 id="titolo">Controlli</h3>
        <button id="bottoneSu">SU</button>
        <button id="bottoneGiu">GIU</button>
        <button id="bottoneDestra">DX</button>
        <button id="bottoneSinistra">SX</button>
    </div>

    <div id="gina"></div>
    <div id="giannozza"></div>

    <script>
        // risoluzione finestra browser 
        const xMax = window.innerWidth
        const yMax = window.innerHeight
        // bottoni
        const btnUp = document.getElementById('bottoneSu')
        const btnDown = document.getElementById('bottoneGiu')
        const btnRight = document.getElementById('bottoneDestra')
        const btnLeft = document.getElementById('bottoneSinistra')
        // contenitori
        const gina = document.getElementById('gina')
        const giannozza = document.getElementById('giannozza')
        //  eventi click
        btnUp.addEventListener('click', spostaSu)
        btnDown.addEventListener('click', spostaGiu)
        btnRight.addEventListener('click', spostaDestra)
        btnLeft.addEventListener('click', spostaSinistra)
        // evento keydown
        document.body.addEventListener('keydown', fnKeys)
        // posizioni iniziale
        gina.style.top = `${(yMax / 2) - 205}px`
        gina.style.left = `${(xMax / 2) - 100}px`

        giannozza.style.top = `${(yMax / 2 - 100)}px`
        giannozza.style.left = `${(xMax / 2 - 100)}px`

        // fn movimento
        function spostaSu() {
            if (parseInt(gina.style.top) <= 0) return
            let tmpValue = parseInt(gina.style.top)
            gina.style.top = `${tmpValue - 25}px`
        }
        function spostaGiu() {
            if (parseInt(gina.style.top) >= yMax - 125) return
            let tmpValue = parseInt(gina.style.top)
            gina.style.top = `${tmpValue + 25}px`
        }
        function spostaSinistra() {
            if (parseInt(gina.style.left) <= 0) return
            let tmpValue = parseInt(gina.style.left)
            gina.style.left = `${tmpValue - 25}px`
        }
        function spostaDestra() {
            if (parseInt(gina.style.left) >= xMax - 125) return
            let tmpValue = parseInt(gina.style.left)
            gina.style.left = `${tmpValue + 25}px`
        }
        // tasti comando (cursore/pad numerico)
        function fnKeys(e) {
            switch (e.keyCode) {
                case 38:
                case 104:
                    spostaSu()
                    break;
                case 40:
                case 98:
                    spostaGiu()
                    break;
                case 39:
                case 102:
                    spostaDestra()
                    break;
                case 37:
                case 100:
                    spostaSinistra()
                    break;
            }
        }

    </script>
</body>

</html>

**ciro78** · 09-04-2022, 19:01

Ciao Pierl,
benvenuto sul forum!

Ti invito, qualora non lo avessi già fatto, a prendere visione del regolamento. In particolare le sezioni che riguardano il titolo e l'utilizzo del tag code.

Le indicazioni in esso riportate consento di sfruttare il forum al meglio sia per te che posti la domanda che per chi vuole aiutarti.

Discussione: onkeypress tastiera (event)

Strumenti discussione

Ricerca discussione

Visualizza

onkeypress tastiera (event)

Permessi di invio