Day 7
https://docs.google.com/document/d/1NQkRHPgOkjGOyAmyGUtw6snKDEkaAeLhWuZlzR0FmsE/edit?usp=sharing
Conner Glasser http://jsbin.com/cikomegahu/3/edit
Tanner Dickinson http://jsbin.com/xibohozeku/1/edit
Eden Dickinson http://jsbin.com/kipurehuci/2/edit
Adam Gallina http://jsbin.com/jetiyoyife/1/edit?js,output
Dallin Dickinson http://jsbin.com/qekexarahe/1/edit
Derek Dickinson http://jsbin.com/dafobamasi/1/edit
Miranda Dickinson http://jsbin.com/taderiyepu/2/edit?html,js,output
Elijah Arollo http://jsbin.com/gucezotohu/2/edit
Day 6 .
A. Lesson: Clean Sprite sheet / Array
http://jimmyinteractive.com/games/ProgrammingClass/Lessons/Lesson_Clean_Sprite_sheet.docx
http://jimmyinteractive.com/games/ProgrammingClass/Lesson_PhaserSprite/assets/
to upload: ftp://jimmyinteractive.com/Lesson_PhaserSprite/assets/ (username = class / password = class)
CODE
1. Matthew Greenwald
2. Eden Dickinson http://jsbin.com/bavonivifa/1/edit?html,js,output
3. Logan Glasser http://jsbin.com/cehocosuxu/3/edit
4. Elijah Arollo http://jsbin.com/nevorenuqa/1/edit
5. Derek Dickinson http://jsbin.com/megipazice/2/edit
6. Tanner Dickinson http://jsbin.com/nuqujuyoha/2/edit?html,js,output
B. Arrays
http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/2/2?curriculum_id=502d635ceda910000200293b#!/exercises/0
http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/0/1?curriculum_id=506324b3a7dffd00020bf661
Day 1
Day 1
lesson a If/else - http://jsfiddle.net/ykbo9c9n/
lesson b - http://jsfiddle.net/7p3kktoj/
http://jsbin.com/pazina
Day2
Day3
Day4
Create mini game
Making an image transparent in Pixlr
LESSSON 5: students code
Elija Arollo http://jsbin.com/wawosiyoxu/1/edit
Jacob Maze
Jonah West http://jsbin.com/cuforemusi/1/edit
Adam Gallina http://jsbin.com/cumelilifu/1/edit?js,output
Jacob Maze code http://jsbin.com/yayezajupo/1/edit
elijah arollo http://jsbin.com/qedihibipu/2/edit
miranda dickinson
http://jsbin.com/kequnelige/1/edit
Logan Glasser http://jsbin.com/rodulofodo/1/edit?js,output
Logan Glasser http://jsbin.com/rodulofodo/1/edit?js,output
Eden Dickinson http://jsbin.com/puhatiwaxo/1/edit
Tanner Dickinson
Dallin Dickinson http://jsbin.com/gupewitoyo/1/edit
Derek Dickinson http://jsbin.com/cisirunocu/1/edit?html,js,output
DAY 5
Lesson Platform
1.Open the starter template http://jsbin.com/yahukababi/2/edit?js,output
2.Notice that it is not you
3.Find your spritesheet from last time (or use a the one in this template)
http://jimmyinteractive.com/games/ProgrammingClass/Lesson_PhaserSprite/assets/
4.Update your player to use your sprite sheet
update the spritesheet code to point to your picture or your friends
game.load.spritesheet('student','assets/WP_20150319_015.png',100, 178);
5.Update the animations to use the correct frames for each action
note: 'stand' can be a few frames to the player is not frozen
//animations
player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 10, true);
player.animations.add('stand', [53,54,55,54], 20, true);
player.animations.add('right', [28, 29, 30, 31, 32, 33, 34, 35, 36, 37], 10, true);
player.animations.add('jump', [56, 57, 58, 59, 60, 61, 62, 63, 64, 65], 10, true);
player.animations.add('dance', [72, 73, 74, 75,76,77,78,79,80,81,82,83,84,85,84], 20, true);
**Note that the back ground is very boring.
6.Add background
In the create function add the following code
//Todo: simple background for our game
// BROKEN game.add.Sprite(0, 0,640, 480, 'background');
**Walk around in your world and feel trapped in because your game is too small.
7.Expand the world
Update game.world.resize(640, 480);
To game.world.resize(2000, 480);
**You notice your world is bigger but you walk right off the edge
8. Add a camera to follow the player (add the following code)
At the end of the create function add the following code
//TODO: create camera to follow player
game.camera.follow(player);
**Walk around in your world and notice the background ends.
9.Tile your background
Update
game.add.Sprite(0, 0,640, 480, 'background');
To
game.add.tileSprite(0, 0,6400, 480, 'background');
**Walk around in your world and get board because there are not no platforms to jump on or items to get.
10.Add platforms
Add the following code to the create function
//Todo: create platforms
platforms = game.add.physicsGroup();
platforms.enableBody = true;
platforms.create(0, 64, 'platform');
platforms.create(200, 180, 'platform');
platforms.create(400, 296, 'platform');
platforms.create(600, 412, 'platform');
platforms.setAll('body.allowGravity', false);
platforms.setAll('body.immovable', true);
**Walk around in your world and jump on your platforms.
**Hahaha you fell right through them
11.Add physic collide player to platforms code
Add the following code to the beginning of the update function
//TODO: physic collide player to platforms
game.physics.arcade.collide(player, platforms);
**Walk around in your world and jump on your platforms. (should work now)
12.Create more platforms to jump on
add more code after
platforms.create(600, 412, 'platform');
**Walk around in your world and feel sad because there are no items to get.
13.Add stars
Add the following code to the end of the create function
//TODO:Add stars
stars = game.add.group();
stars.enableBody = true;
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i < 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 6;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2;
star.body.collideWorldBounds = true;
}
**Walk around in your world….Oh no all your stars feel through the ground, not cool.
14.Add collide code
Add the following code to the beginning of the update function right after //TODO: physic collide player to platforms
game.physics.arcade.collide(stars, platforms);
game.physics.arcade.overlap(player, stars, collectStar, null, this);
15.Add player collide with star code function at the end of the code (very bottom, right after
//TODO: add function collectStar)
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
}
**Walk around in your world and eat all the stars!
**Then realize you go no point for all your hard work
16.Add a score text to the game
Add the following code to the beginning of the create function right after //TODO: add score text display
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
17.Add point when you touch a star
in the collectStart function add the following code
// Add and update the score
score += 10;
scoreText.text = 'Score: ' + score;
**Walk around in your world and score lots of points
18.Add more stars
in the code (// Here we'll create 12 of them evenly spaced apart)
update the code to drop 40 stars
19.Add more platforms
**Run around in your world and get all the stars
**You win!
20.Save your work by copying the url of the web page and email it to [email protected] and yourself.
21.Next time: Update the spritesheet by removing all the green and saving it. Give it to the teacher to re-uploaded it or save it. Point to the new version
Sample finished product
http://jsbin.com/yahukababi/1/edit?js,output
Based off
http://phaser.io/tutorials/making-your-first-phaser-game
Students code
Adam Galina http://jsbin.com/lisahoyuca/1/edit?js,output
Miranda Dickinson http://jsbin.com/hariyuhahi/1/edit
stephen docy http://jsbin.com/hoqodexaha/1/edit
Derek Dickinsn http://jsbin.com/quhufebica/2/edit
Logan Glasser http://jsbin.com/kijocojeyu/2/edit
Elijah Arollo http://jsbin.com/qedihibipu/2/edit
issacs choose advendture
http://jsbin.com/poxupixose/1/edit
https://docs.google.com/document/d/1NQkRHPgOkjGOyAmyGUtw6snKDEkaAeLhWuZlzR0FmsE/edit?usp=sharing
Conner Glasser http://jsbin.com/cikomegahu/3/edit
Tanner Dickinson http://jsbin.com/xibohozeku/1/edit
Eden Dickinson http://jsbin.com/kipurehuci/2/edit
Adam Gallina http://jsbin.com/jetiyoyife/1/edit?js,output
Dallin Dickinson http://jsbin.com/qekexarahe/1/edit
Derek Dickinson http://jsbin.com/dafobamasi/1/edit
Miranda Dickinson http://jsbin.com/taderiyepu/2/edit?html,js,output
Elijah Arollo http://jsbin.com/gucezotohu/2/edit
Day 6 .
A. Lesson: Clean Sprite sheet / Array
http://jimmyinteractive.com/games/ProgrammingClass/Lessons/Lesson_Clean_Sprite_sheet.docx
http://jimmyinteractive.com/games/ProgrammingClass/Lesson_PhaserSprite/assets/
to upload: ftp://jimmyinteractive.com/Lesson_PhaserSprite/assets/ (username = class / password = class)
CODE
1. Matthew Greenwald
2. Eden Dickinson http://jsbin.com/bavonivifa/1/edit?html,js,output
3. Logan Glasser http://jsbin.com/cehocosuxu/3/edit
4. Elijah Arollo http://jsbin.com/nevorenuqa/1/edit
5. Derek Dickinson http://jsbin.com/megipazice/2/edit
6. Tanner Dickinson http://jsbin.com/nuqujuyoha/2/edit?html,js,output
B. Arrays
http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/2/2?curriculum_id=502d635ceda910000200293b#!/exercises/0
http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/0/1?curriculum_id=506324b3a7dffd00020bf661
Day 1
Day 1
lesson a If/else - http://jsfiddle.net/ykbo9c9n/
lesson b - http://jsfiddle.net/7p3kktoj/
http://jsbin.com/pazina
- Intro - Create Flappy Birds(drag and drop)
- Lesson 1 - Hello World
- Lesson 2 - Ask
- Lesson 3 - If/Else
- Lesson 4 - Choose Your Own Adv
Day2
- Lesson 5 - Functions code academy
- Lesson 6 - Rock, paper, Scissors https://jsfiddle.net/5mdpggcx/Play
- Play lab: http://studio.code.org/s/playlab/stage/1/puzzle/1
Day3
- Lesson7 - Draw an image https://jsfiddle.net/oth04yyy/
- Lesson8 - Move an image http://jsfiddle.net/fhchnnnn/
Day4
Create mini game
- Open Lesson - http://jsbin.com/vanosayuhe/1/edit?js,output
- Add controls to game to move:
- When left arrows is pressed move left
//Move to the left
player.body.velocity.x = -150; - When right arrows is pressed move right
//Move to the right
player.body.velocity.x = 150; - When up arrows is pressed jump
//Jump Player
player.body.velocity.y = -450;
- When left arrows is pressed move left
- Add animation on keypress
- When left arrows is pressed
//Play 'left' animation
player.animations.play('left'); - When right arrows is pressed
//Play 'right' animation
player.animations.play('right'); - When up arrows is pressed
//Play Jump animation
player.animations.play('jump'); - When down arrows is pressed
//Play Dance animation
player.animations.play('dance');
- When left arrows is pressed
- Record Video (teacher help)
- record a 5-10 sec video with the following moves all in one shot
- Walk left (inplace)
- Walk right (inplace)
- stand idle
- jump
- dance
- record a 5-10 sec video with the following moves all in one shot
- Save to folder (teacher help)
- Create images (teacher help)
- Point to new sprite sheet
- Get Image url from teacher
- Update the line with your image name
game.load.spritesheet('student','assets/img001.png',100, 178); - Update the line
player.body.setSize(20, 32, 5, 16);
to
player.body.setSize(100, 174, 0, 0);
- Play Game. Notice the animation is not correct
- Open the new sprite sheet find which frame each action is at.
- Update Animations
- Update the animation frames found at //animations
- Look at line player.animations.add('left', [0, 1, 2, 3], 10, true);
- The bold part tells what frames to play for each animation ... [0, 1, 2, 3]
- Update the left walking animation
- Update the right walking animation
- Update the jump animation
- update the stand animation
- update the dance animation
- Clean background
- Record Video (teacher help)
- Download your image to your computer
- open http://apps.pixlr.com/editor/ in the browser
- open your file (see Making an image transparent in Pixlr)
- delete all the green. use the magic wand to highlight all the green and hit delete
- clean
- upload (ask teacher)
- point game to new file
- Download your image to your computer
Making an image transparent in Pixlr
- Choose Open Image from Computer
- Click on the Magic Wand – third row down on the right side of the toolbar
- Make sure the tolerance (at the top of the Pixlr frame) is set anywhere from 20 on up – depending on the intricacy of the figure you want cut out. The more distinct the figure, the less tolerance you need. That will select what you want to delete from the photo.
- On the Pixlr top toolbar, click on Edit, choose Invert Selection. You will see that the figure you want is selected.
- Go to Edit, choose Copy.
- On the Pixlr top toolbar, click on File, choose New. Give the file a name.
- Check the two boxes: Create New Image from Clipboard and Transparent.
- Then click OK. You will see a gray and white background behind what you selected – it is transparent.
LESSSON 5: students code
Elija Arollo http://jsbin.com/wawosiyoxu/1/edit
Jacob Maze
Jonah West http://jsbin.com/cuforemusi/1/edit
Adam Gallina http://jsbin.com/cumelilifu/1/edit?js,output
Jacob Maze code http://jsbin.com/yayezajupo/1/edit
elijah arollo http://jsbin.com/qedihibipu/2/edit
miranda dickinson
http://jsbin.com/kequnelige/1/edit
Logan Glasser http://jsbin.com/rodulofodo/1/edit?js,output
Logan Glasser http://jsbin.com/rodulofodo/1/edit?js,output
Eden Dickinson http://jsbin.com/puhatiwaxo/1/edit
Tanner Dickinson
Dallin Dickinson http://jsbin.com/gupewitoyo/1/edit
Derek Dickinson http://jsbin.com/cisirunocu/1/edit?html,js,output
DAY 5
Lesson Platform
1.Open the starter template http://jsbin.com/yahukababi/2/edit?js,output
2.Notice that it is not you
3.Find your spritesheet from last time (or use a the one in this template)
http://jimmyinteractive.com/games/ProgrammingClass/Lesson_PhaserSprite/assets/
4.Update your player to use your sprite sheet
update the spritesheet code to point to your picture or your friends
game.load.spritesheet('student','assets/WP_20150319_015.png',100, 178);
5.Update the animations to use the correct frames for each action
note: 'stand' can be a few frames to the player is not frozen
//animations
player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 10, true);
player.animations.add('stand', [53,54,55,54], 20, true);
player.animations.add('right', [28, 29, 30, 31, 32, 33, 34, 35, 36, 37], 10, true);
player.animations.add('jump', [56, 57, 58, 59, 60, 61, 62, 63, 64, 65], 10, true);
player.animations.add('dance', [72, 73, 74, 75,76,77,78,79,80,81,82,83,84,85,84], 20, true);
**Note that the back ground is very boring.
6.Add background
In the create function add the following code
//Todo: simple background for our game
// BROKEN game.add.Sprite(0, 0,640, 480, 'background');
**Walk around in your world and feel trapped in because your game is too small.
7.Expand the world
Update game.world.resize(640, 480);
To game.world.resize(2000, 480);
**You notice your world is bigger but you walk right off the edge
8. Add a camera to follow the player (add the following code)
At the end of the create function add the following code
//TODO: create camera to follow player
game.camera.follow(player);
**Walk around in your world and notice the background ends.
9.Tile your background
Update
game.add.Sprite(0, 0,640, 480, 'background');
To
game.add.tileSprite(0, 0,6400, 480, 'background');
**Walk around in your world and get board because there are not no platforms to jump on or items to get.
10.Add platforms
Add the following code to the create function
//Todo: create platforms
platforms = game.add.physicsGroup();
platforms.enableBody = true;
platforms.create(0, 64, 'platform');
platforms.create(200, 180, 'platform');
platforms.create(400, 296, 'platform');
platforms.create(600, 412, 'platform');
platforms.setAll('body.allowGravity', false);
platforms.setAll('body.immovable', true);
**Walk around in your world and jump on your platforms.
**Hahaha you fell right through them
11.Add physic collide player to platforms code
Add the following code to the beginning of the update function
//TODO: physic collide player to platforms
game.physics.arcade.collide(player, platforms);
**Walk around in your world and jump on your platforms. (should work now)
12.Create more platforms to jump on
add more code after
platforms.create(600, 412, 'platform');
**Walk around in your world and feel sad because there are no items to get.
13.Add stars
Add the following code to the end of the create function
//TODO:Add stars
stars = game.add.group();
stars.enableBody = true;
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i < 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 6;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2;
star.body.collideWorldBounds = true;
}
**Walk around in your world….Oh no all your stars feel through the ground, not cool.
14.Add collide code
Add the following code to the beginning of the update function right after //TODO: physic collide player to platforms
game.physics.arcade.collide(stars, platforms);
game.physics.arcade.overlap(player, stars, collectStar, null, this);
15.Add player collide with star code function at the end of the code (very bottom, right after
//TODO: add function collectStar)
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
}
**Walk around in your world and eat all the stars!
**Then realize you go no point for all your hard work
16.Add a score text to the game
Add the following code to the beginning of the create function right after //TODO: add score text display
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
17.Add point when you touch a star
in the collectStart function add the following code
// Add and update the score
score += 10;
scoreText.text = 'Score: ' + score;
**Walk around in your world and score lots of points
18.Add more stars
in the code (// Here we'll create 12 of them evenly spaced apart)
update the code to drop 40 stars
19.Add more platforms
**Run around in your world and get all the stars
**You win!
20.Save your work by copying the url of the web page and email it to [email protected] and yourself.
21.Next time: Update the spritesheet by removing all the green and saving it. Give it to the teacher to re-uploaded it or save it. Point to the new version
Sample finished product
http://jsbin.com/yahukababi/1/edit?js,output
Based off
http://phaser.io/tutorials/making-your-first-phaser-game
Students code
Adam Galina http://jsbin.com/lisahoyuca/1/edit?js,output
Miranda Dickinson http://jsbin.com/hariyuhahi/1/edit
stephen docy http://jsbin.com/hoqodexaha/1/edit
Derek Dickinsn http://jsbin.com/quhufebica/2/edit
Logan Glasser http://jsbin.com/kijocojeyu/2/edit
Elijah Arollo http://jsbin.com/qedihibipu/2/edit
issacs choose advendture
http://jsbin.com/poxupixose/1/edit