diff --git a/src/html5-logo.svg b/src/html5-logo.svg new file mode 100755 index 0000000..b1dbadd --- /dev/null +++ b/src/html5-logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/templateList.js b/src/templateList.js index 74ea597..733db8e 100644 --- a/src/templateList.js +++ b/src/templateList.js @@ -10,15 +10,8 @@ export default [ img: 'react-logo.svg' }, { - id: 'html5-canvas', - title: 'HTML5 Canvas', - lastUpdatedTime: Date.now(), - img: 'html5-logo.svg' - }, - { - id: 'html5-canvas-game', - title: 'HTML5 Canvas Game', - lastUpdatedTime: Date.now(), + id: 'kontra-game-engine', + title: 'Kontra HTML5 Game Engine', img: 'html5-logo.svg' } ]; diff --git a/src/templates/template-kontra-game-engine.json b/src/templates/template-kontra-game-engine.json new file mode 100644 index 0000000..38f37b2 --- /dev/null +++ b/src/templates/template-kontra-game-engine.json @@ -0,0 +1,18 @@ +{ + "title": "Kontra HTML5 game engine template", + "html": " ", + "css": "", + "js": + "kontra.init();\n\nvar sprite = kontra.sprite({\n x: 100, // starting x,y position of the sprite\n y: 80,\n color: '#bad455', // fill color of the sprite rectangle\n width: 20, // width and height of the sprite rectangle\n height: 40,\n dx: 2, // move the sprite 2px to the right every frame\n});\n\nvar loop = kontra.gameLoop({ // create the main game loop\n update: function() { // update the game state\n sprite.update();\n\n // wrap the sprites position when it reaches\n // the edge of the screen\n if (sprite.x > kontra.canvas.width) {\n sprite.x = -sprite.width;\n }\n },\n render: function() { // render the game state\n sprite.render();\n }\n});\n\nloop.start(); // start the game", + "externalLibs": { + "js": + "https://unpkg.com/kontra@3.3.0/dist/core.js\nhttps://unpkg.com/kontra@3.3.0/dist/sprite.js\nhttps://unpkg.com/kontra@3.3.0/dist/gameLoop.js\nhttps://unpkg.com/kontra@3.3.0/dist/pointer.js", + "css": "" + }, + "htmlMode": "html", + "cssMode": "css", + "jsMode": "js", + "sizes": ["33px", "33px", "calc(100% - 66px)"], + "mainSizes": [50, 50], + "layoutMode": 1 +}