How to Build a Simple Game with HTML5 Canvas? (Beginner's Tutorial)

使用HTML的<canvas>元素和JavaScript的2D上下文，通过clearRect、fillRect绘制矩形玩家，结合keydown事件监听与requestAnimationFrame游戏循环，实现60FPS的键盘控制移动。

Start by setting up a basic HTML page with a <canvas> element — that’s your drawing surface. Then use JavaScript to access the canvas context, draw shapes or images, and animate them using requestAnimationFrame. No frameworks needed. Just HTML, CSS, and plain JavaScript.

Set up the canvas and context

You need an HTML file with a <canvas> tag and a way to grab its 2D rendering context in JavaScript.

• Add <canvas id="gameCanvas" width="800" height="600"></canvas> to your HTML
• In JavaScript, write const canvas = document.getElementById('gameCanvas');
• Then get the drawing context: const ctx = canvas.getContext('2d');

Draw something static (like a player)

Use basic canvas drawing methods to render a simple shape — for example, a rectangle representing your player character.

• Clear the canvas first: ctx.clearRect(0, 0, canvas.width, canvas.height);
• Fill a rectangle at position (50, 50), 40px wide and 60px tall: ctx.fillStyle = '#3498db'; ctx.fillRect(50, 50, 40, 60);
• You can also draw circles, text, or load images later — but rectangles are perfect to start

Add movement with keyboard input

Track key presses to update the player’s position each frame.

• Create variables like playerX = 50; and playerY = 50;
• Use addEventListener('keydown', ...) to detect arrow keys or WASD
• Update positions inside your game loop — e.g., if (keys.ArrowRight) playerX += 5;
• Remember to clamp values so the player doesn’t move off-screen

Run a smooth game loop

Use requestAnimationFrame instead of setInterval — it syncs with the browser’s refresh rate for smoother animation.

• Define a function like function gameLoop() { /* update + render */ requestAnimationFrame(gameLoop); }
• Inside it: update positions, check collisions, clear canvas, then redraw everything
• Call gameLoop() once to start the loop

That’s enough to build a moving rectangle you control — the foundation of any 2D game. From here, add enemies, scoring, sounds, or levels. It’s not magic — just drawing, timing, and input, repeated 60 times per second.

The above is the detailed content of How to Build a Simple Game with HTML5 Canvas? (Beginner's Tutorial). For more information, please follow other related articles on the PHP Chinese website!