demos/demo1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>CraftyMouseFace Demo 1</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    body, html { 
        /*overflow:hidden; */
        background: #000;
        font-family: Tahoma, Sans-serif, Helvetica;
    } 
    #cr-stage { 
        margin: 0 auto; 
        position: relative;
        width: 800px;
        height: 480px;
        border: solid 1px #231f20;
        cursor: crosshair;
    }       
    #loading {
        color: white;
    }
    </style>
</head>
<body>
<!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    <!-- libraries -->
    <script src="../bower_components/jquery/jquery.min.js"></script>
    <script src="../bower_components/crafty/dist/crafty-min.js"></script>
    <!-- game -->
    <script type="text/javascript" src="../src/craftyMFace.js"></script>
    <script type="text/javascript" src="demo1.js"></script>
    
    <div id="loading">Loading ...</div>
    <div id="fps" style="position: absolute; float left; color: white;"></div>
</body>
</html>