JavaScript 2

Move Game Objects

You already know variables and maths. Now use JavaScript to change where something is on the screen.

1 · Function 2 · onclick 3 · Find an Element 4 · Change left 5 · Move Both Ways 6 · Move Up & Down

Before JS 2

CSS 3.1 Gives Us a Movable Player

For JavaScript movement, the player needs position: absolute. Then left and top tell us where it is.

The CSS you need

.game {
    position: relative;
    width: 600px;
    height: 260px;
}

#player {
    position: absolute;
    left: 20px;
    top: 90px;
}

Movement idea CSS gives the player a position. JavaScript will change that position.

JS 2.1

1. A Function = Code You Can Run

A function gives a group of code a name. Later, a button can run it.

Code

<!DOCTYPE html>
<html>
<body>

<button onclick="sayHi()">RUN FUNCTION</button>

<script>
function sayHi() {
    alert("Hi!");
}
</script>

</body>
</html>

ResultClick the button

Create itfunction sayHi() { }Give some code a name.

Run itsayHi()The brackets mean: run this function.

Button clickonclick="sayHi()"Run it when the button is clicked.

JS 2.2

2. Find the Player

Before JavaScript can move an HTML element, it needs to find it. Give the element an id, then use getElementById.

Code

<h2 id="player">PLAYER</h2>

<button onclick="changePlayer()">CHANGE PLAYER</button>

<script>
function changePlayer() {
    let player = document.getElementById("player");

    player.style.color = "red";
}
</script>

ResultJavaScript finds #player

Remember document.getElementById("player") means: find the HTML element whose id="player".

JS 2.3

3. Change `left` With JavaScript

If CSS can say left: 20px, JavaScript can change it to left: 100px.

Code

<!DOCTYPE html>
<html>
<head>
<style>
.game {
    position: relative;
    width: 600px;
    height: 260px;
    background-color: lightblue;
    border: 3px solid navy;
    overflow: hidden;
}

#player {
    position: absolute;
    left: 20px;
    top: 90px;
    width: 70px;
}
</style>
</head>
<body>

<div class="game">
    <img id="player" src="../rocket.png">
</div>

<button onclick="movePlayer()">MOVE RIGHT</button>

<script>
function movePlayer() {
    let player = document.getElementById("player");

    player.style.left = "100px";
}
</script>

</body>
</html>

ResultClick MOVE RIGHT

The important line player.style.left = "100px"; means: change the player's CSS left value to 100px.

Try it

Change "100px" to "200px", RUN, then click the button.

JS 2.4

4. Move Again and Again

A real movement button should move a little farther every time you click it. Store the position in a variable.

Code

<!DOCTYPE html>
<html>
<head>
<style>
.game {
    position: relative;
    width: 600px;
    height: 260px;
    background-color: lightblue;
    border: 3px solid navy;
    overflow: hidden;
}

#player {
    position: absolute;
    left: 20px;
    top: 90px;
    width: 70px;
}
</style>
</head>
<body>

<div class="game">
    <img id="player" src="../rocket.png">
</div>

<button onclick="moveRight()">RIGHT →</button>

<script>
let x = 20;

function moveRight() {
    let player = document.getElementById("player");

    x = x + 20;

    player.style.left = x + "px";
}
</script>

</body>
</html>

ResultClick RIGHT several times

Remember positionlet x = 20;The player starts 20px from the left.

Add movementx = x + 20;Add 20 every click.

Put it on screenplayer.style.left = x + "px";Turn the number into a CSS value.

Why add "px"? JavaScript's x is a number such as 60. CSS needs a value such as 60px.

JS 2.5

5. Right AND Left

Right adds to x. Left subtracts from x.

Code

<style>
.game {
    position: relative;
    width: 600px;
    height: 260px;
    background-color: lightblue;
    border: 3px solid navy;
    overflow: hidden;
}

#player {
    position: absolute;
    left: 20px;
    top: 90px;
    width: 70px;
}
</style>

<div class="game">
    <img id="player" src="../rocket.png">
</div>

<button onclick="moveLeft()">← LEFT</button>
<button onclick="moveRight()">RIGHT →</button>

<script>
let x = 20;

function moveRight() {
    let player = document.getElementById("player");

    x = x + 20;
    player.style.left = x + "px";
}

function moveLeft() {
    let player = document.getElementById("player");

    x = x - 20;
    player.style.left = x + "px";
}
</script>

ResultControl the rocket

Challenge

Make the rocket move 40px each click instead of 20px.

JS 2.6

6. Add Up & Down

Horizontal movement uses left. Vertical movement uses top. So we need one more variable: y.

Code

<style>
.game {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: lightblue;
    border: 3px solid navy;
    overflow: hidden;
}

#player {
    position: absolute;
    left: 20px;
    top: 100px;
    width: 70px;
}
</style>

<div class="game">
    <img id="player" src="../rocket.png">
</div>

<button onclick="moveUp()">↑ UP</button>
<button onclick="moveLeft()">← LEFT</button>
<button onclick="moveRight()">RIGHT →</button>
<button onclick="moveDown()">↓ DOWN</button>

<script>
let x = 20;
let y = 100;

function moveRight() {
    x = x + 20;
    document.getElementById("player").style.left = x + "px";
}

function moveLeft() {
    x = x - 20;
    document.getElementById("player").style.left = x + "px";
}

function moveDown() {
    y = y + 20;
    document.getElementById("player").style.top = y + "px";
}

function moveUp() {
    y = y - 20;
    document.getElementById("player").style.top = y + "px";
}
</script>

ResultFour-direction movement

Horizontalx → leftChange x to move left/right.

Verticaly → topChange y to move up/down.

Same patternnumber + "px"Both directions use the same idea.

Core checkpoint

JS 2 Core Complete ✓

If you can make an object move with buttons, you have the main JS 2 skill.

function
onclick
document.getElementById()
element.style.left
element.style.top
use x and y variables
add/subtract movement
add "px" to a number

Build It

Mini Challenge: Reach the Target

Make a player and a target. Use your four movement buttons to move the player toward the target.

Starter

<div class="game">
    <img id="player" src="../rocket.png">
    <div id="target">⭐</div>
</div>

<button onclick="moveUp()">UP</button>
<button onclick="moveLeft()">LEFT</button>
<button onclick="moveRight()">RIGHT</button>
<button onclick="moveDown()">DOWN</button>

Goal Do not worry about detecting the win yet. JS 3 will teach collisions. For now, just make the controls work.

Remember

JS 2 Memory Map

function move() { }Create code you can run.

onclick="move()"Run a function on click.

getElementById("player")Find an HTML element.

let x = 20;Remember horizontal position.

x = x + 20;Move right.

x = x - 20;Move left.

style.leftChange horizontal CSS position.

style.topChange vertical CSS position.

x + "px"Turn a number into a CSS size.

The big memory rule Remember the position → change the number → put the new number back into CSS.

JavaScript 3: Game Logic & Collisions

Next: detect when the player reaches something, keep score and start turning movement into a real game.

CSS 3.1 Gives Us a Movable Player

1. A Function = Code You Can Run

2. Find the Player

3. Change left With JavaScript

4. Move Again and Again

5. Right AND Left

6. Add Up & Down

JS 2 Core Complete ✓

Mini Challenge: Reach the Target

JS 2 Memory Map

3. Change `left` With JavaScript