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

Показать описание

Рекомендации по теме

Комментарии

what should be used in place of keyCode since it has been deprecated?

zarnabkhan

Thanks for the video. Since it's for beginners, I do wish you would have walked us through the code step by step, especially function loop() {...} on through togglekey() through loop(). I'm trying to figure out exactly when things are being invoked and why.

mike

i cant seem to get the controls to work. Any help would be greatly appreciated. Here's my code:

<html>
<head>
<style>
#hero {
background: #ff0000;
width: 20px;
height: 20px;
position: absolute;
}

</style>
</head>
<body>
<div id="hero"></div>
<script>

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

var HERO_MOVEMENT = 5;

var lastLoopRun = 0;

var hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;

var controller = new Object();

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 setPosition(sprite) {
var e =
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;
}
}

function showSprites() {
setPosition(hero);
}

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);
};

loop();

</script>
</body>
</html>

alexbrown

Hi, i love this series im learing a lot and i thought you shoud make more game programming tutorials

triator

does all computer arrow keys equal to 37, 38, 39, 40?

aby

hi, I tried it out and the square just moves back to the top left and it doesn't move. What did I do wrong? Here's my code:

<html>
<head>
<style>
#hero {
background: #ff0000;
width: 20px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<div id="hero"></div>
<script>

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

var lastLoopRun = 0;

var hero = new Object();
hero.element= 'hero';
hero.x = 250;
hero.y = 460;

var controller = new Object ();

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 setPosition(sprite) {
var e =
e.style.left = sprite.x + 'px';
e.style.top = sprite.y + 'px';
}

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

function showSprites() {
setPosition(hero);
}

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);
};

loop();

</script>
</body>
</html>

KonoKoara

so i am making a game and the map is pretty darn big. like you will have go off screen to see the whole map. But the problem is the camera won't follow the character . But here's the thing I want the camera to follow my div tag, can you make a video in how to do so? notify me if you do that would be so much help too me thx. If you can't which i am hoping you will jst tell me.

masterpaper

Every time I add this new code, my hero returns to the top left corner and will not move when I add the code to make it move. Please help!!

nickmiller

My hero moves up and down nicely as expected, but the right and left either teleports to the wrong direction or doesn't move at all.

<html>
<head>
<style>
#hero {
background: #ff0000;
width: 20px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<div id="hero"></div>
<script>

var hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;
var controller = new Object();
var UP_KEY = 38
var DOWN_KEY = 40
var LEFT_KEY = 37
var RIGHT_KEY = 39
var lastLoopRun = 0
var HERO_MOVEMENT = 5

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 handleControls() {
if (controller.up) {
hero.y = hero.y - HERO_MOVEMENT;
}
if (controller.down) {
hero.y = hero.y + HERO_MOVEMENT;
}
if (controller.right) {
hero.x = hero.y + HERO_MOVEMENT;
}
if (controller.left) {
hero.x = hero.y - HERO_MOVEMENT;
}
}

function showSprites() {
setPosition(hero);
}

function loop() {
if(new Date().getTime() - lastLoopRun > 40) {
handleControls();
showSprites();
lastLoopRun = new Date().getTime();
}
setTimeout('loop();', 2);
}

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

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

</script>
</body>
</html>

jeffreychen

mine won't work i don't know why there is no error messages when I use the arrows nothing happens

skatelord

im trying to press the keys in the javascript console on chrome but it doesnt do what your video shows

reecep

what allows you to be able to replace the boolean 'true' statement and the 'isPressed' statement?

AJ-kppf

Timothy to make ur youtube channel go more well avoid mistakes

theaarohanbaral

?

<html>
<head>
<style>
#hero {
background: #0033cc;
width: 30px;
height: 30px;
position: absolute;
}
</style>

</head
<body>
<div id="hero"></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 hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;

var controller = new Object();

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 setPosition(sprite) {
var e =
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;
}
}

function showSprites() {
setPosition(hero);
}

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

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

document.onkeyup = function(evt) {
toggleKey(evt.KeyCode, true);
};

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

loop();

</script>
</body>
</html>

AndreasStom

my hero is not in the his place he still in the left up corner and doesnt move
my code
var hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;

rukiielcalvo

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

HTML, CSS, and Javascript in 30 minutes

4: How to Include JavaScript in Our HTML | JavaScript Tutorial | Learn JavaScript | For Beginners

What is HTML, CSS, and JavaScript?

How Much HTML, CSS, & JavaScript Is Enough? | Realistic Expectations

HTML, CSS, JavaScript Explained [in 4 minutes for beginners]

HTML in 5 minutes

Pikachu | HTML CSS JavaScript

I learned HTML CSS & JavaScript | Now What? #grindreel

Portfolio Website with HTML & CSS & JavaScript Tutorial #portfoliowebsite #html #css #javasc...

How Much HTML, CSS, & JavaScript Is Enough In 2023 | Setting Realistic Expectations

Learn JavaScript - Full Course for Beginners

HTML Tutorial for Beginners: HTML Crash Course

Learn HTML in 1 hour 🌎

You'll Never Get A Job By Just 'Learning' HTML, CSS & JavaScript

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

Stop wasting time when you're learning to code!

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

God Tier HTML Programming

Should I Learn HTML or JavaScript First?

Squares | HTML CSS

Maybe the easiest way to share HTML, CSS, and JS?

Solar System | HTML CSS

Learn to Code in 5 Minutes - HTML, CSS, and Javascript Tutorial | Must Know Advice for Beginners

Front-End Development, HTML & CSS, Javascript & jQuery by Jon Duckett | Book Review