<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=yes" /> <link rel="icon" href="favicon.ico" /> <link rel="canonical" href="https://cakefoot.dank.game" /> <link href="feed" type="application/atom+xml" rel="alternate" title="DANK.GAME Feed" /> <meta name="description" content="Cakefoot is an extremely challenging, single-button dodge 'em up on rails web game. Hold any key to accelerate, let go to drift back, and avoid enemy patterns. Featuring an epic 22-level quest, arcade mode, unlockables, and high scores, Cakefoot is endlessly replayable, and impossible to defeat. Play this online game now to pilot a walking cake!" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@diskmem"> <meta name="twitter:creator" content="@diskmem"> <meta property="og:url" content="https://cakefoot.dank.game/"> <meta property="og:title" content="Cakefoot 🍰😈 | Rage game | Wishlist now on Steam!"> <meta property="og:description" content="Cakefoot is an extremely challenging, single-button dodge 'em up on rails web game. Hold any key to accelerate, let go to drift back, and avoid enemy patterns. Featuring an epic 22-level quest, arcade mode, unlockables, and high scores, Cakefoot is endlessly replayable, and impossible to defeat. Play this online game now to pilot a walking cake!"> <meta property="og:image" content="https://cakefoot.dank.game/doc/Cakefoot_open_graph_card.png"> <meta property="og:image:width" content="1094"> <meta property="og:image:height" content="640"> <meta property="og:type" content="website"> <title>Cakefoot 🍰😈 | Rage game | Wishlist now on Steam!</title> <style> @import url("ext/font/rounded-mplus/2m-medium/style.css"); html { height: 100%; color: #eee; } body { margin: 0px; background: #000; display: grid; grid-template-columns: 100%; grid-template-rows: 94% 6%; height: 100%; font-family: RoundedMPlus2MMedium; font-size: 18px; text-align: center; } canvas { width: 100%; height: 100%; display: none; } div#message { margin: 0px auto; width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-gap: 15px; } div#message a#wishlist { padding-left: 10px; display: flex; /* background: radial-gradient(circle at 0% 100%, rgb(120, 80, 20), rgb(0, 0, 0) 50%); */ text-decoration: none; color: #fff; justify-content: center; align-items: center; filter: hue-rotate(0deg); } div#message div#ticker { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; } div#message div#ticker div.arrow { cursor: pointer; user-select: none; } div#message div#ticker div#left { justify-self: right; padding-left: 15px; border-left: 2px dotted white; } div#message div#ticker div#right { justify-self: left; padding-right: 15px; border-right: 2px dotted white; } div#message div#icons { background: radial-gradient(circle at 100% 100%, rgb(120, 80, 20), rgb(0, 0, 0) 50%); display: grid; justify-content: space-evenly; padding: 10px 10px 10px 0px; grid-gap: 10px; align-items: center; } div#message div#icons img { display: block; width: 32px; margin: auto; border-radius: 4px; filter: saturate(40%) brightness(130%); } div#message div#icons img:hover { filter: saturate(100%) brightness(100%); } a { color: #999; } p#loading { font-size: 72px; align-self: center; } span.bullet { color: transparent; text-shadow: 0 0 0 #444; } @media (orientation: landscape) { div#message div#ticker { visibility: visible; } .desktop { display: inline; } div#message div#icons { grid-template-columns: repeat(9, 1fr); } } @media (orientation: portrait) { div#message div#ticker { visibility: hidden; } .desktop { display: none; } div#message div#icons { grid-template-columns: repeat(6, 1fr); } } </style> <script src="ext/js/Math.js" type="text/javascript"></script> </head> <body> <p id="loading"> Loading... </p> <!-- Emscripten's module object will update this canvas with WebGL content. --> <canvas id="canvas"></canvas> <div id="message"> <a id="wishlist" href="https://store.steampowered.com/app/2869020/Cakefoot/" target="_blank"> ✨️ <u>WISHLIST<span class="desktop"> NOW</span> on Steam</u> ✨️ </a> <div id="ticker"> <div id="left" class="arrow"> ◀ </div> <div id="content"> Use ☝️, 🖱️, ⌨️ or 🎮 to play </div> <div id="right" class="arrow"> ▶ </div> </div> <div id="icons"> <a href="https://store.steampowered.com/app/2869020/Cakefoot/" target="_blank"> <img src="ext/icon/steam_square_89px.png" /> </a> <a href="https://ohsqueezy.itch.io/cakefoot" target="_blank"> <img src="ext/icon/itch_square_89px.png" /> </a> <a href="https://x.com/diskmem" target="_blank"> <img src="ext/icon/X_square_89x89.png" /> </a> <a href="https://youtube.com/@nuggetsselect" target="_blank"> <img src="ext/icon/YouTube_square_89px.png" /> </a> <a href="https://www.tiktok.com/@dankd0tgame" target="_blank"> <img src="ext/icon/TikTok_square_89px.png" /> </a> <a href="https://dank.game#email-box" target="_blank" class="desktop"> <img src="ext/icon/Email_square_89px.png" /> </a> <a href="https://twitch.tv/dankd0tgame" target="_blank"> <img src="ext/icon/Twitch_square_89px.png" /> </a> <a href="https://open.shampoo.ooo/shampoo/cakefoot" target="_blank" class="desktop"> <img src="ext/icon/GitHub_square_89px.png" /> </a> <a href="https://dank.game/feed" target="_blank" class="desktop"> <img src="ext/icon/RSS_square_89px.png" /> </a> </div> </div> <script> /* Create a ticker effect at div#message div#ticker */ var ticker_previous_frame_timestamp = 0; var ticker_index = 0; var ticker_delay_elapsed = 0; var ticker_ticking = true; var ticker_content = [ "Use ☝️, 🖱️, ⌨️ or 🎮 to play", "🗓️ Releasing on <a href='https://store.steampowered.com/app/2869020/Cakefoot/' target='_blank'>Steam</a>, " + "<a href='https://ohsqueezy.itch.io/cakefoot' target='new'>itch.io</a> & " + "<a href='https://coolmathgames.com' target='_blank'>Coolmath</a> May 10th", "<a href='https://youtu.be/xn-iNcUlIpo' target='_blank'>Watch the trailer</a> ▶️ and " + "<a href='https://store.steampowered.com/app/2869020/Cakefoot/'>wishlist on Steam</a>", "Visit the <a href='https://x.com/wondervillenyc/status/1735827245384572940' target='_new'>arcade cabinet</a> at " + "<a href='https://wonderville.nyc' target='_blank'>Wonderville</a> in Brooklyn, NY 🕹️", "Get the Cakefoot <a href='press.html'>press kit</a> 📰️", "Unlock BEEF CAKE 💪️ and BUFFALO BEEF CAKE 🔥️", "Collect every coin 💯️ for a different ending" ]; function ticker_update() { ticker_delay_elapsed = 0; document.querySelector("div#message div#ticker div#content").innerHTML = ticker_content[ticker_index]; } function ticker_increment(amount) { ticker_index = Math.mod(ticker_index + amount, ticker_content.length); } document.querySelector("div#message div#ticker div#left").addEventListener("click", function(e) { ticker_increment(-1); ticker_update(); }); document.querySelector("div#message div#ticker div#right").addEventListener("click", function() { ticker_increment(1); ticker_update(); }); var ticker_element = document.querySelector("div#message div#ticker"); ticker_element.addEventListener("mouseenter", function() { ticker_ticking = false; }); ticker_element.addEventListener("mouseleave", function() { ticker_previous_frame_timestamp = performance.now(); ticker_ticking = true; }); function message_tick(timestamp) { if (ticker_ticking && timestamp - ticker_previous_frame_timestamp > 10000) { ticker_previous_frame_timestamp = timestamp; ticker_increment(1); ticker_update(); } window.requestAnimationFrame(message_tick); } window.addEventListener("load", function() { ticker_previous_frame_timestamp = performance.now(); window.requestAnimationFrame(message_tick); }); /* Hue-cycle the wishlist button */ var hue_previous_frame_timestamp = performance.now(); var wishlist_element = document.querySelector("div#message a#wishlist"); var hue_rotation = 0; function hue_cycle_wishlist(timestamp) { if (timestamp - hue_previous_frame_timestamp > 125) { hue_rotation = (hue_rotation + 25) % 360; wishlist_element.style.filter = "hue-rotate(" + hue_rotation + "deg) saturate(200%)"; hue_previous_frame_timestamp = timestamp; } window.requestAnimationFrame(hue_cycle_wishlist); } window.addEventListener("load", function() { hue_previous_frame_timestamp = performance.now(); window.requestAnimationFrame(hue_cycle_wishlist); }); </script> <script> /* Emscripten's Module object doesn't exist yet, so create it here */ var Module = { /* Files are stored in a separate location on dank.game builds */ locateFile: function(path, prefix) { console.log(path, prefix); /* The data file is loaded before the main JavaScript, so the prefix is empty. See the note at * https://emscripten.org/docs/api_reference/module.html#Module.locateFile */ if (path.endsWith(".data")) { return "dist/wasm/" + path; } else { return prefix + path; } } }; </script> <!-- This file is built by Emscripten when compiling the program --> <script src="dist/wasm/cakefoot.js"></script> </body> </html>