28- Making HTML5 Game: Resizing Game Part 2. Javascript Tutorial Guide

EP28 about making a video game in HTML5. In this video, I cover another way to automatically resize the game to match the size of the browser window.

Next Episode: Coming soon.

If you have any question, feel free to post a comment below.

[bernardlaughlin]

Thank you for this. It worked! This is just what I needed to resize my game.

[maltager]

So I just watched a bunch of your tutorial series over the past day or so and it was super helpful for learning the basics of Javascript! Thank you very much for making this, you are very good at explaining things without going too slow. I just wanted to mention that your Episode 26->27 annotation doesn't work, and you have no Episode 27->28 annotations. It sucks because for some reason I don't get the next video recommended on my sidebar for almost any of these episodes of this series.

[codescode]

Your tutorials are great! Was wondering if you could do one on how to generate a multilayered tilemap from a JSON and tilesheet, instead of just an image? I am attempting to implement this and am having trouble as the screen flickers on the tiles drawn. Thanks!

[juste]

Hey. Could you make a tutorial on how to add a database to the game with basic username and score info?

[nayantiwari]

Hey! Any updates on the next episodes?

[AlanDanielx]

I know this might be odd but, isnt it better to use Pixi.js?

[AlexandraRezk]

Hey RC, I was wondering if you have an advice on how to get rid of that white border around the map in the canvas. Thank you for the tutorials.

[kalx]

Hi RC
I love your tutorials! I wonder can I build an engine for your game? And sell it?

[isengrim_]

In your game Raining Chain the screen is centralizated and the borders are way smaller, how can we make that?

[pedrocasotti]

I did exactly what you did, but my mouse position is acting weird. In my game the player position is equal to the mouse position and the player doesn't move on the Y axis.
I'm using this code to get mouse position:
document.addEventListener("mousemove", function(e) {
player.x = e.clientX - - 10;
});
I use -10 to centralize the mouse with the sprite image, the sprite is 20px wide.
Here is my code to draw the player:
ctx.drawImage(img, 21, 0, 20, 45, player.x, player.y, 20, 45);
and player object:
player = {
x: 150,
y: 350
}

[sarsi]

can someone teach me how to change the player bullet

[asaduzzamanarman]

I am not sure you read older video comment i already comment it in your previous video but i guess u didn't see that...

On your multiplayer game series episode 14 you introduced multiple map and in the end you said in the next episode (15) you will cover how to send relevant data but you covered profiling.
SO...suppose i have a room/server where i 10 or 20 player can join and play..and the 11th/21th user will join in another room. so how can i send to send only the relevant data to the player if i send data to all player then server will have extra load.

Can you please make a video to complete that topic or at least give the logic in comment ...it will be a great help.
And Thanks for this great series..

[pedrocasotti]

my pixel art is getting blurry when scaling

[Ysplom]

if(isColliding){
if(Upgrade.list[key].category === 'score')
score += 1000;
if(Upgrade.list[key].category === 'atkSpd')
player.atkSpd += 3;
delete Upgrade.list[key];

increases the rate of fire and is not reset

[fakuch]

you could do a tutorial of creating an online game like club penguin in html5!