1. kiswa
  2. kilo


kilo / index.html

The branch 'dev' does not exist.
<!doctype html>
        <title>kilo Demos</title>
            *, html {
                margin: 0;
                padding: 0;
                font: 1em verdana, sans-serif;
                font-size: 94%;
            body {
                text-align: center;
                background-color: #333;
            h1 {
                font-size: 3em;
                text-align: center;
                border-bottom: 1px solid #333;
                padding-bottom: .5em;
                margin-bottom: 1em;
                text-shadow: 1px 1px 3px #fff;
            p {
                margin: 1em 0;
            #content {
                width: 600px;
                margin: 0 auto;
                padding: 1em;
                text-align: left;
                background-color: #ccc;
                box-shadow: 0px 0px 5px #ccc;
            .demo {
                margin: 2em 0;
            .demo h3 {
                font-size: 1.5em;
            .demo h3 a {
                display: block;
            .demo h3 a:link, .demo h3 a:visited {
                color: #09c;
                text-decoration: none;
            .demo h3 a:hover, .demo h3 a:active {
                text-decoration: underline;
            #warn {
                background-color: yellow;
                font-weight: bold;
                text-align: center;
        <div id="content">
            <h1>kilo Demos</h1>
            <p>Click the title of any demo below to load. View source and/or use
            your browser's dev tools to see how the demos work!</p>
            <p id="warn">JavaScript is not enabled!</p>
            <p>This page itself is a demo of sorts. It demonstrates checking for
            support of elements kilo requires, as well as whether JavaScript is
            enabled. If there are any problems, a warning is displayed above
            this paragraph.</p>
            <p>Don't forget to build kilo before attempting to run any of these
            <div class="demo">
                <h3><a href="demo/sprite.html">Sprite</a></h3>
                <p>Demonstrates using the kilo.Sprite object to create static
                and animated sprites. Includes a simple character demo.</p>
            <div class="demo">
                <h3><a href="demo/extendSprite.html">Extending Sprite</a></h3>
                <p>Demonstrates extending the kilo.Sprite to create customized
                objects that have all the properties of a kilo.Sprite.</p>
            <div class="demo">
                <h3><a href="demo/sound.html">Sound</a></h3>
                <p>Demonstrates using the kilo.Sound object to create sounds.
                Includes a basic platformer-type demo where jumping or reaching
                the edges causes sounds to play.</p>
            <div class="demo">
                <h3><a href="demo/tiledbg.html">Tiled Background</a></h3>
                <p>Demonstrates using the kilo.TiledBG object to load tiled 
                map backgrounds into the gameCanvas.</p>
            <div class="demo">
                <h3><a href="demo/particles.html">Particles Game</a></h3>
                <p>A more complete demo that uses custom objects extending
                kilo.Sprite and basic physics and sounds.</p>
            var warn = document.getElementById("warn"),
                cvs = document.createElement("canvas"),
                snd = document.createElement("audio");

            if (snd.play === undefined) {
                warn.innerHTML = "Unable to create audio element; kilo will be silent<br>";

            if (cvs.getContext === undefined) {
                warn.innerHTML = "Unable to create canvas element; kilo will not work on this browser.";

            if (warn.innerHTML === "JavaScript is not enabled!") {
                warn.style.display = "none";