I.I.S.S. Alessandro Volta - Palermo
0 voti
Animare un pallina facendola rimbalzare sullo schermo;
quesito posto 28 Novembre in Informatica da Gianni Messina Esperto (702 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 da Gianni Messina Esperto (702 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 da Gianni Messina Esperto (702 punti)

Domande correlate

0 voti
15 risposte
quesito posto 22 Novembre in Classe terza da Gianni Messina Esperto (702 punti) | 134 visite
0 voti
1 risposta
quesito posto 21 Novembre in Informatica da Gianni Messina Esperto (702 punti) | 34 visite
+1 voto
9 risposte
quesito posto 22 Novembre in Classe terza da Gianni Messina Esperto (702 punti) | 42 visite
710 domande
1,419 risposte
633 commenti
2,374 utenti