C omputing TeacherLeader at Moldgreen Community Primary School Huddersfield wwwcomputingcpdweeblycom MartinNorriskirkleeseducationuk CAS Master Teacher wwwcomputingatschoolorguk ID: 563315
Download Presentation The PPT/PDF document "Martin Norris" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Martin Norris
Computing Teacher/Leader at Moldgreen Community Primary School, Huddersfieldwww.computingcpd.weebly.com Martin.Norris@kirkleeseducation.ukCAS Master Teacherwww.computingatschool.org.uk (CAS)
Welcome!Slide2
CPD session 3
1.00pm HTML to write a webpageWebsites using templates1.30pm Touch Develop: Creating a background1.50pm BREAK
2.00pm Touch Develop: Sprites2.50pm EmailQuestions?3.00pm Finish.Slide3
Today’s intended outcomes:
Create webpages using HTML and templatesDevelop programming skills using a different environmentSlide4
HTML
Hack the web!Mozilla ThimbleEAKSlide5
Hack the Web (X Ray Goggles!)
https://goggles.mozilla.org/ Slide6
Mozilla Thimble
https://thimble.mozilla.org/en-US/ Save projects easily with one class login (UN = mrnorris -> pw = …)Other projects on there to remixWith a login, you can publish your work to the web!Slide7
Good
Great
Even Better
❶Change the heading
❹ Introduce a
different picture
❷Write a new paragraph
❸Make something bold or italics
<
img
src
=“ “/>
Tip: Don’t forget to
close
the tags, especially <p> tags
Extra
challenge: You could even upload your
own
picture to the
web
<strong>amazing</strong>
<
em
> ….. </
em
>
<
p>
…
</
p>Slide8
Thimble – Further challenge
Hyperlink<a href=https://goggles.mozilla.org/>X-Ray Goggles</a> (http:// is important here)Video hosting<iframe width="560" height"315" src="https:// WEB ADDRESS" frameborder
="0" allowfullscreen></iframe>Wordpress/Weebly
for Education– children can try to write the blog using html.Slide9
No internet connection?
Use notepad/wordpad and printed helpsheets to write some HTML fileseg.<!doctype html><html> <head> <meta charset=“utf-8”> <title>Title goes here!</title>
</head> <body> <p>Some text can come in here!</p> </body></html>Save as ***.html - open the file and it should open in a browser window.Slide10
EAK
www.eraseallkittens.comSlide11
Further HTML help
Hour of codehttp://www.w3schools.com/html/default.asp http://primary.quickstartcomputing.org Slide12
Email/Websites
Google MailGoogle Sites - https://sites.google.com/ Planning example in Communicating page of my website – http://www. computingcpd.weebly.com Blog sites – Wordpress (ads), Blogger or
Weebly for Education http://help.weebly.com/education-webcast.html Slide13
web app
iPhone, iPad, Android, Windows, Mac, Linuxtouchdevelop
Windows Phone app
access to most sensorsSlide14
touch
developCloud computingCreate at home on your mobileAnywhere with internet accessProgram to respond to touch or mouse clicks.Publishing a script to make it available for all other users.Slide15
touch
developIf you are typing on a keyboard you should notice that as you start to type each command a list of matches will appear on the left. When you see the command you are looking for, you can use the UP and DOWN cursor keys to move onto it and then press ENTER to select it. Slide16
The main code for your program is called main() so anytime you want to go back to your code select main() from your scripts.
Game properties score – controls the score in the game lives – controls how many lives you have left in the gameBoard properties width – controls the width of the game playing area
height – controls the height of the game playing area background – controls the background of your game playing areaSprite properties
artwork – controls the appearance of your sprite character or obstacle speed – controls the speed at which your sprite moves
height – controls the height of your sprite
width – controls the width of your sprite
Position – controls where the sprite appears on the screenSlide17
Game
object functionsIf we want to change the value of a property, we usually call a function. Functions are programs we can call that do something for us. In this case, the functions change the value of a property for us. To change the value of a score we call set score, to change a width we call set width etc. NB there are a few slight irregular names eg. change the position you call set pos.Slide18
Game
functionsset score – change the scoreset life – changes the number of livesBoard functionsset width – changes the widthset height – changes the heightset background – allows you to change the background color
set background picture – allows you to display a picture as a backgroundSlide19
Background
I want to do something to the board object The set background scene function can be used to change the background picture Slide20
Background
1) Add art to the media sectionSlide21
Background
2) Let's add code to set the game's background scene.Slide22
Game
function: set livesFor example, if I want to change the number of lives in the game, I will work with the game object, since lives is a property of the game object.Which function?
To set the number of lives to 1000, The code will look like this: game-> set life(1000)
Change the number of lives in your game.Slide23Slide24
Sprites (variables)
Each obstacle, power up, enemy, or character is created by adding a sprite. 1) Add a picture to the art section first
Creating a variable or a var. The name of the variable is selected automatically, and we can change it if we like. The variable will start appearing in the tiles so we can use it later.Slide25
y, x
Origin is the top left corner = (0,0)Slide26
Sprite functions
set speed – changes the speed of the spriteset height – changes the size of your spriteset width – changes the size of your spriteset pos – changes where on the screen your sprite is displayedSlide27
Set a speed for your sprite
Select the tile for your sprite. Select set speed, and enter an x (horizontal) velocity, and a y (vertical) velocity.Let’s try it and try changing the speeds to see the effects.Slide28
Other code
code to create a boundary on the board.game → bounce on sidescode to set a gravity force on the board so that sprites fall when they appear on the board.board → set gravity(0, 200)Slide29
Conditionals (if, then, else)
What function do you want to call? Slide30
User input
User input can be introduced by using the gamepad object and asking the program to do something when (on) button is pressed:
In my example, the football is moved by the click or touch of the screen.Slide31
Other challenges…
Can you make our player sprite move up and down too? Can we add a 2nd ball that loses you points?Add a sound resource to the art/media…then include a line of code to play the sound…when they overlap?Slide32
Further
touchdevelop Resourceshttps://mva.microsoft.com/en-US/training-courses/learn-to-code-with-codexist-the-birth-of-bot-8470?l=O2GJDJXz_6304984382