Web Projects

Below are the web pages and games that I have created using HTML, CSS, and Javascript

Earth and Moon Orbit

This is an HTML, CSS, and JQuery project that I created that shows the Moon orbiting the Earth, while the Earth orbits the Sun.

I originally created this project using no Javascript, and with the Earth and Moon orbiting much quicker, but have since modified it in the following ways:

  • I slowed down the orbit of both objects, so that the Earth takes about 365 seconds to go around the Sun, and the Moon takes about 29 seconds to go around the Earth.
  • I added Javascript and additional CSS so that when the page is clicked, the Earth and Moon will orbit faster, with the Earth taking about 12 seconds to orbit the Sun and the Moon taking about 1 second.
Click here to open the project in a new tab.
You can also click here to download an archive of the project files.

Paper, Rock, Scissors

This is an HTML and JavaScript project where you can play 3 different variations of Paper, Rock, Scissors:

  • Classic
  • Paper, Rock, Scissors, Lizard, Spock
  • Ninja, Hunter, Bear
Click here to open the project in a new tab.
You can also click here to download an archive of the project files.

Riddle Me This

This is a JavaScript project where you will be asked 25 riddles. See if you can answer them all!
Click here to open the project in a new tab.
You can also click here to download an archive of the project files.

Troll Quiz

This is a JavaScript project where you will be asked 3 riddles by a Forest Troll. Get any wrong, and you will meet your end.
Click here to open the project in a new tab.
You can also click here to download an archive of the project files.

Status Posting (Twitter-Style Status Updates)

This is a JQuery project that allows you to enter up to 140 characters into a text area, and "post" it to the page.

  • Posts are save locally. Saved posts can be cleared with the 'Clear Posts' button.
Click here to open the project in a new tab.
You can also click here to download an archive of the project files.

Flappy Bird

This is a JavaScript project where you can play Flappy Bird.

The game has a Score system, and your High Score will be saved between plays, as long as you use the same browser and you do not clear your browser cache or locally stored data. There are also sounds that will play when you press a key to fly up and when you gain a point by successfully flying between the pipes.

You can press most keys on the keyboard to make Flappy Bird fly up, and if you hit any pipes or the ground, you start all over. If you press the 'p' or 'Esc' keys, the game will pause/unpause. If you press the 'm' key, the flying and score sounds will be muted/unmuted (persists through plays/sessions when using same browser and not clearing cache/locally stored data).


Click here to open the project in a new tab.

Connect Four

This is a JQuery project where you can play Connect Four.

While dragging the mouse over a column, the lowest available spot will be filled in with a lighter shade of the current player's color, until you click. The current player will be displayed at the top of the page. Red goes first.
Click here to open the project in a new tab.

Asteroids

This is a JavaScript project where you can play the game Asteroid.

More asteroids appear on each level, and each level increases the speed of each asteroid. The player has 3 lives, after which the game ends, and you have to start back at Level 1. Also, on each third level, you gain a nuke that destroys one set of asteroids for each nuke, i.e. 1 nuke will destroy all asteroids remaining on the screen, 2 nukes will also destroy each smaller asteroid created from the first set, and 3 nukes would be capable of destroying a whole level's worth of asteroids. Use them wisely, as using a nuke when you have one asteroid left will just destroy that one asteroid!
The player can also choose between 9 ship colors, and their choice will be saved for future plays (on the same browser). The player also has the option of turning off the various game sounds, and these choices are saved as well.

Controls

  • Rotate left: 'a' key or the left arrow
  • Rotate right: 'd' key or right arrow
  • Forward thrust: 'w' key or up arrow
  • Fire lasers: spacebar.
  • Use nuke(s): 'b'
  • Restart game: 'r' or refresh the page

Click here to open the project in a new tab.

Simon

This is a JavaScript project where you can play a recreation of the classic Simon game.

To start the game, check the 'Power' box and click the 'Start' button. The game will show an increasing sequence of colors which the player must repeat, until they successfully repeat a sequence of 20, resulting in a win. When the player gets a color wrong, and the 'Hard' box is not checked, then the player will be given another chance to remember and repeat the same sequence. If the 'Hard' box is checked, then the player will have to start all over.
Click here to open the project in a new tab.