• Friday , 29 May 2020

23: How To Create A Game Using JavaScript | Part 1 | Setup, HTML & JavaScript | JavaScript Tutorial

Code Canyon

In this JavaScript tutorial you will learn how to create a game using JavaScript. We will be creating a RPG/Battle Arena style game which is to help you understand how we use Objects and Object Constructors in real JavaScript projects.


Daniel Simionescu
Meet Daniel: another Full-Stack developer who can teach you coding fast and free 😀

Code Smarter
Hi, I’m Code Smarter, a new content creator. I create coding tutorials and coding challenges. I promise in the upcoming weeks my channel will be filled with content. Check my channel out and subscribe.
Link: https://www.youtube.com/channel/UCB9rrRaWmDytZyK_GoHNDBQ?sub_confirmation=1


First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful 🙂

Material for this lesson: https://www.patreon.com/posts/javascript-23-19834436

Original source

3d Ocean

Related Posts


  1. Jake Stone
    May 3, 2019 at 05:28

    @Yudishira is correct – totally under-rated channel. so watching your tutorials, what I am trying to do is 20 mobs, each mob attacks in 9 waves, inside those waves are the requirement for survivng that wave. so would I make an object of the wave? then how would I do the 9 waves, and then how would I wrap the 20 mobs around that package? Easy to do with other languages, confusing with JS – thanks!

  2. XOXO
    May 3, 2019 at 05:28

    23:05 if GameManager is a regular object and not a object constructor shouldn't it be written as gameManager instead?

  3. Sam Sung
    May 3, 2019 at 05:28

    can we play clash of clan like game in website

  4. Yavor Daskaloff
    May 3, 2019 at 05:28

    Had to stop the video to say this: with your talents we are all so incredibly lucky you chose the path of education. Thank you very much!

  5. Lil xD - Ark
    May 3, 2019 at 05:28

    As someone who uses C# and knows how to program html/css these tutorials are really great. Your explanation for objects and methods are really good as well. I really like the term "blueprint" compared to others I've heard like planner or designer. I will probably use he word "blueprint" when I explain OOP in the future. I'm currently learning more C# at "Rochester Institute Of Technology" and these videos really do great job of educating me about JavaScript on the side.

  6. Dylan’s Mini beasts
    May 3, 2019 at 05:28

    Roses are red

    Tinkerbell was a fairy

    that thumbnail was pretty scary

  7. Incognito Incognitov
    May 3, 2019 at 05:28

    30:42 How does browser know that this is an object?(let player). Isn't it just a simple variable without uppercase and curly brackets?

  8. Chris
    May 3, 2019 at 05:28

    I'm trying to make a game on html canvas and it's been really really hard. I made worms that wiggle around on the canvas and they can't move through themselves or each other (unless they get stuck). They move only one square at a time, in a random direction. When I say 'one square at a time' I mean on an imaginary grid. Each coordinate of the imaginary grid is stored/represented in 2d array. Well actually a 3d array for when there's overlaps, like if a worm gets stuck in itself or in another worm then it can move 'through' itself or the other worm temperately. The worms are made up from colored squares so nothing fancy. I did it successfully with divs but I read that canvas performance is much better than appending divs to the dom (I just replaced the innerhtml every time tbh) and also I didn't like the code I did because it created a new setTimeout for every worm, so 20 worms equaled 20 timeouts. I want it to do everything on one timeout and update the canvas once per timeout but I dont know how I'm going to add new worms on the fly doing it this way but I'm sure it's possible 🙂

    edit I like your videos btw.

    edit. I'm little high on caffeine right now :-/ I had problems with making multi-dimensional arrays tbh because I didn't realize that you can't just declare one, like you have to state it explicitly at the beginning or use a loop or something to create one which you would want to do if you're creating a massive one, but then you got to use like: a loop within a loop within a loop if you wanna go through them all ('grid[i][j][k]') . My code got super confusing. Couldn't figure out how it worked after taking a break from it. I had to go through making comments on what everything did to figure it out again. I'm quite new to programming. Anyway, now I'm trying to write code to be as simple as possible to understand and that's what I'm trying to learn atm i.e. the best way to write code, that if it gets complex, is still comprehensible 🙂

  9. drewski west
    May 3, 2019 at 05:28

    idk if you ever reply to more recent comments but i'm having a lot of issues.
    3 syntax errors that won't let me get off main screen to stats
    character stats pages (When they did work) only displayed warrior even though they're coded different (mage, rogue, hunter)
    the css although you provided it, is near impossible to edit since you don't include a 4th finalized video.
    aka mine looks NOTHING like yours… and it doesn't work…
    idk how to reach you to get help correcting errors. atm i only have 3-4 tops and the css looks nothing like yours.

  10. Noah Feazell
    May 3, 2019 at 05:28

    Surprised Bethesda hasn't made 'Elder Scroll V: Skyrim Browser Edition' in this type of style. Lol. Perhaps when I am done with this course I can add more stuff to it and create my own little Skyrim game. Of course not able to publish it because of copyright infringement but would still fun to try. :p

  11. Tooba Adil
    May 3, 2019 at 05:28

    I am going to create my first game ever! Thanks so much Daniel

  12. Yong Jung
    May 3, 2019 at 05:28

    best on web dev so far!

  13. Divya Sampath
    May 3, 2019 at 05:28

    Doubt – the object created inside gamemanager file is declared in uppercase- let GameManager. My question – isn't this an object literal? hence going for the standard way of declaring it using camel case?

  14. ecchi squid
    May 3, 2019 at 05:28

    I'm going to make a game too. I think I'll call it Hello World.

  15. Klaus Klemper
    May 3, 2019 at 05:28

    I love your Videos man !!!

  16. Youtube L
    May 3, 2019 at 05:28

    You really nice your tuts so.
    I think you should make datepicker tut in pure JS.
    Plz plz make.
    I used a pure JS datepicker in my company website. I was looking for a datepicker whose's only sunday is enabled and future date is today enabled in pure JS.
    Well I got a pure JS datepicker and after spending fews days today I made that datepicker only showing sunday enabled date only through CSS.
    It's interesting and super for me that I made it. But I want to built my own Datepicker and I spend days in searching but no good tut for that. Almost all tuts are in jquery bootstrape. I was in need that's why I used but I wanna make my own and then I wanna deploye it to my creation.
    I think it will be super super tut.

    Plzz make a tut on that. I will give you a coffe cup for that.
    Soon I will become your patreon too.
    Hope you will wanna do that.

  17. lk1926
    May 3, 2019 at 05:28

    Great lesson!!!

  18. Smushed
    May 3, 2019 at 05:28

    Thank you for making this. I'm currently in a Bootcamp and have an assignment much the same as this. These videos are hugely helpful

  19. NERO
    May 3, 2019 at 05:28

    at LAST!!!!!!!!!!!!!!!!!

  20. XVIC
    May 3, 2019 at 05:28

    what does this. do?

  21. lusin Gharibian
    May 3, 2019 at 05:28

    1000000000000 thanks

  22. Madrins X
    May 3, 2019 at 05:28

    Just for fun👉At 33:30, well "mana" is a bad word in our language that's "luganda from uganda"😂😂😂😂anyway thanks for the devotion you put in making these videos. ..your just amazing 👏👏👏

  23. Kasper Juunge
    May 3, 2019 at 05:28

    Hey Daniel, angående s'erne i mikrofonen, så kan jeg anbefale en de-esser, som er en type audio plugin som reducerer s og t lyde i dine optagelser. Det kan selvfølgelig være du allerede ved det, men hvis ikke burde du prøve det 🙂 mvh Kasper

  24. Damir Rekić
    May 3, 2019 at 05:28

    Hi, I always reinforce my knowledge watching your tutorials. Thank you!

  25. Sonny B
    May 3, 2019 at 05:28

    love it!

  26. Peter Li
    May 3, 2019 at 05:28

    great video, love your videos

  27. Hasnain Saeed
    May 3, 2019 at 05:28

    Your channel is really underrated. Love your devotion and hardwork. Please keep posting videos on this tutorial on javascript. It's been quite helpful. Thank you.

  28. Mr Lonely
    May 3, 2019 at 05:28

    Good work! I'll be waiting for second part 🙂

  29. Taha Wahid daw
    May 3, 2019 at 05:28

    Hi! I am Taha,
    your tutorials really polishing my skills of web development, I studied javascript with my teacher and his logic were seriously out of understanding but after you series off tutorial i really learned a lot with more advancement. I have a Question please answer this on next video if possible
    Q) – If I include two external javascript files in same html document, are those javascript files are indirectly linked with each other, if not please show the method to linked those files with each other.

  30. Syntax Logic
    May 3, 2019 at 05:28

    JavaScript or Unity for 2D games for mobile?

  31. That's No Copyright!
    May 3, 2019 at 05:28

    Where in the world do u live?

  32. respon sive
    May 3, 2019 at 05:28

    Thank you .I'm a big fan of this kind of challenges , keep it up . I hope to see Vue tutorials on your channel too 🔥😙🔥

  33. Amogh Algorithm
    May 3, 2019 at 05:28

    Hit 90k!!!!!

Leave A Comment

You must be logged in to post a comment.