Melon Man Game In Javascript With Source Code

This guide walks you through building the Melon Man Game in JavaScript from the ground up, a simple browser game where you move a character left and right to catch falling melons, complete with source code using HTML, CSS, and JavaScript. Instead of only downloading it, you will understand how every part works: the game loop, moving the player, making melons fall, detecting catches, and keeping score. That understanding is what turns a downloaded game into something you can explain in a viva, extend with your own ideas, or showcase in your portfolio.

1. What the Melon Man game is

Melon Man is a classic catch-the-falling-objects game. A character sits at the bottom of the screen, melons drop from the top at random positions, and the player moves the character left and right to catch them. Each catch scores a point, and missing too many ends the game. It is a perfect first game project because it contains every fundamental concept of game programming, a game loop, player input, moving objects, collision detection, and scoring, in a package small enough to understand completely in an afternoon.

Unlike a database project, a browser game needs no server and no MySQL. It runs entirely in the browser using just HTML for the page, CSS for the look, and JavaScript for all the behavior. That makes it a great way to learn how JavaScript actually drives interactive things on a page.

2. How a JavaScript game is structured

The project is three files working together. The HTML file sets up the play area and loads the others. The CSS file styles the character, the melons, and the score display. The JavaScript file holds all the logic, the rules of the game. A common, simple approach uses HTML elements (a div for the player, divs for melons) positioned with CSS, and JavaScript that changes their positions many times a second to create movement. Some versions use the HTML element to draw instead, but the ideas are the same either way.

3. The game loop: the heartbeat of any game

Every game runs on a loop that repeats many times a second. On each pass it does the same three things: update the positions of everything, check for collisions, and redraw the screen. In the browser this loop is usually driven by requestAnimationFrame, which calls your update function in sync with the screen’s refresh rate for smooth animation.

// the game loop
function gameLoop() {
  updatePlayer();    // move the character if a key is held
  updateMelons();    // move each melon down a bit
  checkCatches();    // did the player catch any melon?
  draw();            // show the new positions
  requestAnimationFrame(gameLoop); // do it all again next frame
}
requestAnimationFrame(gameLoop); // start the loop

This loop is the single most important concept in the whole project. Everything else, the player, the melons, the score, is just something the loop updates on each pass. Being able to explain the update-check-draw cycle to an examiner shows you understand how games actually work rather than having only run the file.

4. Moving the player with the keyboard

The player responds to the arrow keys. JavaScript listens for key events and records which direction is being held, then the loop moves the player accordingly. A clean way to do this is to track key state and apply it each frame rather than moving on the key event itself, which gives smooth continuous movement:

// remember which keys are down
let keys = {};
document.addEventListener('keydown', e => keys[e.key] = true);
document.addEventListener('keyup',   e => keys[e.key] = false);

// in the loop: move the player based on held keys
function updatePlayer() {
  if (keys['ArrowLeft'])  playerX -= speed;
  if (keys['ArrowRight']) playerX += speed;
  // keep the player inside the screen
  playerX = Math.max(0, Math.min(screenWidth - playerWidth, playerX));
}

The Math.max and Math.min clamp keeps the character from sliding off the edges, a small but important detail that shows attention to how the game feels to play.

5. Making melons fall

Melons appear at the top at a random horizontal position and move down a little each frame. New melons are spawned at intervals, and each existing melon has its vertical position increased every loop so it appears to fall:

// spawn a melon at a random x, at the top
function spawnMelon() {
  melons.push({ x: Math.random() * screenWidth, y: 0 });
}

// in the loop: move every melon down
function updateMelons() {
  for (let m of melons) m.y += fallSpeed;
}

Melons are stored in an array, and the loop walks that array each frame to move them. Using an array is what lets the game handle any number of melons at once with the same few lines of code, a small lesson in why arrays matter for managing many similar things.

6. Collision detection: catching a melon

Catching is collision detection: checking whether a melon’s position overlaps the player’s position. For rectangular elements, this is a simple comparison of edges, the classic bounding-box check. If a melon reaches the player’s height and its horizontal position overlaps the player, it is caught; if it falls past the bottom uncaught, it is a miss.

// did this melon overlap the player?
function isCaught(m) {
  return m.y + melonSize >= playerY &&
         m.x + melonSize >= playerX &&
         m.x <= playerX + playerWidth;
}

Collision detection is the concept students most often ask about, and this bounding-box check is the foundation of it. The same idea, comparing the edges of two rectangles, powers collisions in countless games. Understanding this one function means you understand how a game knows when two things touch.

7. Score and game over

Scoring is simple bookkeeping the loop maintains. Each caught melon increases the score, which is shown on screen by updating a text element. Each missed melon (one that falls off the bottom) costs a life, and when lives reach zero the loop stops and a game-over message appears. In code, catching removes the melon from the array and bumps the score; missing removes it and reduces lives:

// check catches and misses each frame
function checkCatches() {
  for (let i = melons.length - 1; i >= 0; i--) {
    if (isCaught(melons[i]))      { score++; melons.splice(i, 1); }
    else if (melons[i].y > screenHeight) { lives--; melons.splice(i, 1); }
  }
  if (lives <= 0) gameOver();
}

Notice the loop counts backwards, which is the safe way to remove items from an array while looping over it. Small details like that are exactly the kind of thing that demonstrates real understanding in a project review.

8. Setup and how to extend it

Running the game needs nothing but a browser. The steps are simply:

1. Download and unzip the project folder.
2. Open the index.html file in any modern web browser.
3. Use the arrow keys to move and start catching melons.

There is no server, database, or installation, which is part of what makes a JavaScript game such an approachable project.

Because you now understand the game loop and its pieces, here are natural extensions you can build and explain:

• Difficulty over time: increase the fall speed or spawn rate as the score climbs.
• Different fruit worth different points: store a value on each falling object.
• A high score: keep the best score during the session and display it.
• Sound effects: play a sound on a catch and on a miss.
• Touch controls: let the player move by tapping left or right on mobile.

Each is a small, well-scoped addition that demonstrates real understanding, exactly what turns a standard download into a project you can be proud of.

Frequently asked questions