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:

Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
View all posts

9 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.

Leave a Reply