The Easiest Javascript Game Ever



In this video I show you how I created the most basic, simple javascript game that you can make yourself. It’s similar to the google dinosaur game that you play when there’s no internet.

If you’re trying to code this and get stuck watch this video before you give up: https://www.youtube.com/watch?v=3clSzwbhOf4

LINK TO TRY THE GAME: https://beat0154.github.io/easiest-game-ever/
LINK TO THE CODE: https://github.com/Beat0154/easiest-game-ever

Follow me below and reach out if you need any help!
Twitter: www.twitter.com/ShawnJBeaton
Instagram: www.instagram.com/ShawnJBeaton

I create javascript games in their simplest form using only html divs and css animations. They can still be quite fun, and beginner javascript developers can follow along and hopefully learn!

33 thoughts on “The Easiest Javascript Game Ever

  1. can someone tell me what is the little delay between the click and jump, also the blue box accelarates and slows down, what can we do to make its speed constant

  2. Not sure why I copied this code word for word. And it doesn't throw the message when block hits character. Also i went to your GitHub page copies that literally copied and that didn't work. Does this not work in edge? I'm not sure what's going on

  3. Hi I am just beginner but I added countdown in the beginning of the game, thats is code i changed/added
    HTML:
    <div id="game">
    <h1 id="countdown">3</h1> <!–Place for text to be displayed–>
    <div id="character"></div>
    <div id="block"></div>
    </div>
    CSS:
    #game{
    position: relative; //Changed position to relative
    width: 500px;
    height: 200px;
    border: 1px solid black;
    }
    //Added those two below
    #countdown {
    display: block;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    #countdown.displayCountdown{
    display: none;
    }
    JS script:
    //Modified startGame func by adding setTimeouts
    function startGame(){
    setTimeout(() => {
    countdown.innerText = '2'
    }, 1000);
    setTimeout(() => {
    countdown.innerText = '1'
    }, 2000);
    setTimeout(() => {
    countdown.classList.add('displayCountdown');
    block.classList.add('gameStarts');
    }, 3000);

    }
    //Added setTimeout in the end of the script to invoke startGame
    setTimeout(() => {
    startGame()
    },50);

    What You think about this?
    Cheers from Poland ;D

  4. I don't know coding
    I thought I could do it
    And I would become a professional programmer one day.

    But I couldn't 😂
    Its very foreign to me😭😭😭😭
    I really want to learn coding😞😞😞😞

Leave a Reply

Your email address will not be published. Required fields are marked *