Introduction:

Doodle Jump is a classic mobile game known for its addictive gameplay and simple mechanics. In this blog post, we'll walk you through the process of creating your own version of Doodle Jump using JavaScript. By following these steps, you'll gain a solid understanding of game development concepts and enhance your JavaScript skills. Let's dive into the code!

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Make sure you have a text editor and a web browser installed on your machine.

Step 1: Setting Up the HTML Structure

- To put your code into

<!DOCTYPE html>
<html>
  <head>
    <title>Doodle Jump</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script src="game.js"></script>
  </body>
</html>

Step 2: Styling the Game

<style>
html, body {
  height: 100%;  
  margin: 0;
  background-image: url('https://wallpapercave.com/wp/wp391670.jpg');      
}  
body {
  text-align: center;
  align-items: center;
}
.container {
  display: flex;
}
canvas {
  border: 2px solid #FF0000;
  background-color: #E6E6E6;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #FF0000;
  display: block;
  margin: 0;
  height: 90%;
  style="display: inline-block";
}
table {
  margin-left: 20px;
}
info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 90%;
}
#score {
  font-size: 2em;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  top: 0;
  left: 0;
  right: 0;
  width: 300px;
  transform: translateX(-2%);
  text-transform: uppercase;
  background: linear-gradient(to right,  #FFFF00  30%, #FFA500   75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: {
    size: 20vw;
    family: $font;
  };
}
#highestScore {
  font-size: 2em;
  font-weight: bold;
  color:  #7673ff ;
  transform: translateX(-3%);
   font-family: 'Courier New', monospace;
  top: 0;
  left: 0;
  right: 0;
  width: 300px;
  transform: translateX(-2%);
  text-transform: uppercase;
  background: linear-gradient(to right,  #FFFF00  30%, #FFA500   75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: {
    size: 20vw;
    family: $font;
  }
}
tr {
  font-weight: bold;
  color:   #FDB813   ;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  width: 300px;
}
th {
  font-weight: bold;
  color:   #FDB813   ;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  width: 300px;
}
</style>

Step 3: Drawing the Doodle Character

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');

const doodle = {
  x: canvas.width / 2,
  y: canvas.height - 30,
  radius: 15,
  color: '#FF0000',
};

function drawDoodle() {
  context.beginPath();
  context.arc(doodle.x, doodle.y, doodle.radius, 0, Math.PI * 2);
  context.fillStyle = doodle.color;
  context.fill();
  context.closePath();
}

Step 4: Implementing the Game Logic
- If doodle hits the block, its score increases
- First time doodle fails to hit block, game end
- Score gets saved

let doodle = new Doodle(canvas.width / 2 - 20, platformStart - 60, 0, 0);
  // keep track of player direction and actions
  let playerDir = 0;
  let keydown = false;
  let prevDoodleY = doodle.Y;
  //game loop
  function loop() {
    //updateScore();
    //check if the doodle falls off
    if(doodle.Y > canvas.height) {
      alert("Doodle fell off, game over!!!!!");
      if (score > highscore) {
        highscore = score;
        document.getElementById('highestScore').innerHTML = "Highscore: "+ highscore;
        document.cookie = 'highscore' + '=' + score + '; expires=' +    daysToExpire + ';SameSite=None';
        console.log(highscore);
      }
      document.getElementById('score').innerHTML = "Score: "+score;
      cancelAnimationFrame(windowId); 
      createNewCookie();
      location.reload();       
      return;
    }
}

Step 5: Creating Platforms and Enemies
- Platforms needed for Doodle to Jump on

const platforms = [];

function createPlatform(x, y, width) {
  platforms.push({ x, y, width });
}

function drawPlatforms() {
  platforms.forEach(platform => {
    context.beginPath();
    context.rect(platform.x, platform.y, platform.width, 10);
    context.fillStyle = '#00FF00';
    context.fill();
    context.closePath();
  });
}