Learning HTML and JavaScript with a Simple Shooting Game: Lesson 4

This is a simple exercise meant to teach teens and beginning programmers the basics of programming. This lesson shows how we can start controlling other …

10 thoughts on “Learning HTML and JavaScript with a Simple Shooting Game: Lesson 4”

The Nerds Unite says:

March 12, 2019 at 2:37 am

you know you can just use key instead of keyCode. key returns the key you pressed in a string. if you press the A key it will return A
Marcio Carvalho says:

March 12, 2019 at 2:37 am

hi first of all tkz for the lesson i actually learned lots but im having a problem in this lesson for some reason its not finding the var e = document.getElementById(sprite.element); in the setPosition i try to do console.log to check if the sprite is working and its finding it but for some reason ir doesnt find the variable e it just comes null
Reece P says:

March 12, 2019 at 2:37 am

Please I so badly wanna finish this game
Reece P says:

March 12, 2019 at 2:37 am

hello my laser is not showing up at all i have put the laser div after the background and the hero div and still nothing happens please can you help me. but i prefer to have a css doc so my style is separate

this is my code:

<html>
<head>

<link rel="stylesheet" href="game.css">

</head>
<body>

<div id="background"></div>

<div id="hero"></div>

<div id="laser"></div>

<script>

var LEFT_KEY = 37;
var UP_KEY = 38;
var RIGHT_KEY = 39;
var DOWN_KEY = 40;
var HERO_MOVEMENT = 3;

var lastLoopRun = 0;

var controller = new Object();

function createSprite(element, x, y, w, h) {
var result = new Object ();
result.element = element;
result.x = x;
result.y = y;
result.w = w;
result.h = h;
return result;

}

function toggleKey (keyCode, isPressed) {
if (keyCode == LEFT_KEY) {
controller.left = isPressed;
}

if (keyCode == RIGHT_KEY) {
controller.right = isPressed;
}

if (keyCode == UP_KEY) {
controller.up = isPressed;
}

if (keyCode == DOWN_KEY) {
controller.down = isPressed;
}
}

function ensureBounds(sprite) {
if (sprite.x < 20 ) {
sprite.x = 20;
}
if (sprite.y < 20 ) {
sprite.y = 20;
}
if (sprite.x + sprite.w > 480) {
sprite.x = 480 – sprite.w;
}
if (sprite.y + sprite.h > 480) {
sprite.y = 480 – sprite.h;
}
}

function setPosition(sprite) {
var e = document.getElementById(sprite.element);
e.style.left = sprite.x + 'px';
e.style.top = sprite.y + 'px';
}

function handleControls() {
if (controller.up) {
hero.y -= HERO_MOVEMENT;
}
if (controller.down) {
hero.y += HERO_MOVEMENT;
}
if (controller.left) {
hero.x -= HERO_MOVEMENT;
}
if (controller.right) {
hero.x += HERO_MOVEMENT;
}

ensureBounds(hero);
}

function showSprites () {
setPosition(hero);
setPosition(laser);

}

function loop () {
if (new Date().getTime() – lastLoopRun > 40){
handleControls();
showSprites();

lastLoopRun = new Date().getTime();
}
setTimeout('loop();', 2)
}

document.onkeydown = function(evt) {
toggleKey(evt.keyCode, true);
};

document.onkeyup = function(evt) {
toggleKey(evt.keyCode, false);
};

var hero = createSprite('hero', 250, 460, 20, 20);
var laser = createSprite('laser', 0, -120, 2, 50);

loop();

</script>

</body>
</html>
Eddie Wiggs says:

March 12, 2019 at 2:37 am

Thank You!
German Hoyos says:

March 12, 2019 at 2:37 am

What if you wanted to shoot multiple lasers at once? would you make multiple divs?
Galex says:

March 12, 2019 at 2:37 am

the hero gets to the bottom and gets of the ensure bounds thing
Galex says:

March 12, 2019 at 2:37 am

i have a problem
Jason Thomas says:

March 12, 2019 at 2:37 am

Great Videos.
Jason Thomas says:

March 12, 2019 at 2:37 am

I wasn't getting a laser. Then I realized that since we're positioning absolute, I need to have the laser render after background and hero. Took me like 10 minutes to figure out what I was doing wrong.