Slot machine

**Gabri1997** · 13-05-2017, 11:14

Salve , devo creare una slot machine per scuola , il problema che ho riscontrato e che quando schiaccio il bottone gioca i numeri iniziano a girare ma per poterli fermare devo schiarire un altro bottone (ferma) vorrei sapere come fare per avere solo il pulsante gioca e che là slot smetta di girare da sola.

Grazie per l'aiuto. (:

Qui di seguito vi posto il mio codice:

codice:

<!DOCTYPE HTML>
<html>
<head>

<title>SLOT MACHINE</title>
<style>

#pulsante{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}

#pulsante1{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}

button {
display:block;
width:138px;
height:33px;
margin:22px 62px;
cursorointer;
}

#bordo {
border-style: solid;
}

#border {
width: 750px;
adding: 11px;
margin: 320px;
}

.testo {
text-align:center;
}

.contenitore {
margin:0 auto;
width:265px;
align:left;
}

.slotmachine {
width:85px;
height:70px;
float:right;
border:1px ;
background-position:100px;
}

body {
background: url('immagine.jpg');
background-repeat: no.repeat;
background-position 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}


</style>

<script>
var gira;
function run(){
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.uno.src = immagini[loop];

var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.due.src = immagini[loop];

var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.tre.src = immagini[loop];


gira = setTimeout('run()', 10);
}

function stop(){
clearTimeout(gira);
}
</script>

</head>

<body background="immagine.jpg">

<div class="testo" id="border">


<div class="contenitore">

<div id="bordo" class="slotmachine"><img id = "uno" src = "1.gif"></div>
<div id="bordo" class="slotmachine"><img id = "due" src = "2.gif"></div>
<div id="bordo" class="slotmachine"><img id = "tre" src = "3.gif"></div>

<div class="clear"></div>
</div>

<div><button id="pulsante" type = "buttom" onclick = "run()">GIRA</button></div>
<div><button id="pulsante1" type = "button" onclick = "stop()">STOP</button></div>
</div>

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

**KillerWorm** · 13-05-2017, 12:37

Ciao e benvenuto.

Doverosa premessa: la richiesta di risoluzione di esercizi scolastici non è ben vista qui sul forum. Chiaramente, essendo per te argomento di studio, sarebbe controproducente se ti si fornisse una "soluzione copiaincolla". Ad ogni modo non ti si possono negare dei consigli ma (per la natura di carattere didattico degli argomenti trattati) sia chiaro che il forum non può farti da tutor. Le nozioni fondamentali puoi trovarle anche consultando opportune guide e tutorial.

Qui, giusto qualche consiglio:

In linea di massima dovrai impostare un timer che sia attivato nel momento in cui premi il pulsante "GIRA" e che vada a richiamare "autonomamente" la funzione stop().

Il principio è lo stesso che già stai utilizzando con la variabile gira alla quale hai impostato, appunto, un setTimeout() per richiamare ricorsivamente la funzione run().

In questo caso dovrai semplicemente definire un'ulteriore variabile impostandogli un suo setTimeout(), presumibilmente random (analogamente a ciò che hai già fatto), al quale dovrai passare, come callback, la tua funzione stop().

Ovviamente è più facile a farsi che a dirsi ma, dal momento che per te è argomento di studio, è meglio se fai tu stesso qualche prova così da cercare di capire il meccanismo e i concetti di base.

PS: L'argomento è prevalentemente JavaScript (avresti dovuto postare sul relativo forum); segnalo di spostare eventualmente la discussione.
Inoltre, occhio a quando posti del codice sul forum; dai uno sguardo al regolamento di sezione (tra le discussioni in evidenza su ogni sezione del forum) per sapere come fare.

**Vincent.Zeno** · 13-05-2017, 12:57

Originariamente inviata da KillerWorm

L'argomento è prevalentemente JavaScript

teletrasporto!

**Gabri1997** · 13-05-2017, 19:22

Ciao, grazie della risposta.
Per il mio "scuola" intendevo dire che la slot come è ora va benissimo , la mia era una richiesta per aggiungere qualcosa di diverso da quello richiesto della prof, ho seguito il tuo consiglio ma non riesco a implementarlo

setTimeout(function(){ run.close() }, 3000);
io ho provato cosi' e in vari altri modi ma non riesco , mi potresti far vedere tu come si fa?
Grazie mille

**livellacri** · 13-05-2017, 21:08

potresti, nell'onclick del button "GIRA", far partire un timeout di X millisecondi che richiama la funzione stop, per esempio così:

codice:

<div><button id="pulsante" type = "buttom" onclick = "run();setTimeout(function(){ stop() }, 3000);">GIRA</button></div>

Discussione: Slot machine

Strumenti discussione

Ricerca discussione

Visualizza

Slot machine

Permessi di invio