JavaScript + HTML5 GameDev Tutorial: 8-Ball Pool Game (part 1)



Learn to build an 8-ball pool game from scratch with HTML5 and Javascript. Part one of a three part series.

Part 2: https://youtu.be/Am8rT9xICRs
Part 3: coming soon

🔗Github repo: https://github.com/henshmi/Classic-Pool-Game
🔗Game demo: https://henshmi.github.io/Classic-Pool-Game/

⭐️ Tutorial created by Chen Shmilovich.
🔗Chen’s YouTube channel: https://www.youtube.com/channel/UCLUtNUb2G2XHp9Zty__D3xw
🔗Chen on LinkedIn: https://www.linkedin.com/in/chen-shmilovich/

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 49 Comments

  1. Wira Andhika

    this is great project! thanks for this!
    stay awesome man!

  2. Marat Mam

    great. thanks for the video.
    waitng for the part 2

  3. revisualize

    Cool little project. The game (even on easy) is quite challenging.

  4. Chen Shmilovich

    Thank you freeCodeCamp for sharing my tutorial!
    Hope you all like it.
    I upload videos on a weekly basis to my channel, feel free to follow.
    If you have any questions, please do not hesitate and leave a comment. 🙂

  5. Doctor Jorge

    I'm not sure if changes at 22:49 are the best way to handle it. I looked for this part of the code on your repo but couldn't find it. I wanted to run multiple game at the same time to learn about NEAT (Neural networks stuff for the once who haven't heard of it). With your approach I won't be able to have simultaneous games because those functions will work on the PoolGame variable always instead of working on their specific Game object. Do anybody knows how to correct this?

  6. Caiga Records

    Wahaha, amazing! Thanks very much 🙂 It really show that the possibilities are endless!

  7. gibson76

    Has this project gotten anyone a job yet?

  8. PET SHOP TRADING

    Looking forward to go on with part two. Great way to teach. Thank you

  9. John Chleborad

    This is really helping me to learn JS, thank you for the detail in describing how each line of code effects the game! Awesome job!

  10. Kay Devine-Jones

    Thanks for the project! I'm about 22 minutes in, I tried opening the file in my browser but I get an error message that "callback" is not a function (assets.js, line 9). Anyone know what the issue is here?

  11. Rakim

    When will the second part likely be available? 🙂 I love this project!

  12. Tab Gre

    Thanks for this great project. That's help me lots. And when will you update the Part2. 🙂

  13. Sam 0

    Great project, kind of hard for a beginner as i'm unfamiliar with a bunch of terms used here. It follows the "just copy me and i'll explain later" pattern of a lot of tutorials, which for me don't really work as well as explaining everything thoroughly as it is being done. Great initiative however, looking forward to part 2.

  14. John Chleborad

    When's part II coming? Really anxious to see the finished product!

  15. Khaled Al Khder

    hi, i have a question,

    i'm doing a Demo Quiz with javaScript, but i stuck in one place i don't know what to do.

    i made just 3 questions and i made all the functions and everything works very well, BUT i want to add to each question a value, for example, the first question = 5 the second = 2 the third = 8 etc.

    now my problem is that i couldn't do that, i want every time the user clicks on the correct answer he will get the value of the question if it's correct then he will get +5 if not he will get -5 (for example).

    in the end, he will has the scour of the correct questions and anther scour of the Wrong answers.

    i feel i tried every thing and i couldn't do it!

    thank you in advance.

  16. Maksymilian K

    I don't see the point of creating the entire class for Canvas2D, since
    document.quarrySelector("screen").getContext("2d") already has the reference to the html <canvas> element and is itself a context with all the function to draw on canvas.

  17. aman

    Somebody plz help me to find the assets folders

  18. TuftsJr1

    My stick rotates towards the cursor, but it doesn't pivot around the ball. What am I doing wrong?

  19. Harison 777

    at 21:25

    for this code: <script>

    loadAssets(PoolGame.start);

    </script>

    I'm getting this error code: Uncaught ReferenceError: loadAssets is not defined
    at index.html:20

    Anyone can help?
    Discord= harison#1337

  20. Gölski

    This lesson is awesome !
    Begginers lessons Didnt shown various elements like this 😁
    İ dont aggre with that We should start with basics if you are familier to codes you can try to understand this maybe you would do

  21. Nick Snell

    my pool table image isnt displaying when i refresh

  22. anil gr

    Why can't u just minus origin.x from position.x instead of save, translate n all stuff.

  23. YUVI_1303

    want a multiplayer 8 ball pool script with customization. let me know if u would be interested to work on it.

  24. ForYou

    Sir i am Monoj from india sir i want to develop 8 ball pool game so can you develop me 8 ball pool game please tell me.!!

  25. ForYou

    I want to make develop game from you please tell me sir!!

  26. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

  27. B pro gaming

    please tell us that where to get the assets images from

Leave a Reply