Mid‑Autumn Festival HTML5 Canvas Game: Development, Code Walkthrough, and Deployment Guide

The author introduces a Mid‑Autumn Festival themed mini‑game that runs in a web browser using HTML5 Canvas, where a player controls a rabbit (or ship) to collect mooncakes while avoiding a special five‑nut mooncake that ends the game.

Background

The game is intended to be shared publicly so that anyone can play it online.

Features

Control the rabbit to move left and right by touching or clicking.

Collect regular mooncakes to earn points.

Touching a five‑nut mooncake ends the game.

Deploy the game to a public website and share the URL.

Code Explanation

Initialization (Ship)

The function Ship(ctx) constructor creates the player object, loads the player image, sets dimensions, and defines methods for drawing, positioning, handling input events, and detecting collisions with food items.

function Ship(ctx){
  gameMonitor.im.loadImage(['static/img/player.png']);
  this.width = 80;
  this.height = 80;
  this.left = gameMonitor.w/2 - this.width/2;
  this.top = gameMonitor.h - 2*this.height;
  this.player = gameMonitor.im.createImage('static/img/player.png');
  this.paint = function(){
    ctx.drawImage(this.player, this.left, this.top, this.width, this.height);
  };
  this.setPosition = function(event){
    // handle touch or mouse coordinates
    // clamp position within game bounds
    this.paint();
  };
  this.controll = function(){
    var _this = this;
    var stage = $('#gamepanel');
    var move = false;
    stage.on(gameMonitor.eventType.start, function(event){
      _this.setPosition(event);
      move = true;
    }).on(gameMonitor.eventType.end, function(){
      move = false;
    }).on(gameMonitor.eventType.move, function(event){
      event.preventDefault();
      if(move){ _this.setPosition(event); }
    });
  };
  this.eat = function(foodlist){
    // collision detection and scoring logic
  };
}

Food Object

The function Food(type, left, id) constructor defines mooncake objects with properties such as speed, position, and image based on type, and provides paint and move prototype methods to render and animate them.

function Food(type, left, id){
  this.speedUpTime = 300;
  this.id = id;
  this.type = type;
  this.width = 50;
  this.height = 50;
  this.left = left;
  this.top = -50;
  this.speed = 0.04 * Math.pow(1.2, Math.floor(gameMonitor.time/this.speedUpTime));
  this.loop = 0;
  var p = this.type == 0 ? 'static/img/food1.png' : 'static/img/food2.png';
  this.pic = gameMonitor.im.createImage(p);
}
Food.prototype.paint = function(ctx){
  ctx.drawImage(this.pic, this.left, this.top, this.width, this.height);
};
Food.prototype.move = function(ctx){
  if(gameMonitor.time % this.speedUpTime == 0){ this.speed *= 1.2; }
  this.top += ++this.loop * this.speed;
  if(this.top > gameMonitor.h){
    gameMonitor.foodList[this.id] = null;
  } else {
    this.paint(ctx);
  }
};

Image Management

The function ImageMonitor() object caches images to avoid redundant network requests and provides createImage and loadImage methods for on‑demand creation and pre‑loading of assets.

function ImageMonitor(){
  var imgArray = [];
  return {
    createImage: function(src){
      return typeof imgArray[src] != 'undefined' ? imgArray[src] : (imgArray[src] = new Image(), imgArray[src].src = src, imgArray[src]);
    },
    loadImage: function(arr, callback){
      for(var i=0, l=arr.length; i

Generating Food

The genorateFood function randomly creates new Food instances at a configurable rate and adds them to the game’s food list.

genorateFood: function(){
  var genRate = 50; // frequency
  var random = Math.random();
  if(random*genRate > genRate-1){
    var left = Math.random()*(this.w - 50);
    var type = Math.floor(left)%2 == 0 ? 0 : 1;
    var id = this.foodList.length;
    var f = new Food(type, left, id);
    this.foodList.push(f);
  }
},

Deployment

To host the game, an Nginx static server configuration is provided. The server block listens on port 80, maps the domain game.passjava.cn to the directory /home/ubuntu/jay/game/moon , and serves index.html as the default file.

server {
    listen 80;
    server_name game.passjava.cn;
    location / {
        root /home/ubuntu/jay/game/moon;
        index index.html;
    }
}

After updating DNS records, the game becomes accessible at http://game.passjava.cn , allowing users to play the Mid‑Autumn Festival game online.