ZIMsalaBIM door leerkracht ict-co.
Karel.Rosseel@gmail.com Beveren
Bekijk ook www.klascement.be
Den Zen: zimjs.com
België: ZIMsalaBim

Skool = school, leren leerlingen met game-apps?

ZIM-Games on codepen.io
COLLECT
SAME
CONNECT
HIT
Balsport
Puzzel
memory
Scrambler
Blob
Squiggle
X
Pragma helpt je met games en leuke dingen programmeren. bezoek codepen.io/zimjs of start blanco template zimjs.com/topics/zim/templates

space - rocket: collect

Orginele versie CAT https://codepen.io/zimjs/embed/EzpOPP
NL - NFT versie van Karel :
This is some text inside of a div block.
teleporter raket = https://codepen.io/zimjs/pen/WNxQPLp
=> Teleporter is a js-script can be use to go to other website url
=> add <script src="https://zimjs.org/teleporter.js"></script>
jigsaw puzzel: origineel zimjs.com/puzzle of danzen/pen/rNjQWRY
aangepaste versie: NL zonder Zim en met loadAssets + font google
Puzzel in NL 1280x720
Scrambler is een manier om blokjes te verschuiven: bv. dr. abstract
https://codepen.io/zimjs/pen/JjGWLYy
scrambler met loadAssets in het begin + tekst rondom en knop die verschijnt als de scrambler klaar is met ster-emitter

Make blob avatar

Blob change pinguin

rollercoaster squiggle

een lijn kan gebogen zijn, dan spreken we van een squiggle.  ShowVControls voor de bezier-curve: klik op squiggle om de raaklijnen te zien en verdraai https://zimjs.com/nio/flip.html
;56uitleg flip: true en flipVertical: true min 7:56 https://youtu.be/x-WOxMQhC7w&t=476

rollercoaster blob

animeren op een blob (gesloten vorm) via zimjs.com/nio zie 16:01
https://youtu.be/x-WOxMQhC7w?t=883
Leuk is ook dat je verschillende soorten trics hebt om iets aan te passen. bekijk de slider spells en knoppen die iets moeten doen.
Met indicator
ZIM-Samen spelen
SOCKET
send images
HIT sport
HIT
Balsport
Puzzel
memory
Scrambler
Squiggle
X
Pragma helpt je met games en leuke dingen programmeren. bezoek codepen.io/zimjs of start blanco template zimjs.com/topics/zim/templates

socket = send

bijvoorbeeld berichten versturen
https://youtu.be/fTshMvjsQm8?t=1739

socket = change colors

kleuren veranderen van een ei bv.
jigsaw puzzel: origineel zimjs.com/puzzle of danzen/pen/rNjQWRY
aangepaste versie: NL zonder Zim en met loadAssets + font google
Puzzel in NL 1280x720
Scrambler is een manier om blokjes te verschuiven: bv. dr. abstract
https://codepen.io/zimjs/pen/JjGWLYy
scrambler met loadAssets in het begin + tekst rondom en knop die verschijnt als de scrambler klaar is met ster-emitter

Coasters Plopsaland

ictgames.com/mobilePage/nl

tellen
handschrift
X
Games Studio100
COLLECT
SAME
CONNECT
HIT
Balsport
Puzzel
memory
Scrambler
Squiggle
X
Pragma helpt je met games en leuke dingen programmeren. bezoek codepen.io/zimjs of start blanco template zimjs.com/topics/zim/templates

space - rocket: collect

Orginele versie CAT https://codepen.io/zimjs/embed/EzpOPP
NL - NFT versie van Karel :
teleporter raket = https://codepen.io/zimjs/pen/WNxQPLp
=> Teleporter is a js-script can be use to go to other website url
=> or an iframe <iframe src='https://zimjs.com/teleporter.html?url=CodePenPage' width=100 height=150 frameBorder=0></iframe>
=> add <script src="https://zimjs.org/teleporter.js"></script>
=> const url = "https://codepen.io/zimjs/pen/JjGWLYy";
const teleporter = new Teleporter(url).sca(.3).pos(30,20,LEFT,BOTTOM);
jigsaw puzzel: origineel zimjs.com/puzzle of danzen/pen/rNjQWRY
aangepaste versie: NL zonder Zim en met loadAssets + font google
Puzzel in NL 1280x720
Scrambler is een manier om blokjes te verschuiven: bv. dr. abstract
https://codepen.io/zimjs/pen/JjGWLYy
scrambler met loadAssets in het begin + tekst rondom en knop die verschijnt als de scrambler klaar is met ster-emitter

Coasters Plopsaland

Wulfx maakt decor PINKI

Voorbeeld les: SKOOL
Basis componenten
ZIMjs
LESSONs for
EDpuzzle VIDs

Skool = school, leren leerlingen javascript?

Lesson 01 - VID 01 - Editor, Canvas Template and Code Basics (link on https://zimjs.com/learnjavascript.html )
link naar minuut 10
  1. 0:01 - video intro screen and music
  2. 0:25 - set up code editor
  3. 5:28 - canvas template
  4. 7:40 - describing template
  5. 9:23 - code comments
  6. 9:47 - scaling the stage
  7. 12:10 - code syntax (constants, keywords, statements, operators, terminators)
  8. 14:24 - string and numbers
  9. 15:16 - colors
  10. 21:16 - var, const and let
  11. 23:05 - Frame (Framework)
  12. 28:30 - objects and classes (class is the instructions or recipe to make new objects)
  13. 30:27 - indenting in { }