| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <title>Try Splat</title>
|
| 6 | <style type="text/css">
|
| 7 | html, body {
|
| 8 | margin: 0;
|
| 9 | padding: 0;
|
| 10 | width: 100%;
|
| 11 | height: 100%;
|
| 12 | overflow: hidden;
|
| 13 | }
|
| 14 | body {
|
| 15 | background-color: white;
|
| 16 | color: black;
|
| 17 | }
|
| 18 | canvas {
|
| 19 | display: block;
|
| 20 | margin: auto;
|
| 21 | padding: 0;
|
| 22 | -webkit-user-select: none;
|
| 23 | -moz-user-select: none;
|
| 24 | -ms-user-select: none;
|
| 25 | -o-user-select: none;
|
| 26 | user-select: none;
|
| 27 | border: 1px solid #ccc;
|
| 28 | }
|
| 29 | .col-2 {
|
| 30 | float: left;
|
| 31 | width: 50%;
|
| 32 | }
|
| 33 | </style>
|
| 34 | </head>
|
| 35 | <body>
|
| 36 | <h1>Try Splat</h1>
|
| 37 | <div class="col-2">
|
| 38 | <div>
|
| 39 | <button id="run">Run</button>
|
| 40 | </div>
|
| 41 | <textarea id="code" cols="80" rows="60">
|
| 42 | var canvas = document.getElementById("canvas");
|
| 43 | var manifest = {
|
| 44 | "images": {},
|
| 45 | "sounds": {},
|
| 46 | "fonts": {},
|
| 47 | "animations": {}
|
| 48 | };
|
| 49 |
|
| 50 | var game = new Splat.Game(canvas, manifest);
|
| 51 |
|
| 52 | game.scenes.add("title", new Splat.Scene(canvas, function() {
|
| 53 | // initialize the scene
|
| 54 |
|
| 55 | this.player = new Splat.Entity(100, 100, 30, 30);
|
| 56 | this.player.draw = function(context) {
|
| 57 | context.fillStyle = "#ff0000";
|
| 58 | context.fillRect(this.x, this.y, this.width, this.height);
|
| 59 | };
|
| 60 |
|
| 61 | this.floor = new Splat.Entity(0, 220, canvas.width, 20);
|
| 62 | this.floor.draw = function(context) {
|
| 63 | context.fillStyle = "#0000ff";
|
| 64 | context.fillRect(this.x, this.y, this.width, this.height);
|
| 65 | };
|
| 66 | }, function(elapsedMillis) {
|
| 67 | // update the simulation / call .move() on everything
|
| 68 |
|
| 69 | this.player.vx *= 0.9; // friction
|
| 70 | this.player.vy += 0.01; // gravity
|
| 71 |
|
| 72 | if (game.keyboard.isPressed("left")) {
|
| 73 | this.player.vx = -0.3;
|
| 74 | }
|
| 75 | if (game.keyboard.isPressed("right")) {
|
| 76 | this.player.vx = 0.3;
|
| 77 | }
|
| 78 |
|
| 79 | this.player.move(elapsedMillis);
|
| 80 |
|
| 81 | if (this.player.collides(this.floor)) {
|
| 82 | this.player.resolveCollisionWith(this.floor);
|
| 83 | if (game.keyboard.isPressed("up")) {
|
| 84 | this.player.vy = -0.3;
|
| 85 | }
|
| 86 | }
|
| 87 | }, function(context) {
|
| 88 | // draw the frame / call .draw() on everything
|
| 89 |
|
| 90 | context.fillStyle = "#000000";
|
| 91 | context.fillRect(0, 0, canvas.width, canvas.height);
|
| 92 |
|
| 93 | this.floor.draw(context);
|
| 94 | this.player.draw(context);
|
| 95 | }));
|
| 96 |
|
| 97 | game.scenes.switchTo("loading");
|
| 98 | </textarea>
|
| 99 | </div>
|
| 100 | <div class="col-2">
|
| 101 | </div>
|
| 102 | <canvas id="canvas" width="320" height="240"></canvas>
|
| 103 | <script type="text/javascript" src="../splat.js"></script>
|
| 104 | <script type="text/javascript" src="try.js"></script>
|
| 105 | </body>
|
| 106 | </html>
|