Select Lesson
Lesson notes
Editor
Make a game
Reference for Game Making
Play others games
PaperScript
Gaming references
Create JS projects with IDE
Lesson notes
Editor
Make a game
Reference for Game Making
Play others games
PaperScript
Gaming references
JavaScript IDE
The JavaScript IDE is a place where you can make your own JavaScript and PaperScript programs.
.js
at the end
Lesson notes
These are lesson notes for a range of courses and they will help you use the IDE
- JavaScript intro lesson plans
- Game development lesson plans
- PaperScript lesson plans (Draw the flags of the world)
Editor
Use the editor to plan your first room.
To find the editor go to the JavaScript IDE (place where you write your own projects). Follow this URL: https://codeavengers.com/javascript/7 or follow these steps:
Here are the tools you need to know:
- Open a new file and name it, add .js on the end. eg
throwing_game.js
- Go to the editor
This is the place to plan your work.
Click and drag the type of object you want onto the grid. Don't worry if they are not the sprites you want for the objects, we can change that later.
After you have made your layout of your first room click show code.
Make a game
After you have made your layout of your first room click show code.
The code for the objects will appear. If you hit run
and click inside the pop up box, you can bring up the game and play it as you create it.
Use the reference
to find some cool code to add, or if you have forgotten some code.
You can do things like add a score, unlock doors, shoot guns and change sprites.
Reference for Game Making
Click the Reference
button in the JavaScript IDE to find example code for different things.
A catalog of images and a small reference list of objects can be found in the activities section in this book.
Play others games
When you are ready to share your game hit the deploy
button. Give your game a name and write some instructions or a small introduction on what your game is about.
The game will pop-up so make sure your browser allows pop-ups from Code Avengers Message someone your code and play theirs.
PaperScript
You can use our JavaScript IDE→ to make, save and share your own digital designs.
Make sure you have //paper 600 600
at the top of your page if you want a nice big canvas to work on.
You can change the size of the canvas by changing the numbers //paper 200 500
for example makes a 200 wide by 500 high box to create on.
Adding 2D graphics to a webpage
If you want to add your images to a normal web page outside of Code Avengers, it will require a little set up.
Code to add images
We have made a Path module'' that is based off the2D JavaScript graphics module'''.
The Code Avengers' code is easier to use because we do all of the set up for you but it only works on code saved on our website.
If you are ready to make graphics in your own website then read the content below.
You first need to learn about HTML <canvas>
and linking JS, HTML and the 2D context library.
Then you need to learn how the functions work for 2D, we have some notes and links below that can help you.
You can add this to your html page
The tags and JS covered here are <canvas></canvas>
and .getContext('2d')
You can draw images and shapes onto a webpage using code instead of uploading an image.
Canvas tag —<canvas></canvas>
HTML5 element <canvas>
gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, shapes, text or even do simple (and not so simple) animations.
To get canvas
to work is a little tricker than the other tags. The <canvas>
element places the drawing window on the page. We added a border in CS so you can see it. But the drawing is written in JavaScript.
Adding JavaScript
The 2d
interface is used for drawing circles, rectangles, text and more inside a canvas element. The library called '2d' has all the code context to draw the shapes (written in JavaScript) on the canvas.
So in the code above we have a canvas
in HTML but the important stuff is happening in the script
element.
Firstly we make a variable that links our canvas to the JavaScript, var drawing = document.getElementById('drawing');
.
Then we create a variable to link our JavaScript to the already existing code inside the file called 2d
, var codeForDrawing = drawing.getContext('2d');
.
Now with those 3 things linked you can draw a lot of different shapes.
2d
so you only have to ask for the browser to find it and pull the context out of it. Read a good explanation of context on StackOverFlow by Brian Kelly from 2011.Drawing shapes
You can draw many things, the basics are lines, rectangles, circles, triangles, half circles and stars. The drawing code is slightly different to what you have learned here at Code Avengers.
See a range of options at W3schools
Rectangle
Lines
Begin a path, move to position 0,0. Create a line to position 300,150:
Triangle
Circle
Use arc to make a full circle
(name.arc(x,y coordinates of center, radius, start angle(0 is on right side of screen), end angle, clockwise?)
The angles are not degrees but radians. 2PI is a whole circle so 1*Math.PI
will draw half a circle etc.
Semi circle
arcTo
here is more of a rounded corner function
Use
arc
instead and brush up on your radians and PI. You can use PI in your equation- you just have to call it from the Math library, Math.PI
.
name.arc(x-of center,y-of center,radius,sAngle,eAngle,counterclockwise (optional));
name.arc(40,40,20, 1*Math.PI,2*Math.PI,true);
The beginPath() method begins a path, or resets the current path.
Color
You can draw a wide range of shapes and change their colors. There are two parts of a shape that you can control the color of the fill and the stroke:
fill
'Color in', the color that fills up the inside area of a letter or shape
stroke
The lines that make up the outline of a letter or shape
There are a couple of ways you can change the color of your graphic.
You can use 'symbolic names' like 'red', 'chartreuse' 'OrangeRed', or, if you know about RGB or Hex colors, these work too.
rect.fillColor = '#5889D2'; //hex
rect.fillColor = 'rgb(88,137,210)';//RGB
rect.fillColor = 'stelBlue';//nameshape1.fillStyle = 'red';
shape1.strokeStyle= 'blue';
Gaming references
Object Reference
Click the REFERENCE button in the JavaScript IDE to find example code for different things.
Here is a list of terms to search:
- Audio.play
- Game.BadItem
- Game.Bar
- Game.Button
- Game.clearCharacters
- Game.clearItems
- Game.clearTimerEvents
- Game.Door
- Game.Enemy
- Game.fadeOut
- Game.FadingLabel
- Game.Goal
- Game.GoodItem
- Game.Gun
- Game.Item
- Game.Moveable
- Game.nextLevel
- Game.Obstacle
Image Catalog
These are images available on the Code Avengers website for games. Simply replace the file paths of your characters and objects.
new Game.Player(50, 50, '/image/game/player1.png')
Disclaimer:It is not a complete list and some image files could be moved or renamed post publication.
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F