Development of H5 Game - Toy Claw

As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw (Online Demo)。Here I will summarize and share the development experience here, and hope it can inspire everyone.

Creativity & Design

《Toy Claw》is an online version of the popular arcade game that brings classic grabber gameplay to the mobile screen. Players can control the movement of the grabber and the grabbing action by tapping the buttons to try and grab the doll and send it to the exit successfully. The game features easy-to-understand gameplay, while also incorporating some strategic elements that add to the fun and challenge of the game.

In terms of game design, the following points were emphasized:

1. Cute Doll Characters: A variety of cute doll characters are designed to attract players' interest and emotion.

2. Real Physics Simulation: Physics simulation is used for the gripping hand movements and the doll grabbing process in the game, so that players can feel the real operation and challenges.

3. Reward System: In order to stimulate the player's sense of participation, a reward system is designed, for example, gold coins or props can be obtained for catching specific dolls, thus increasing the replay value of the game.

Developing

Front-end technologies such as HTML5, CSS3 and JavaScript were mainly used in the developing.

1. Page Layout and Style Design: Firstly, we designed the page layout and style of the game to ensure that the game interface is beautiful and friendly. Responsive design that adapts to different screen sizes is a point that cannot be ignored.

HTML code

<div id="game-container">
  <div id="claw"></div>
  <div id="doll"></div>
</div>

CSS code

#game-container {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #000;
  overflow: hidden;
}

#claw {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
  bottom: 0;
  left: 125px;
}

#doll {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: pink;
  top: 360px;
  left: 130px;
}

1. Physics simulation implementation: In order to achieve realistic grasping actions, physics engine libraries such as Matter.js are used to simulate behaviors such as movement, collision, and grasping of the gripper.

const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;

const engine = Engine.create();

const claw = Bodies.rectangle(x, y, width, height);
const doll = Bodies.circle(x, y, radius);

World.add(engine.world, [claw, doll]);

Engine.update(engine);

1. Interaction Logic Writing: Write JavaScript code to handle the interaction logic of the game, including grabber control, doll grabbing judgment, reward system, etc.

const claw = document.getElementById('claw');
const doll = document.getElementById('doll');
const gameContainer = document.getElementById('game-container');

claw.addEventListener('click', () => {
  claw.style.left = newPosition + 'px';

  if (checkCollision(claw, doll)) {
    doll.style.position = 'absolute';
    doll.style.top = '0';
    doll.style.left = '0';
    gameContainer.appendChild(doll);
  }
});

function checkCollision(element1, element2) {
}

1. Interaction Logic Writing: Write JavaScript code to handle the interaction logic of the game, including grabber control, doll grabbing judgment, reward system, etc.

Experience and Lessons

During the development process, some valuable experiences and lessons were gained:

1. Choose the right technology: In the development process, it is very important to choose the right technology. For example, using physics engine library can simplify the implementation of physics simulation, using jQuery can simplify DOM operation, using Bootstrap can simplify page layout and style, etc..

2. Focus on user experience: User experience is an important standard to measure the goodness of a game. In the development process, we should focus on user experience, for example, whether the operation of the game is simple and easy to understand, whether the interface of the game is beautiful and friendly, and whether the feedback of the game is timely.

3. Focus on the playability of the game: The playability of the game is an important criterion for measuring whether a game is good or bad. In the development process, we should focus on the playability of the game, for example, whether the difficulty of the game is moderate, whether the replay value of the game is high, and whether the reward system of the game is perfect.

Summary

Through the development of Online Catching Machine, I deeply realized the fun and challenge of H5 game development. This game not only brings entertainment to the players, but also is an exercise for me in technology and creativity.

Note

These examples are simplified, more optimization and refinement may be needed in actual development, such as dealing with multiple dolls, adding animation effects, adding more levels, etc.