starter instructions for making a game board and moving a character around

jquery_game.md

Use javascript & jquery to make a video game

We'll have a "gameboard" div, a character div, and use buttons as our "controllers" to start with:

<div id="gameboard">
    <div id="character"></div>
</div>
<ul id="controls">
    <li id="left"><</li>
    <li id="up">^</li>
    <li id="down">\/</li>
    <li id="right">></li>
</ul>

Here's some basic styling to get the page set up:

(feel free to change the background image of the character!)

#controls {
  list-style-type: none;
  position: absolute;
  margin-top: 320px;
}

#controls li {
  float: left;
  font-size: 2em;
  border: 1px solid #aaa;
  padding: 0px 8px;
  margin: 8px;
  border-radius: 5px;
  cursor: pointer;
}

#gameboard {
  height: 300px;
  width: 800px;
  border: 1px solid #ddd;
  position: fixed;
  border-bottom: 10px solid green;
  background-color: skyblue;
}

#character {
  position: absolute;
  width: 42px;
  height: 60px;
  bottom: 0px;
  background-image: url("http://img04.deviantart.net/46f8/i/2009/333/8/7/mario_wii_8bit_by_akumajo100.jpg");
  background-size: contain;
}

Let's write a moveRight function. We'll then call that function when the right arrow button is clicked.

HINT: We'll use the jquery offset() function. Look it up, and see if you can figure out how it works.

function moveRight() {
  // get our character's position from it's css
  var position = 
  // increase the position (we'll try 5 px for now)
  var newPosition = Math.round(position) + 5;
  // update the character's css:
  
}