Create Doodle Jump Master with HTML
CSS and JavaScript
Doodle Jump is a popular mobile game where players guide a four-legged creature, Doodler, up an endless series of platforms. Using tilt controls, players dodge obstacles and enemies, aiming to reach the highest score possible. Known for its simple, addictive gameplay and charming graphics, it's a classic in mobile gaming.
Video Tutorial of Doodle Jump
Doodle Jump [Source Codes]
To build Doodle Jump with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Doodle Jump</title>
<link rel="stylesheet" href="doodlejump.css">
<script src="doodlejump.js"></script>
</head>
<body>
<canvas id="board"></canvas>
</body>
</html>
Now paste the following codes into your style.css file
body {
text-align: center;
}
#board {
background-image: url("./doodlejumpbg.png");
}
Now paste the following codes into your script.js file
let board;
let boardWidth = 700;
let boardHeight = 600;
let context;
let doodlerWidth = 75;
let doodlerHeight = 75;
let doodlerX = boardWidth/2 - doodlerWidth/2;
let doodlerY = boardHeight*7/8 - doodlerHeight;
let doodlerRightImg;
let doodlerLeftImg;
let doodler = {
img : null,
x : doodlerX,
y : doodlerY,
width : doodlerWidth,
height : doodlerHeight
}
let velocityX = 0;
let velocityY = 0;
let initialVelocityY = -8;
let gravity = 0.4;
let platformArray = [];
let platformWidth = 100;
let platformHeight = 18;
let platformImg;
let score = 0;
let maxScore = 0;
let gameOver = false;
window.onload = function() {
board = document.getElementById("board");
board.height = boardHeight;
board.width = boardWidth;
context = board.getContext("2d");
doodlerRightImg = new Image();
doodlerRightImg.src = "./doodler-right.png";
doodler.img = doodlerRightImg;
doodlerRightImg.onload = function() {
context.drawImage(doodler.img, doodler.x, doodler.y, doodler.width, doodler.height);
}
doodlerLeftImg = new Image();
doodlerLeftImg.src = "./doodler-left.png";
platformImg = new Image();
platformImg.src = "./platform.png";
velocityY = initialVelocityY;
placePlatforms();
requestAnimationFrame(update);
document.addEventListener("keydown", moveDoodler);
}
function update() {
requestAnimationFrame(update);
if (gameOver) {
return;
}
context.clearRect(0, 0, board.width, board.height);
//doodler
doodler.x += velocityX;
if (doodler.x > boardWidth) {
doodler.x = 0;
}
else if (doodler.x + doodler.width < 0) {
doodler.x = boardWidth;
}
velocityY += gravity;
doodler.y += velocityY;
if (doodler.y > board.height) {
gameOver = true;
}
context.drawImage(doodler.img, doodler.x, doodler.y, doodler.width, doodler.height);
//platforms
for (let i = 0; i < platformArray.length; i++) {
let platform = platformArray[i];
if (velocityY < 0 && doodler.y < boardHeight*3/4) {
platform.y -= initialVelocityY;
}
if (detectCollision(doodler, platform) && velocityY >= 0) {
velocityY = initialVelocityY;
}
context.drawImage(platform.img, platform.x, platform.y, platform.width, platform.height);
}
while (platformArray.length > 0 && platformArray[0].y >= boardHeight) {
platformArray.shift();
newPlatform();
}
updateScore();
context.fillStyle = "black";
context.font = "16px sans-serif";
context.fillText(score, 5, 20);
if (gameOver) {
context.fillText("Game Over: Press 'Space' to Restart", boardWidth/7, boardHeight*7/8);
}
}
function moveDoodler(e) {
if (e.code == "ArrowRight" || e.code == "KeyD") {
velocityX = 4;
doodler.img = doodlerRightImg;
}
else if (e.code == "ArrowLeft" || e.code == "KeyA") {
velocityX = -4;
doodler.img = doodlerLeftImg;
}
else if (e.code == "Space" && gameOver) {
doodler = {
img : doodlerRightImg,
x : doodlerX,
y : doodlerY,
width : doodlerWidth,
height : doodlerHeight
}
velocityX = 0;
velocityY = initialVelocityY;
score = 0;
maxScore = 0;
gameOver = false;
placePlatforms();
}
}
function placePlatforms() {
platformArray = [];
let platform = {
img : platformImg,
x : boardWidth/2,
y : boardHeight - 50,
width : platformWidth,
height : platformHeight
}
platformArray.push(platform);
for (let i = 0; i < 6; i++) {
let randomX = Math.floor(Math.random() * boardWidth*3/4);
let platform = {
img : platformImg,
x : randomX,
y : boardHeight - 75*i - 150,
width : platformWidth,
height : platformHeight
}
platformArray.push(platform);
}
}
function newPlatform() {
let randomX = Math.floor(Math.random() * boardWidth*3/4);
let platform = {
img : platformImg,
x : randomX,
y : -platformHeight,
width : platformWidth,
height : platformHeight
}
platformArray.push(platform);
}
function detectCollision(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
function updateScore() {
let points = Math.floor(50*Math.random());
if (velocityY < 0) {
maxScore += points;
if (score < maxScore) {
score = maxScore;
}
}
else if (velocityY >= 0) {
maxScore -= points;
}
}
If you face any difficulties while creating Doodle Jump or your code is not working as expected, you can download the source code files by clicking download button.