{"id":511,"date":"2025-12-15T04:40:33","date_gmt":"2025-12-15T04:40:33","guid":{"rendered":"https:\/\/portfolio.wcu.edu\/aanjum1\/?p=511"},"modified":"2025-12-15T04:40:35","modified_gmt":"2025-12-15T04:40:35","slug":"chrome-dino-game","status":"publish","type":"post","link":"https:\/\/portfolio.wcu.edu\/aanjum1\/2025\/12\/15\/chrome-dino-game\/","title":{"rendered":"Chrome Dino Game"},"content":{"rendered":"<p>For this project, I recreated the classic Chrome Dino Game using a combination of web technologies and embedded hardware. The system is powered by an ESP32, which serves as a WiFi access point and hosts an HTML5 Canvas-based version of the Dino game that runs in a browser.<\/p>\n<p>The ESP32 manages real-time communication with an STM32 microcontroller through UART. A physical push button connected to the STM32 allows the player to control the Dino in the browser, creating a unique hardware-assisted gameplay experience. The STM32 sends jump signals to the ESP32, which exposes these inputs to the browser through a \/jump API that is polled every 100 milliseconds.<\/p>\n<p>The browser continuously sends score updates back to the ESP32, which displays them on an OLED screen in the format &#8220;Score: XX.&#8221; The ESP32 drives its own SSD1306 OLED displays, showing the live score, game-over messages, and a &#8220;Play Again&#8221; screen.<\/p>\n<p><iframe loading=\"lazy\" title=\"ESP32 Dino Game\" width=\"563\" height=\"1000\" src=\"https:\/\/www.youtube.com\/embed\/ezJc0sRKqkY?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>This project integrates web development, UART communication, WiFi server functionality, and embedded graphics. It provided me with hands-on experience in synchronizing multiple microcontrollers with a browser-based game and blending hardware interaction with software animation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I recreated the classic Chrome Dino Game using a combination of web technologies and embedded hardware. The system is powered by an ESP32, which serves as a WiFi access point and hosts an HTML5 Canvas-based version of the Dino game that runs in a browser. The ESP32 manages real-time communication with an [&hellip;]<\/p>\n","protected":false},"author":2171,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"For this project, I recreated the classic Chrome Dino Game using a combination of web technologies and embedded hardware. The system is powered by an ESP32, which serves as a WiFi access point and hosts an HTML5 Canvas-based version of the Dino game that runs in a browser.\n\nThe ESP32 manages real-time communication with an STM32 microcontroller through UART. A physical push button connected to the STM32 allows the player to control the Dino in the browser, creating a unique hardware-assisted gameplay experience. The STM32 sends jump signals to the ESP32, which exposes these inputs to the browser through a \/jump API that is polled every 100 milliseconds.\n\nThe browser continuously sends score updates back to the ESP32, which displays them on an OLED screen in the format \"Score: XX.\" The ESP32 drives its own SSD1306 OLED displays, showing the live score, game-over messages, and a \"Play Again\" screen.\n\n[embed]https:\/\/youtube.com\/shorts\/ezJc0sRKqkY?si=jaGqTcLUT_tKWEGn[\/embed]\n\nThis project integrates web development, UART communication, WiFi server functionality, and embedded graphics. It provided me with hands-on experience in synchronizing multiple microcontrollers with a browser-based game and blending hardware interaction with software animation.","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-511","post","type-post","status-publish","format-standard","hentry","category-microprocessors"],"_links":{"self":[{"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/posts\/511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/users\/2171"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/comments?post=511"}],"version-history":[{"count":2,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/posts\/511\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/posts\/511\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/media?parent=511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/categories?post=511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portfolio.wcu.edu\/aanjum1\/wp-json\/wp\/v2\/tags?post=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}