<!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 🍰😈 | Play Online | Buy 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 🍰😈 | Play Online | Buy 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">
                ✨&#xFE0F;&nbsp;
                <u>BUY<span class="desktop"> NOW</span> on Steam</u>
                &nbsp;✨&#xFE0F;
            </a>
            <div id="ticker">
                <div id="left" class="arrow">
                    &#x25C0;
                </div>
                <div id="content">
                    Use ☝&#xFE0F;, &#x1F5B1;&#xFE0F;, &#x2328;&#xFE0F; or 🎮 to play
                </div>
                <div id="right" class="arrow">
                    &#x25B6;
                </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 ☝&#xFE0F;, &#x1F5B1;&#xFE0F;, &#x2328;&#xFE0F; or 🎮 to play",
             "&#xFE0F; Cakefoot is also on 🏪&#xFE0F; " +
             "<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/0-cakefoot' target='_blank'>Coolmath</a>",
             "Unlock BEEF CAKE 💪&#xFE0F; and BUFFALO BEEF CAKE 🔥&#xFE0F;",
             "Collect every coin 💯&#xFE0F; for a different ending",
             "Check out the ▶&#xFE0F; <a href='https://youtu.be/xn-iNcUlIpo' target='_blank'>trailer</a> ▶&#xFE0F;",
             "Visit the <a href='https://x.com/wondervillenyc/status/1735827245384572940' target='_new'>arcade cabinet</a>" +
             " 🕹&#xFE0F; at <a href='https://wonderville.nyc' target='_blank'>Wonderville</a> in Brooklyn, NY",
             "Get the 📰&#xFE0F; <a href='press.html'>press kit</a> 📰&#xFE0F;"
         ];

         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>