2- How to Make HTML5 Games: Javascript Tutorial for Beginners JS Guide

Episode 2 about making a video game in HTML5. In this video, I introduce a basic collision system.

If you have any question, feel free to post a comment below or send me a Youtube PM.

[spspsp]

Thanks for the help, 1 million times better explained than my teacher, keep up the great work!

[bigstackofhayproductions]

Thankyou this series is just what I have been looking for: it is hard to find a good tutorial like yours!

[VMcKeown]

RC, another great video. I watched ahead, but now I'm writing the code to the video. The way you break down the code makes it easy to understand.

[xdukinja]

Which screen recorder and editor you use pls tell

[MWgamer]

glad to see you've picked up the series again ;)

[welkflingers]

Pretty to understand your tutorial. Cheers

[GringoProductions]

I have been programming for 4 months now. and this is easy to understand and follow. thank you!! quick question. where are you from? I can't figure your accent.

[BearsThatCare]

for mac users: Sublime Text 2 is a great text editor for mac

[ItsBao]

So I don't entirely understand the part where you made all of the variables for the movement to be negative. Only reason why I mentioned that is because one of the if statements for x or y, which is the last if statement before you changed it it, was a positive value. Now you turned them into negative. Why is that exactly?

[valentynfedorets]

make more video you are good.... Resp .... .

[zoranhacker]

Lol I already did this not knowing he was going to do it

[xavieracaling]

Hey can you explain this thing?
if (x > 400 || x < 30)
{

xDistance = -xDistance;

}
if (y > 500 || y < 0){

yDistance = -yDistance;

}

I can't really seem to understand why you should put -yDistance and ||.. PLZ

My brain is exploding here..

[masterpaper]

why did the spdy y go out of boundaries still? this is what I did:
//Varibals go here
var
ctx.font='30px Arial';
var x=50;
var spdx=30;
var y=40;
var spdy=5;

setInterval(update, 40);

function update(){
x+=spdx;
y+=spdy;
ctx.fillText('p', x, y);
if(x > 500){
spdx = -30;
}
if (y > 500){
spdy = -5;
}
if(y < 0){
spdy = 5;
}
}

[yeetstreet]

i know i'm 4 years late to the party but I copied your code word for word and it still won't bounce if anyone knows why lemme know pls

[codehardprogramming]

You DO NOT ALWAYS want to make a variable for a string because if you do you might mess it up in some projects

[omarkahlid]

if(x < 0 && x > Width){
console.log(Cm);
spdx = -spdx;
}

if(y < 0 && y > Height){
console.log(Cm);
spdy = -spdy;
}

[YPLabs]

I got dizzy watching it over and over again in my browser (puke);

[rossmanmagnus]

You know, it's spelled "HTML" not "ASH-TML".