Escriu codi de veritat

← Tots els reptes

Repte de programació · Code Monster

Nivell 3 de 3: Repte gran

Escriu codi de veritat

Fins ara has programat amb blocs. Aquí escriuràs el codi amb el teclat, com els programadors de veritat, en un llenguatge que es diu JavaScript. Un monstre blau t’ho va explicant i tu canvies números i paraules per veure què passa al dibuix.

2 o 3 sessionsSense compteEn anglèsCal llegir i escriure
Abans de res, llegeix les instruccions. El botó per obrir l’eina és més avall, just després de la primera missió. Promet que no s’escaparà. Porta-m’hi
fillRect( 20, 10, 50, 75);
Exemple: la línia fillRect(20, 10, 50, 75) dibuixa un rectangle. Els números diuen on és i com de gran.
ComençaPrimera missió: mou i engrandeix el rectangle.
  1. Obre Code Monster. A dalt hi ha un monstre blau amb una bafarada verda. Hi diu, en anglès, que facis clic a la bafarada per continuar. Fes-hi clic.
  2. A l’esquerra hi ha el codi: fillRect(20, 10, 50, 75);. A la dreta, el dibuix que fa: un rectangle negre. El monstre et diu que canviïs el primer número.
  3. Fes clic sobre el 20, esborra’l i escriu 100. El rectangle es mou cap a la dreta sol, sense prémer res.
  4. Ara canvia el 50 per 200. El rectangle es fa més ample. Els quatre números són: on és d’esquerra a dreta, on és de dalt a baix, com d’ample i com d’alt. Missió complerta!

Cada vegada que facis clic a la bafarada verda, el monstre et proposa un pas més. Està en anglès: si no l’entens, pregunta al profe o prova de canviar un número i mira què passa. Cap error trenca res. Si l’embolica, prem RESET (a baix a l’esquerra) i torna al principi de la lliçó.

Ja has llegit els passos? Doncs ara sí.

Obre Code Monster

Quan premis el botó, l’eina s’obrirà en una pestanya nova del navegador. Aquestes instruccions es queden a la pestanya d’abans. Per anar d’una a l’altra, fes clic a les pestanyes de dalt de tot del navegador.

Fes-ho teuTria el que vulguis.
  • Segueix el monstreFes clic a la bafarada i fes el que et demana a cada pas: colors, cercles, línies. Va de mica en mica.
  • ColorsQuan surti fillStyle, escriu-hi un color en anglès entre cometes: "red", "blue", "orange".
  • Dues formesCopia la línia fillRect a sota, amb números diferents. Ara hi ha dos rectangles.
  • Una casaAmb rectangles i un triangle, dibuixa una casa: paret, porta, finestra i teulada.
  • Punt i comaMira que cada línia acabi amb ;. Si l’oblides, el dibuix desapareix fins que el tornis a posar.
Ves més enllàOpcional. Tria les que vulguis.
  • RepetirQuan el monstre t’ensenyi el for, fes una fila de 10 rectangles amb tres línies de codi.
  • VariablesGuarda una mida en una variable (var mida = 40;) i fes-la servir en tots els rectangles. Canvia-la i tot canvia alhora.
  • AnimacióCap al final, el monstre ensenya a moure coses. Fes que un cercle travessi la pantalla.
  • Un pas mésCompara-ho amb el repte Dibuixa amb la tortuga: allà dibuixaves amb blocs. Què prefereixes?
ComparteixPublica el teu dibuix al grup Programari Online.
  1. Code Monster no guarda enllaços: fes una captura de pantalla del dibuix i del codi (el profe t’ensenya com).
  2. Publica-la al grup Programari Online i escriu quantes línies de codi té.

Si vols continuar un altre dia, copia el codi en un document de text i guarda’l: després l’enganxes a la caixa de l’esquerra. Per publicar al grup, inicia la sessió a aquesta web amb el teu usuari (botó Inicia la sessió, a dalt). Si no tens usuari o no recordes la contrasenya, demana-ho al profe.