NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 31, 2021 · Frontend Development

How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic

This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.

CanvasMatter.jsReact
0 likes · 10 min read
How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic
Aotu Lab
Aotu Lab
Mar 9, 2021 · Game Development

How to Build a ‘Merge Watermelon’ Game with Phaser 3 and TypeScript

This step‑by‑step guide shows how to create a simple “merge watermelon” HTML5 game using Phaser 3, TypeScript, and Matter.js physics, covering project setup, asset loading, fruit creation, input handling, collision logic, scoring, and game‑over detection.

CollisionHTML5Matter.js
0 likes · 10 min read
How to Build a ‘Merge Watermelon’ Game with Phaser 3 and TypeScript
Aotu Lab
Aotu Lab
Jan 9, 2018 · Game Development

How to Build a Water‑Pressure Ring H5 Game with CreateJS and Matter.js

This article walks through the design and implementation of a water‑pressure ring H5 game, covering technology selection, code architecture, integration of CreateJS with Matter.js physics, handling of ring rendering, needle collision detection, skill effects, performance optimizations, and practical tips for overcoming common challenges in 2D‑to‑3D simulation.

CreateJSH5Matter.js
0 likes · 18 min read
How to Build a Water‑Pressure Ring H5 Game with CreateJS and Matter.js
Aotu Lab
Aotu Lab
Nov 17, 2017 · Game Development

How to Build a Physics‑Powered Basketball Mini‑Game with LayaAir and Matter.js

This tutorial walks through creating a web‑based basketball shooting game by initializing LayaAir, integrating the Matter.js physics engine, handling user gestures to draw aim lines, applying forces to a ball, and adding realistic basket components, while sharing practical code snippets and performance tips.

HTML5JavaScriptLayaAir
0 likes · 11 min read
How to Build a Physics‑Powered Basketball Mini‑Game with LayaAir and Matter.js
Aotu Lab
Aotu Lab
Nov 9, 2017 · Frontend Development

How We Built a High‑Performance H5 Coin‑Pusher Game with CreateJS & Matter.js

This article details the end‑to‑end development of a 2D H5 coin‑pusher game for JD's 11.11 promotion, covering background, technology choices, implementation of obstacles, pusher, coins, skills, debugging techniques, and performance optimizations using CreateJS and Matter.js.

CreateJSHTML5Matter.js
0 likes · 16 min read
How We Built a High‑Performance H5 Coin‑Pusher Game with CreateJS & Matter.js
Aotu Lab
Aotu Lab
Apr 28, 2017 · Game Development

Unlock Realistic Game Physics with Matter.js: A Complete Guide

This article explains what a physics engine is, compares real‑time and high‑precision engines, shows how games like CS:GO use them, and provides a thorough tutorial on installing, configuring, and programming the JavaScript 2D physics library Matter.js with code examples and debugging tools.

2D physicsJavaScriptMatter.js
0 likes · 15 min read
Unlock Realistic Game Physics with Matter.js: A Complete Guide