Commits

remosu  committed b6c683c

Initial commit

  • Participants

Comments (0)

Files changed (1)

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <title></title>
+        <style type="text/css" media="all">
+            html,
+            body {
+                padding: 0;
+                margin: 0;
+            }
+            body {
+                text-align: center;
+            }
+            .board {
+                position: relative;
+                width: 500px;
+                height: 700px;
+                display: inline-block;
+                z-index: 2;
+            }
+            .header {
+                width: 100%;
+                height: 14.3%;
+            }
+            .card_zone {
+                width: 100%;
+                height: 71.4%;
+            }
+            .figs_zone {
+                width: 100%;
+                height: 14.3%;
+            }
+            .fig {
+                height: 100%;
+                width: 20%;
+                background-color: blue;
+                float: left;
+                border-radius: 50%;
+                z-index: 10;
+                position: relative;
+            }
+            .score {
+                float: right;
+            }
+            
+            .level_zone {
+                position: absolute;
+                background: linear-gradient( 0deg, red, white );
+                width: 100%;
+                height: 100px;
+                bottom: 0;
+                z-index: 1;
+            }
+            .level_zone_bg {
+                position: absolute;
+                width: 100%;
+                height: 0;
+                background-color: red;
+                bottom: 0;
+                z-index: 1;
+            }
+
+            .hide {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="board hide" id="gameboard">
+            <div class="header">
+                <div class="fig score">
+                </div>
+            </div>
+            <div class="card_zone">
+            </div>
+            <div class="figs_zone">
+                <div class="fig">
+                </div>
+                <div class="fig">
+                </div>
+                <div class="fig">
+                </div>
+                <div class="fig">
+                </div>
+                <div class="fig">
+                </div>
+            </div>
+            <div class="level_zone" id="level">
+            </div>
+            <div class="level_zone_bg" id="level_bg">
+            </div>
+        </div>
+        <script src="bower_components/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+            var c = 0;
+            var requestId;
+            var height = 0;
+            var startTime = 0;
+
+            function animate(time) {
+                var dt = time - startTime;
+                var h = parseInt(dt / 10000 * height);
+                console.log(dt / 1000, h);
+                c += 1;
+                $('#level').css('bottom', h+'px');
+                $('#level_bg').css('height', h+'px');
+                requestId = window.requestAnimationFrame(animate);
+                if (h > height) {
+                    window.cancelAnimationFrame(requestId);
+                }
+            }
+
+            requestI = window.requestAnimationFrame(start);
+
+            function start(time) {
+                startTime = time;
+                requestId = window.requestAnimationFrame(animate);
+            }
+
+            $(window).on('load', function(event) {
+                var gameboardEl = $('#gameboard');
+                gameboardEl.removeClass('hide');
+                $(this).resize();
+            });
+
+            $(window).on('resize', function(event) {
+                var gameboardEl = $('#gameboard');
+                var windowRatio = $(window).width() / $(window).height();
+                var boardRatio = gameboardEl.width() / gameboardEl.height();
+                if ( windowRatio > boardRatio ) {
+                    gameboardEl.css('height', $(window).height());
+                    gameboardEl.css('Width', $(window).height() * boardRatio + 'px');
+                } else {
+                    gameboardEl.css('width', $(window).width());
+                    gameboardEl.css('height', $(window).width() / boardRatio + 'px');
+                }
+                height = gameboardEl.height();
+            });
+        </script>
+    </body>
+</html>