Bootstrap Snippet Animated Game using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        
<div id="css-demo">
    <div class="buttons">
        <label for="speed">Speed</label>
        <input name="speed" id="speed-input" type="number" value="200"> px/sec</input>
        <button onclick="APP.play();">Play</button>
        <button onclick="APP.pause();">Pause</button>
        <span class="framerate"><span id="framerate">0</span> fps</span>
    </div>
    <div id="css-bullet"></div>
    <div id="css-cannon"></div>
</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body, html {
    font-family: sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}
#css-demo {
    background: #9adaea url(http://viget.com/uploads/file/time-based-animation/images/ground.png) repeat-x 0 100%;
}
#css-demo {
    height: 338px;
    max-width: 580px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin:50px 0px 0px 250px;
}
#css-bullet {
    background: url(http://viget.com/uploads/file/time-based-animation/images/bullet-bill.png) no-repeat;
    height: 56px;
    left: 460px;
    position: absolute;
    top: 114px;
    width: 64px;
}
#css-cannon {
    background: url(http://viget.com/uploads/file/time-based-animation/images/cannon.png) no-repeat;
    height: 128px;
    right: 56px;
    position: absolute;
    top: 110px;
    width: 64px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Requires requestAnimationFrame polyfill
// https://gist.github.com/1579671
window.APP = window.APP || {};
APP.init = function() {
    APP.setup.initObjects();
    APP.setup.initSpeedInput();
    APP.setup.addListeners();
    APP.play();
};
APP.pause = function() {
    window.cancelAnimationFrame(APP.animationFrameLoop);
    APP.isRunning = false;
};
APP.play = function() {
    if(!APP.isRunning) {
        APP._then = Date.now();
        APP.core.frame();
        APP.isRunning = true;
    }
};
APP.core = {
    frame: function() {
        APP.now = Date.now();
        APP._delta = (APP.now - APP._then) / 1000; // Converts to seconds (optional)
        APP._then = APP.now;
        APP.core.update();
        APP.animationFrameLoop = window.requestAnimationFrame(APP.core.frame);
    },
    update: function() {
        APP.workers.moveObjects();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Game"
Bootstrap 4.0.0 Snippet by Walia5

Related: See More

Questions / Comments:

"Animated Game" Bootstrap 4.0.0 Snippet by Walia5

Related: See More

Questions / Comments:

"Animated Game"
Bootstrap 4.0.0 Snippet by Walia5