Elenet.net

La pallina che rimbalza

0 voti
Animare un pallina facendola rimbalzare sullo schermo;
quesito posto 28 Novembre 2018 in Informatica da Gianni Messina Esperto (736 punti)
  

2 Risposte

0 voti
Pagina HTML le il disegno della pallina

<html>
<head>
<style>
.ciccio{
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    right: 0px;
}

</style>

</head>
<body>

<div class="ciccio">
</div>

<div class="ciccio" style="left:50; top:50; background-color: blue;">
</div>

</body>
</html>
risposta inviata 28 Novembre 2018 da Gianni Messina Esperto (736 punti)
0 voti
Codice di Partenza:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var step=3;

var dot = {
    x:30,
    y:0,
    velX:6,
    velY:7
};

function clearDot() {
     ctx.clearRect(0,0,500,500);   
}

function paintDot() {
    ctx.strokeStyle = "red";
    ctx.fillStyle="red";
    ctx.beginPath();
    ctx.arc(dot.x,dot.y,10,0, 2*Math.PI);
    ctx.fill();
    ctx.stroke();
}

function move() {
    // update position
    
    if (dot.y>=100){
        step=-1
    }
    if (dot.y<1)
    step=1;
    clearDot();
    
    /*if (dot.y=0){
        step=1;
    }*/
    
    ;
    dot.x = dot.x ;//+ 10;//dot.velX;
    dot.y = dot.y + step//dot.velY;
    paintDot();
}

paintDot(); // disegna il pallino all'inizio
setInterval(move, 10); // lancia la funzione move ogni 100ms

</script>

</body>
</html>
risposta inviata 28 Novembre 2018 da Gianni Messina Esperto (736 punti)

Domande correlate

0 voti
15 risposte
Che cos'è javascript
quesito posto 22 Novembre 2018 in Classe terza da Gianni Messina Esperto (736 punti) | 1,061 visite
0 voti
1 risposta
Costruzione del Gioco TAP
quesito posto 21 Novembre 2018 in Informatica da Gianni Messina Esperto (736 punti) | 373 visite
+1 voto
9 risposte
Come si dichiarano le variabili in Javascript
quesito posto 22 Novembre 2018 in Classe terza da Gianni Messina Esperto (736 punti) | 816 visite
Benvenuto in
Open School Support



Qui potrai porre domande e ricevere risposte dai docenti e dagli altri studenti della community.

» Regolamento


Puoi anche consultare i mate-
riali di studio

» Lezioni di matematica

» Lezioni di elettronica

» Lezioni di inglese

» Lezioni di informatica

» Lezioni di diritto

» Lezioni informatica di base

» Lezioni TTIM

» Lezioni di Italiano

» Lezioni Telecomunicazioni



Openschool
778 domande
1,565 risposte
639 commenti
1,445 utenti