Prevent the alien enemies from hitting your ships!
Click or tap on an enemy to destroy it.
A ship is destroyed when an enemy crashes into it.
The game is over when all your ships are destroyed.
After you get a "game over" click or tap on the game screen to restart the game.
If you manage to preserve at least one ship and survive until the timer hits 0, then you've won! Click/tap on the screen to restart and try to get a higher score.
Languages: Programming, Markup, and Style Sheets
Any app, video game, software, or anything computerized that you've used is controlled by a computer program. Programs can be written in many different programming languages. A programming language is a way for human software developers to write instructions telling the computer what to do. Some popular languages that you may have heard of include:
C
C++
C#
Java
Python
Ruby
JavaScript
Websites also use a different kind of language called HTML, which is a type of "markup language." A markup language tells a computer how text should look and act on the screen. For example, we can use HTML to make some text look bold or italic, or to change the text color, or create webpage elements like lists (kind of like our list of programming languages above) or checkboxes. Some common examples of markup languages include:
HTML and HTML5
XML
Markdown
SVG
Websites also use a style sheet language called "Cascading Style Sheets," or "CSS." A style sheet language provides reusable rules for how different markup elements on a webpage should look. Not only are these rules reusable for different elements on different websites, but they also allow developers to separate the styling from the HTML content, which makes everything easier to work with and maintain.
Our game (and this webpage) uses a combination of JavaScript, HTML5, and CSS.
Objects and Object-Oriented Programming
In real life, we can find different examples of objects. An object is a combination of behaviors (an object does something) and information or data (we can describe the characteristics of an object). We can also think of our game (and other programs) in terms of objects. For example, here are some possible objects in the game:
Enemy
Data
Speed
Image
Position/location on screen
Behaviors
Move on the screen
Disappear when clicked
Game Screen
Data
Size (width and height)
Background color
Behaviors
Update the objects on the screen (redraw enemies in their new positions after moving, and erase drawings of enemies in their old positions)
Draw the score on the screen
One game object can have effects on other objects in the game. For example, if we defeat one of the enemies, then the score goes up, and so the screen's score text needs to be updated. In other games, if an enemy touches a player, then the player's health might decrease as a result.
Thinking of games and other software this way, in terms of objects and how they interact with each other, is called "object-oriented programming."
Can you think of other possible objects, in this game or other games you like? What are some of their characteristics and behaviors?
Variables
In a program, we use something called variables to store data or information. Each variable has a name and a value. We can choose almost any name we like (within certain restrictions, such as names must start with a letter, all variables names must be unique, and so on, depending on the programming language). You start by “declaring” the variable and then assigning it a value, which basically means you tell the computer you want to store data, and then you give the data a name and a value. From then on, you can use the variable name to access and use or change the value. The “=” sign sets the value for a variable.
So in JavaScript, if we want to create a variable called “weight” and give it a value, we’d do this: var weight = 120; We can change the weight to something else (note that if you have already declared the variable, you don’t have to use “var” at the beginning).
weight = 200; We can use the variable by calling it by its name. For example:
var doubleWeight = 2 * weight;Data Types
As in real life, we have multiple types of data. Different programming languages have different types. In JavaScript, we have:
Numbers: Positive, negative, integers, decimals
Strings: Any text with “ “ around it
Booleans: true or false
Arrays: A list of items separated by commas, and enclosed by []
Null and undefined
Objects: Combination of related data and functions
Change the Enemy Motion!
Right now, let's try to change the enemy speed.
enemySpeed = 1;
We can also make the enemy move across the screen too, not just down. Try setting the boolean enemyXMotion variable to true!
enemyXMotion = false;
Change the Score!
If you click on and defeat an enemy, you get a certain number of points. Initially, it's 10 points. Try changing it to a different value!
enemyPointValue = 10;
Change the Enemy Image!
Want the enemy to look different? Let's change its image file! Right now, the code to set the enemy image looks like this:
enemyImage.src = "img/enemy.png";
This means that there is a variable called "enemyImage" which has a property called "src". Here are the possible values that I've set up for
you to use as images:
img/enemy.png
img/enemy2.png
img/enemy3.png
They are all stores as files behind the scenes on this website. Now try setting the image to one of these values.
enemyImage.src = "img/enemy.png";
Change the Background Color!
Right now the background is all white. Let's see if we can change that.
In the code, we've set up a list of colors ("const" means that the value is a constant, and won't change later in the code):
const BLUE = "blue";
const RED = "red";
const BLACK = "black";
const PURPLE = "purple";
const YELLOW = "yellow";
const WHITE = "white";
There's another variable called "colorOptions" that stores the colors we want to use for the background. We will allow up to three different colors, to create a gradient.
Try changing the colors in colorOptions. If you want to add more const values to give you more color options, here is a list of acceptable names:https://www.w3schools.com/colors/colors_names.asp
const BLUE = "blue";
const RED = "red";
const BLACK = "black";
const PURPLE = "purple";
const YELLOW = "yellow";
const WHITE = "white";
colorOptions = {
color1: WHITE,
color2: WHITE,
color3: WHITE
};
Change the Enemy Rate!
Are there too many enemies on the screen at once? Or maybe not enough? We can change the rate of enemy appearance on the screen.
We have a variable called "chance." Once every frame, we pick a random number, and if the number is less than "chance," we add a new enemy.
How can we change "chance" to make more enemies appear?
chance = 1/20;
More Resources
Please bookmark and keep an eye on this page! I will be adding more resources to it.
Here are some books that are available at the DC Public Library: