2020-08-11
981
#vanilla javascript
Shawn Beaton
23194
Aug 11, 2020 â‹… 3 min read

How to build a game with HTML, CSS, and JavaScript

Shawn Beaton I create 2D games with HTML divs, CSS animations, and JavaScript.

Recent posts:

Solid Principles For Javascript

SOLID principles for JavaScript

SOLID principles help us keep code flexible. In this article, we’ll examine all of those principles and their implementation using JavaScript.

Frank Joseph
Dec 5, 2024 â‹… 10 min read
Master JavaScript Date And Time: From Moment.js To Temporal

Master JavaScript date and time: From Moment.js to Temporal

JavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.

Yan Sun
Dec 4, 2024 â‹… 9 min read
Npm Vs. Npx: What’s The Difference?

npm vs. npx: What’s the difference?

Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.

Fimber Elemuwa
Dec 3, 2024 â‹… 5 min read
How To Audit And Validate AI-Generated Code Output

How to audit and validate AI-generated code output

Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.

Boemo Mmopelwa
Dec 2, 2024 â‹… 5 min read
View all posts

13 Replies to "How to build a game with HTML, CSS, and JavaScript"

  1. Why do you have different lines of code in your github? I`m new at programming and i`m trying to run these instructions you gave for about 2 days, i`m mixing parts of the code you have here in the page and the ones which are missing I get it from GitHub, nevertheless I didn`t succeeded in running it.

  2. Hey it’s same as made by knife circus.
    Please friends check that video on YouTube.
    This is exact copy of that game. Not a single difference.

  3. MY DINO ISNT JUMPING ON TOUCH HELP!!

    code:
    var character = document.getElementById(“character”);
    document.addEventListener(“click”,jump);
    function jump(){
    character.classList.add(“animate”);
    setTimeout(removeJump,300); //300ms = length of animation
    };
    function removeJump(){
    character.classList.remove(“animate”);
    }

    HELP ASAP

  4. btw i found that you need to put

    var block = document.getElementById(“block”);
    function checkDead(){
    let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue(“top”));
    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue(“left”));
    if(blockLeft-20 && characterTop>=130){
    alert(“Game over”);
    }
    }

    setInterval(checkDead, 10);

    in your .js folder not your .css

  5. I didn’t know that it’s going to be that simple
    this is the first time I came to know that there are certain JavaScript libraries that are pre-made for game developments. Although they are easy to create, but these games crash a lot.

  6. so, I have been learning to code JavaScript in Kahn academy, I just don’t know what place to type it in. like do I open up a google doc and start typing in code? the article didn’t really explain that in depth. for example, what does this mean “To begin coding the game, create a new folder in your documents. Use your favorite text editor to open that folder, then create three new files and name them: index.html, style.css, and script.js. It’s possible to do everything in one file with HTML5, but it’s more organized to keep everything separate. Our index.html file is going to be very simple: once you have a basic HTML layout,” what does any of that stuff mean? Also, turns out I have been using some sort of Kahn academy JavaScript dialect, and I have to type something in first to use my code that I have learned, but every time I go into visual studio or something like that there is already a load of shit typed in, what does any of that do? should I just delete it? also, what is CSS or HTML, I know a little bit of JavaScript, I don’t know any of those coding languages. somebody please explain to me how I can get to the point where I can start typing in code (in the specific Kahn academy dialect that I learned) and it will run it for me. please explain EVERYTHING. I NEED HELP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    1. I would recommend you use a code editor, such as VS Code, https://code.visualstudio.com. Create a folder on your computer. Open VSCode and then open that folder, within that folder create your three files.
      Most websites are made up of 3 parts, the HTML File (the Markup or the structure of the Website), the .CSS file used to style the page (formats, colours, text size etc) and the .JS (Javascript) which is used on the client side (your browser) to provide a more interactive experience.
      Hope this helps you get started.

  7. As a web developer, I love the idea of recreating classic games like the Chrome dinosaur game from scratch. It’s such a fun way to deepen your understanding of HTML, CSS, and JavaScript while also creating something that’s instantly recognizable and enjoyable. The satisfaction of coding a fully functional game and seeing it come to life is unbeatable! Plus, it’s a great project to showcase to others who might not fully grasp the technical side of development.

Leave a Reply