Today I worked on a browser based mini game project using HTML, CSS, and JavaScript. Instead of just one game, I built two. One is a classic Snake game, and one is a simple platformer. The page lets you switch between them with buttons.<\/p>\n\n\n\n
function showSnake() \/ function showPlatformer():<\/code><\/pre>\n\n\n\n
^These functions switch between the two games. They change which canvas is visible, update the active button, and change the instructions text.<\/p>\n\n\n\n
function updateSnake():<\/code><\/pre>\n\n\n\n
^This function handles the Snake game logic. It moves the snake, checks for wall and self collisions, resets the game if needed, and handles food so the snake grows when it eats.<\/p>\n\n\n\n
function updatePlatformer():<\/code><\/pre>\n\n\n\n
^This function handles movement and physics for the platformer. It reads key input, applies gravity, allows jumping, and checks collisions with platforms so the player lands correctly.<\/p>\n\n\n\n
function snakeLoop(timestamp) \/ function platformerLoop():<\/code><\/pre>\n\n\n\n
^These are the main loops. They update and draw each game using requestAnimationFrame and only run when that game is active.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"
Today I worked on a browser based mini game project using HTML, CSS, and JavaScript. Instead of just one game, I built two. One is a classic Snake game, and one is a simple platformer. The page lets you switch between them with buttons. ^These functions switch between the two games. They change which canvas…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-127","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":4,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/posts\/127\/revisions\/161"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-content\/uploads\/2026\/02\/Screenshot-2026-03-28-145226-1024x503.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/theroyalscode.com\/students\/d_eanes\/wp-content\/uploads\/2026\/02\/Screenshot-2026-03-28-145213-1024x502.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"