1a:I[4594,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"BrandMark"] 1b:I[1566,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ThemeToggle"] 1c:I[9718,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"AccountMenu"] 1d:I[4113,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"LeftNavigation"] 1e:I[5608,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ResponsiveBannerAd"] 1f:I[8424,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"TopicFollowButton"] 20:I[1577,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"FeedView"] 21:T1b7c, Tilting Maze Game

Tilt the Maze!

Tilt your device or use arrow keys to guide the ball to the green goal.

Congratulations! You Win!

22:T39f5,{"content":[{"content":[{"text":"Are you ready to dive into a fun and interactive web project? In this tutorial, we'll build a ","type":"text"},{"marks":[{"type":"bold"}],"text":"Tilting Maze Game","type":"text"},{"text":" where the player navigates a ball to a goal by tilting their device or using arrow keys. It's a perfect project to understand device orientation events, HTML5 Canvas, and game logic.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Let's break down how it works and how you can build it yourself.","type":"text"}],"type":"paragraph"},{"attrs":{"level":4},"content":[{"marks":[{"type":"bold"}],"text":"Project Overview","type":"text"}],"type":"heading"},{"content":[{"text":"The core idea is simple: a ball rolls around a maze based on the tilt of your smartphone or tablet (using the DeviceOrientation API). For desktop users, we'll also implement keyboard controls as a fallback. The game's physics, rendering, and collision detection are all handled using the HTML5 ","type":"text"},{"marks":[{"type":"code"}],"text":"

#html5-games

Articles

Build a Tilt-Controlled Maze Game with HTML, CSS, and JavaScript