A lightweight JavaScript game engine
git clone git://soophie.de/game-engine
blob: e1f15d82fc2685c7aa8c87b2bb7d1027c189d322 (5512 bytes)[doc][blame][raw]
1
[2
{3
"id": "js",4
"name": "JavaScript",5
"url": "/js",6
"posts": [7
{8
"id": "js.html",9
"name": "html",10
"syntax": "html`...`",11
"description": "Creates a DOM element from the given template literal.",12
"import": "import { html } from 'https://git.typable.dev/std/js/render.js';",13
"code": [14
"const Message = props => {",15
"\treturn html`<h1>${props.text}</h1>`;",16
"};",17
"",18
"const message = Message({ text: 'Hello World!' });",19
"document.body.append(message);"20
]21
},22
{23
"id": "js.escape",24
"name": "escape",25
"syntax": "escape(...)",26
"description": "Returns escape xml from the given string.",27
"import": "import { escape } from 'https://git.typable.dev/std/js/render.js';",28
"code": [29
"escape(`<h1>Hello World!</h1>`);"30
]31
},32
{33
"id": "js.game",34
"name": "Game",35
"syntax": "Game(width, height, { fps })",36
"description": "By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.",37
"import": "import { Game } from 'https://git.typable.dev/std/js/game.js';",38
"code": [39
"class DinoGame extends Game {",40
"\tconstructor() {",41
"\t\tsuper(900, 600);",42
"\t\tthis.point = { x: 100, y: 100 };",43
"\t}",44
"\tupdate() {",45
"\t\tthis.point.x += 1;",46
"\t}",47
"\trender(g) {",48
"\t\tsuper.render(g); // clear screen",49
"\t\tconst {x, y} = this.point;",50
"\t\tg.fillRect(x, y, 50, 50);",51
"\t}",52
"}",53
"",54
"const game = new DinoGame();",55
"document.body.append(game.canvas);",56
"",57
"game.start();"58
]59
},60
{61
"id": "js.surface",62
"name": "Surface",63
"syntax": "Surface(x, y, shape)",64
"description": "Represents a rectangular surface with its own update and render method.",65
"import": "import { Surface } from 'https://git.typable.dev/std/js/game.js';",66
"code": [67
"class Player extends Surface {",68
"\tconstructor(x, y) {",69
"\t\tsuper(x, y, new Shape.Rect(50, 50));",70
"\t}",71
"\tupdate() {",72
"\t\tthis.x += 1;",73
"\t}",74
"\trender(g) {",75
"\t\tconst {x, y, shape: {width, height}} = this;",76
"\t\tg.fillRect(x, y, width, height);",77
"\t}",78
"}",79
"",80
"// Collision (in combination with a Group):",81
"this.collided // if surface collides with another",82
"this.items // all colliding surfaces"83
]84
},85
{86
"id": "js.group",87
"name": "Group",88
"syntax": "Group()",89
"description": "Can be used to group specific elements for update and rendering purposes.",90
"import": "import { Group } from 'https://git.typable.dev/std/js/game.js';",91
"code": [92
"const group = new Group();",93
"group.add(...);",94
"",95
"group.collide(); // call in update method for collision",96
"group.update();",97
"group.render(g);"98
]99
},100
{101
"id": "js.shape.rect",102
"name": "Shape.Rect",103
"syntax": "Shape.Rect(width, height)",104
"description": "Represents a rectangular hitbox.",105
"import": "import { Shape } from 'https://git.typable.dev/std/js/game.js';"106
},107
{108
"id": "js.shape.circle",109
"name": "Shape.Circle",110
"syntax": "Shape.Circle(radius)",111
"description": "Represents a circular hitbox.",112
"import": "import { Shape } from 'https://git.typable.dev/std/js/game.js';"113
},114
{115
"id": "js.scalecanvas",116
"name": "scaleCanvas",117
"syntax": "scaleCanvas(canvas, width, height)",118
"description": "Scales a canvas to the device related pixel ratio.",119
"import": "import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';"120
}121
]122
},123
{124
"id": "less",125
"name": "Less",126
"url": "/less",127
"posts": [128
{129
"id": "less.normalize",130
"name": "Normalize",131
"description": "Normalizes spacing and interactive elements and adds additional alignment classes.",132
"import": "@import url('https://git.typable.dev/std/less/normalize.less');",133
"code": [134
"// Required variables (define before import)",135
"@gap: px - Space between column elements",136
"@full-width: px - Maximum width for centered container elements",137
"",138
"// Alignment classes",139
".col - Horizontal spacing",140
".row - Inverts horziontal spacing",141
".container - Align centered with horizontal spacing",142
".container-fluid - Align full width with horizontal spacing",143
"",144
"// Structure",145
".container-fluid {",146
"\t.row {",147
"\t\t.container {",148
"\t\t\t...",149
"\t\t}",150
"\t}",151
"}"152
]153
},154
{155
"id": "less.color",156
"name": "Color",157
"syntax": "@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]",158
"description": "A collection of material colors inspired by the Google Material Colors.<br>Source: <a href=\"https://material.io/design/color/the-color-system.html#tools-for-picking-colors\" target=\"_blank\">View Material Colors</a>",159
"import": "@import url('https://git.typable.dev/std/less/color.less');",160
"code": [161
"@color-black;",162
"@color-teal-50;",163
"@color-blue-500;"164
]165
},166
{167
"id": "less.icons",168
"name": "Icons",169
"syntax": ".ico",170
"description": "Imports the Google Material Icons Fonts.<br>Source: <a href=\"https://material.io/resources/icons\" target=\"_blank\">View Material Icons</a>",171
"import": "@import url('https://git.typable.dev/std/less/icons.less');",172
"code": [173
"<span class=\"ico\">close</span>"174
]175
}176
]177
}