Background animato in JS con i canvas

Corsi registrati su
C, C++, Python, JavaScript Corsi in diretta per la formazione di Front End Developer e Back End Developer

In questo esempio creiamo un Background animato in JS con i canvas.

Abbiamo creato una funzione createStars() per generare le stelle, una funzione drawStars() per disegnarle, una funzione moveStars() per muoverle e una funzione drawSky() per disegnare lo sfondo. Infine, abbiamo utilizzato la funzione animate() per animare l’intero sfondo.

Possiamo sviluppare l’esercizio in tantissimi altri modi io vi propongo una possibile soluzione. Scrivete nei commetni la vostra soluzione!

Ecco dunque una possibile implementazione della funzione per creare le stelle, createStars():

const canvas = document.getElementById(“myCanvas”); const ctx = canvas.getContext(“2d”); // Funzione per generare un numero casuale all’interno di un intervallo function randomInRange(min, max) { return Math.random() * (max – min) + min; } //Funzione per creare le stelle function createStars(numStars, speed, maxSize) { const stars = []; for (let i = 0; i < numStars; i++) { stars.push({ x: randomInRange(0, canvas.width), y: randomInRange(0, canvas.height), size: randomInRange(1, maxSize), speed: randomInRange(speed / 2, speed), opacity: randomInRange(0.1, 1), }); } return stars; } const stars = createStars(200, 10,

Continua la lettura su: https://www.codingcreativo.it/background-animato-in-js-con-i-canvas/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it

Articoli Correlati

Gioco confronta numeri in JavaScript

In questa lezione vi spiego passo passo come realizzare un semplice gioco che confronta i numeri in JavaScript.Lo scopo di questo gioco, adatto a far giocare dei bambini della primaria, è quello di approfondire l’utilizzo delle funzioni, il metodo getElementById, la classe className, ecc.Innanzitutto provate il gioco base cliccando sul pulsante gioca in basso, oppure andate al seguente link per il gioco completo: gioco confronta numeri.Gioca con il confronto tra numeri! GiocaGioco confronta numeri in JavaScript – ImplementazioneInnanzitutto costruiamo la sezione html del gioco. Inseriamo un div che conterrà il primo numero, poi una select con le opzioni (maggiore, minore, uguale) e poi un altro div che contiene il secondo numero.Inseriamo poi due pulsanti, uno per verificare la correttezza delle risposte e l’altro per far partire il gioco.Infine sotto inseriamo un div in cui scriveremo il risultato.Ecco dunque una possibile implementazione: Personalizziamo adesso il codice html con il CSS.Creiamo le classi per i numeri, per la select e per i pulsanti. Dopo creiamo anche le classi visible e invisible per nascondere o visualizzare gli elementi nella pagina web.
#game{
border-radius: 5px;
background-color: #3889c4;
margin-top: 30px;
padding: 20px;
max-width: 500px;
margin: auto;
text-align: center;
}
#number_one, #number_two{
color: white;
font-size: 28px;
text-align: center;
padding:10px;
}
select#confronto{
color: white;
font-size: 26px;
text-align: center;
margin-top: 5px;
padding: 5px;
background-color: #ffc83d;
border: 1px solid #3889c4;
border-radius: 10px;
cursor: pointer;
}
#button-verifica, #button-play{
color: white;
font-size: 26px;
text-align: center;
margin-top: 25px;
padding: 10px;
background-color: #ffc83d;
border: 1px solid #3889c4;
border-radius: 10px;
cursor: pointer;
}
#button-verifica:hover{
background-color: #16486c;
}
div#risultato{
max-width: 300px;
margin: 10px auto;
border: 1px solid #87c6f4;
border-radius: 15px;
background-color: #87c6f4;
padding: 10px;
font-size: 26px;
}
.invisible{
display: none;
}
.visible{
display: inline;
}
Programmiamo adesso la parte di JavaScript.Innantitutto creiamo lo script del pulsante gioca. Appena si clicca sul pulsante dobbiamo far si che si generino due numeri random e si posizionino nei div opportuni.
let num1;
let num2;
let tentativi = 3;
let punteggio = 0;

document.getElementById(“button-play”).addEventListener(“click”, gioca);

function random_number() {
const num = Math.round(Math.random() * 100);
return num;
}

function gioca() {
num1 = random_number();
num2 = random_number();

document.getElementById(‘number_one’).innerHTML = num1;
document.getElementById(‘number_two’).innerHTML = num2;

document.getElementById(‘button-play’).className = “invisible”;
document.getElementById(‘button-verifica’).className = “visible “;
document.getElementById(‘confronto’).className = “visible”;

}

Gestiamo il controllo della risposta. Impostaimo 3 tentativi in tutto e ad ogni click sul pulsante verifica decrementiamo la variabile tentativo di 1. Poi controlliamo se i numeri soddisfano la condizione scelta. Se si, assegniamo un punto, altrimenti diciamo che ha sbagliato a rispondere.
document.getElementById(“button-verifica”).addEventListener(“click”, controllo);

function controllo() {
tentativi -= 1;

let confronto = document.getElementById(‘confronto’).value;

if (num1 == num2 && confronto == “uguale” || num1 < num2 && confronto == "minore" || num1 > num2 && confronto == “maggiore”){
punteggio += 1;
document.getElementById(“risultato”).innerHTML = ‘Ottimo! Punti: ‘ + punteggio;
} else {
document.getElementById(“risultato”).innerHTML = ‘Hai sbagliato, concentrati!’;
}
if(tentativi > 0){
gioca()
} else {
document.getElementById(“risultato”).innerHTML = ‘Il punteggio totale è: ‘ + punteggio;
document.getElementById(“button-play”).innerHTML = ‘Rigioca’;
document.getElementById(‘number_one’).innerHTML = ” “;
document.getElementById(‘number_two’).innerHTML = ” “;
document.getElementById(‘button-verifica’).className = “invisible “;
document.getElementById(‘confronto’).className = “invisible “;
document.getElementById(‘button-play’).className = “visible”;
punteggio = 0;
tentativi = 3;
}
}

Chiaramente questa è solo una possibile implementazione del gioco confronta numeri in JavaScript, divertitevi a creare la vostra versione.Alcuni link utiliIndice tutorial JavaScriptIl linguaggio JavaScriptCome utilizzare JavaScript alertUtilizzare JavaScript promptVariabili in JavaScriptGioco indovina numero in JavaScriptGioco della morra cinese in JavaScript

Ordinare un dizionario in Python

Si può ordinare un dizionario in Python per chiave o per valore. Facciamo alcuni esempi pratici di ordinamento in Python in base alle nostre esigenze.

Tutti gli esempi proposti possono essere provati nel compiler online che troverete al seguente link: Python compiler online.

Primo esempio – Ordinare un dizionario in Python per chiave

In questo primo esempio dapprima creiamo un dizionario in Python. Abbiamo poi detto di ordinare per chiave, quindi dobbiamo decidere se seguire un ordine crescente o decrescente, infine dobbiamo richiamare la funzione sul dizionario.

Implementiamo, dunque, una prima soluzione. Per ordinare in senso crescente possiamo utilizzare la funzione sorted sul nostro dizionario, in questo modo:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

for key in sorted(student):
print(key, student[key])

E se vogliamo un ordinamento decrescente? Basterà semplicemente utilizzare il parametro reverse della funzione sorted, impostandolo a False.

Ecco un esempio di dizionario ordinato in senso decrescente in Python:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

for key in sorted(student, reverse = True):
print(key, student[key])

Secondo esempio – Ordinare un dizionario in Python per chiave

Cerchiamo adesso una seconda soluzione al problema proposto.

Innanzitutto potremmo ad esempio pensare di utilizzare il metodo keys() sul dizionario, ma cosa succede?

Proviamolo, dunque, con un esempio:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

sorted_key = sorted(student.keys())

for element in sorted_key:
print(element)

In questo caso si avrà il seguente output:

age
hobby
mail
name
passion

Ovvero avremo le sole chiavi ordinate in senso crescente.

Quindi, anche se uso il metodo dict() non riuscirò in questo modo ad ordinare un dizionario in Python.

E se invece proviamo ad utilizzare il metodo values()?

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

sorted_values = sorted(student.values())

for element in sorted_values:
print(element)

Il risultato sarà il seguente:

29
Cristina
coding
codingcreatico@gmail.com
swim

Quindi se voglio ordinare un dizionario in Python per chiave cosa devo fare? Quale altra soluzione posso pensare?

Possiamo, ad esempio, utilizzare il metodo items(), che abbiamo studiato in questa lezione: items Python.

Ricordiamo inoltre che questo metodo è utilizzato per restituire l’elenco con tutte le chiavi del dizionario con i suoi rispettivi valori.

Dopo, possiamo nuovamente riconvertire le coppie di tuple in un dizionario utilizzando il metodo dict().

Ecco una possibile soluzione al nostro algoritmo:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

sorted_student = sorted(student.items())
sorted_student_dict = dict(sorted(student.items()))

print(sorted_student_dict)

for element in sorted_student_dict:
print(element, ‘: ‘, sorted_student_dict[element])

Così abbiamo ottenuto tutte le coppie di tuple chiave, valori ordinate in senso crescente. Poi, convertiamolo in dizionario con il metodo dict(). Così riusciamo ad ordinare il dizionario in Python per chiave.

Utilizziamo una funzione per poterla poi utilizzare per creare l’ordinamento su più dizionari:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

def sort_dict(d):
return dict(sorted(student.items()))

print(sort_dict(student))

Ordinare un dizionario in Python per chiave in senso decrescente

Questa volta utilizziamo il parametro reverse di sorted per creare un ordinamento decrescente sui dizionari. Infatti impostandolo a True l’ordinamento sarà decrescente. Di default il suo valore è False.

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

def sort_dict(d):
return dict(sorted(student.items(), reverse = True))

print(sort_dict(student))

Per completezza potremmo passare questo parametro anche alla funzione, in questo modo:

student = {
“name”: ‘Cristina’,
“age”: ’29’,
“hobby”: ‘swim’,
“mail”: ‘codingcreatico@gmail.com’,
“passion”: ‘coding’
}

def sort_dict(d, rev):
return dict(sorted(student.items(), reverse = rev))

print(sort_dict(student, True))

Conclusione

In questa lezione abbiamo affrontato alcuni interessanti esempi su come ordinare un dizionario in Python per chiave, in ordine crescente e decrescente.

Alcuni link utili

Indice tutorial sul linguaggio Python

1 – Introduzione al linguaggio Python

2 – Le variabili

3 – Operatori aritmetici e di assegnazione

4 – Stringhe

5 – Casting

6 – Input e print

7 – Primi esercizi in Python

8 – Errori in Python

9 – Script Python

10 – Scambio di variabili

11 – Modulo math

Vuoi rimanere aggiornato sulle nuove tecnologie per la Didattica e ricevere suggerimenti per attività da fare in classe?

Sei un docente?

soloscuola.it la prima piattaforma
No Profit gestita dai

Volontari Per la Didattica
per il mondo della Scuola. 

 

Tutti i servizi sono gratuiti. 

Associazione di Volontariato Koinokalo Aps

Ente del Terzo Settore iscritta dal 2014
Tutte le attività sono finanziate con il 5X1000