Javascript Project

Code

In this project, you will make a javascript browser game. I have some basic code attached - why don't you take a look here.

Directions

There are three sections in game.html:

The javascript section (between the
```
<script>
```
tags) is the actual game logic.
The CSS section (inside the
```
<style>
```
tag) defines how your game objects look - color, size, and stuff.
The HTML section (inside the
```
<body>
```
tag) simply lists out your game objects. Right now, there are two objects: the player and a random block.

Most of the cool stuff will happen in the javascript. There are two functions: the

$(document).keypress

function, and the

everyTick

function. The

$(document).keypress

function is automatically called every time you press a keyboard key. Right now, it detects whether you used the wasd keys, and moves the player block around. The

everyTick

function is automatically called 30x a second. Right now, it bounces a block around the screen. You can use the code in these functions as an example for how to write your own.

If you're not familiar with javascript, you can find examples of most of the basic syntax in the provided code. Here's some more info to get you started:

When you make a variable, you don't need to specify its type. (In fact, you can't specify the type of a variable at all.) This is perfectly fine:

x = 5;

This code uses jQuery to move objects around. A quick jQuery primer:

```
$('#object-id')
```
finds an HTML tag with the given id. You can also use
```
$('.object-class')
```
to select every object in a class.
```
object.css(property)
```
returns the CSS style of the property.
```
object.css(property, value)
```
sets property to value. We set the 'top' and 'left' properties of some divs to simulate movement. You can also set anything else you'd like: 'background-color', 'width', etc.
There are tons of other things you can do with jQuery. Google is your friend - you can also ask us.

You can do whatever you want from here on. Here are some ideas for stuff to implement, if you don't have a good idea already:

Make it so that the player can't move off the screen. You can do this by adding some if statements in either the keypress or the everyTick function.
Figure out how to spawn a new div whenever the player hits a certain key. Hint:
```
$('body').append('some text')
```
adds text to the end of the body. Use this to add more divs.
Turn the new divs into bullets. Make them move automatically. You will get a sticker for making it this far. Call us over for a check-off.
Detect when the bullets hit the green block. Make the green block disappear, or something.
Spawn enemies automatically... you are most of the way to making a video game now. The rest is up to you!

Proceed to Code