From a212a9045a50fb91947a6d8e6ca1a120cfe00364 Mon Sep 17 00:00:00 2001 From: Aaron Fischer Date: Tue, 15 Aug 2017 10:16:27 +0200 Subject: [PATCH] Scaffold --- src/assets/styles.css | 25 ++++++++++++++++++++++ src/index.html | 12 ++++++++--- src/main.js | 49 +++++++++++++++++++++++-------------------- 3 files changed, 60 insertions(+), 26 deletions(-) create mode 100644 src/assets/styles.css diff --git a/src/assets/styles.css b/src/assets/styles.css new file mode 100644 index 0000000..25839e5 --- /dev/null +++ b/src/assets/styles.css @@ -0,0 +1,25 @@ +body { + background-color: black; + margin-top: 50px; + text-align: center; + color: #a44; +} + +h1 { + font-size: 4em; + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + margin: 0; +} +a { + color: white; +} +p { + margin-bottom: 20px; +} + +canvas { + background-color: white; + margin: auto; + display: block; + border: 1px solid #a44; +} diff --git a/src/index.html b/src/index.html index 92347c3..567933c 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,9 @@ - - - + + +

JS13KGames 2017

+

by Aaron Fischer

+ + + + + diff --git a/src/main.js b/src/main.js index 6ae9105..7cae803 100644 --- a/src/main.js +++ b/src/main.js @@ -1,26 +1,29 @@ -var sprite = kontra.sprite({ - x: 100, // starting x,y position of the sprite - y: 80, - color: 'red', // fill color of the sprite rectangle - width: 20, // width and height of the sprite rectangle - height: 40, - dx: 2 // move the sprite 2px to the right every frame -}); +(function() { + kontra.init('js13k-2017'); + //kontra.canvas.width = document.body.scrollWidth; + //kontra.canvas.height = document.body.scrollHeight; -var loop = kontra.gameLoop({ // create the main game loop - update: function() { // update the game state - sprite.update(); + var sprite = kontra.sprite({ + x: 100, + y: 80, + color: '#bb4444', + width: 50, + height: 50, + dx: 1 + }); - // wrap the sprites position when it reaches - // the edge of the screen - if (sprite.x > kontra.canvas.width) { - sprite.x = -sprite.width; - } - }, - render: function() { // render the game state - sprite.render(); - } -}); + var loop = kontra.gameLoop({ + update: function() { + sprite.update(); -kontra.init(getElementById('game')); -loop.start(); // start the game + if (sprite.x > kontra.canvas.width) { + sprite.x = -sprite.width; + } + }, + render: function() { + sprite.render(); + } + }); + + loop.start(); +})();