The More You Know...

🔤 What is JavaScript?

JavaScript is the language you’re using in Code.org to create animations, games, and interactive programs. You write instructions for the computer to follow using blocks or text.

🔢 VARIABLES

What is a variable?
A variable stores information (like numbers or text) so your program can use or change it later.

        // Create a variable
        var score = 0; 

        // Update variable
        score = score + 1; 

        // Display variable on screen
        text(score, 200, 100);

Block	Purpose
var x = 0;	Declare a new variable
x = x + 1;	Change variable value
text(x, xPos, yPos);	Show variable value on screen

💡 Use variables to:

Keep track of points, health, or time
Store player names or answers

📍POSITIONING

The screen is a grid!
X-axis (left to right)
Y-axis (top to bottom)
(0, 0) is the top-left corner

Example:

        sprite.x = horizontal position
        sprite.y = vertical position

Block	Parameters	Example
createSprite(x, y)	Position of sprite	createSprite(100, 200)
sprite.x = value	Set horizontal position	ball.x = 250
sprite.y = value	Set vertical position	ball.y = 150

🧸 SPRITES (Characters, Objects)

Create and control images/characters on the screen.

        var player = createSprite(100, 200);
        player.setAnimation("hero_idle");
        player.scale = 0.5;

Block	Parameters	Example
createSprite(x, y)	X and Y position	`createSprite(100, 200)`
setAnimation("name")	Costume/image	`s.setAnimation("cat_1")`
sprite.scale = value	Size (1 = normal)	`sprite.scale = 0.5`
sprite.rotation = deg	Rotate sprite	`sprite.rotation = 45`
sprite.x = value	Move left/right	`ball.x = 3`
sprite.y = value	Move up/down	`ball.y = -3`

🔄 DRAW LOOP

What is it?
The draw() function runs continuously, about 30–60 times per second. Everything inside it updates on the screen.

The draw() function runs again and again (like a flipbook). This is where animation happens!

        function draw() {
            background("white");
            drawSprites(); // shows all your sprites
        }

✅ Use draw() for:

🎮 Movement

Example:

        // Moves right
        sprite.velocityX = 3; 
        // Moves up  
        sprite.velocityY = -2;

Animation
Constant updates

🔁 Put moving and changing things inside draw(). 🚫 Don't put createSprite() or var score = 0 inside draw()—they’ll reset every frame!

🧠 What is the Counter Pattern?

The counter pattern is used to increase or decrease a variable by a consistent amount—most commonly used for things like:

Tracking score
Changing position
Counting clicks or time

It follows a simple formula:

        variable = variable + 1;

Or subtraction:

        variable = variable - 1;

Pattern Code	Description	Example Use
score = score + 1	Adds 1 to score	Track points
x = x + 1	Moves sprite right	Sprite movement
y = y - 1	Moves sprite up	Sprite movement
time = time - 1	Countdown timer	Game timer
speed = speed + 2	Increases speed by 2 each frame	Acceleration effect
size = size - 0.1	Shrinks something slowly	Animation effect

🔁 In Game Lab, this usually goes inside the draw() function so it updates every frame.

🧠 CONDITIONALS

Conditionals let your program make decisions.

Example in code:

        
        if (score > 10) {
            
            console.log("You're doing great!");
         
        } else {
            console.log("Keep trying!");
        }

Basic Structure:

        if (condition) {
            // do this if true
        } else {
            // do this if false
        }

✅ Common Conditions:

Symbol	Meaning	Example
==	Equal to	score == 10
!=	Not equal	lives != 0
>	Greater than	points > 50
<	Less than	speed < 5
>=	Greater or equal	score >= 100
<=	Less or equal	level <= 3

🧠 Tips

End every statement with a ;
Use camelCase for variable names: myScore, playerSpeed
Keep your code organized using spacing and indentation