A lightweight JavaScript game engine
git clone git://soophie.de/game-engine
46
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>47
<h4>start()</h4>48
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>49
<h4>bindEvent(element, event)</h4>50
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>51
<h4>populateEvent(event)</h4>49
<h4>bindEvent(element, type)</h4>50
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>51
<h4>resize(width, height)</h4>52
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
60
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>61
<h4>render(g)</h4>62
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>63
<h4>causeEvent(type, events)</h4>64
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>65
<h4>collide()</h4>66
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>67
<h4>add(surface)</h4>
80
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>81
<h4>render(g)</h4>82
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>83
<h4>causeEvent(event)</h4>83
<h4>causeEvent(type, events)</h4>84
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>85
<h2 data-ref="shape">Shape</h2>86
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
93
}</pre></code>94
<h2 data-ref="event-handling">Event Handling</h2>95
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>96
<code><pre><span class="c">this</span>.<span class="p ref">bindEvent</span>(<span class="c">this</span>.<span class="n">canvas</span>, <span class="s">'onclick'</span>);</pre></code>97
<code><pre><span class="p ref">populateEvent</span>(<span class="n">event</span>) {98
<span class="x">// populate properties</span>99
<span class="c">return</span> <span class="n">event</span>;100
}</pre></code>101
<code><pre><span class="c">const</span> { <span class="n ref">click</span> } = <span class="c">this</span>.<span class="n ref">events</span>;103
<span class="c">if</span>(<span class="n">click</span>) {96
<code><pre><span class="c">this</span>.<span class="p ref">bindEvent</span>(<span class="c">this</span>.<span class="n">canvas</span>, <span class="s">'click'</span>);</pre></code>97
<code><pre><span class="n">surface</span>.<span class="p ref">causeEvent</span>(<span class="s">'click'</span>, <span class="c">this</span><span class="n">.events</span>);</pre></code>98
<code><pre><span class="p">onclick</span>(<span class="n">event</span>) {99
<span class="x">// handle click</span>100
}</pre></code>101
</div>
10
this.canvas = document.createElement('canvas');11
scaleCanvas(this.canvas, this.width, this.height);12
this.g = this.canvas.getContext('2d');13
this.events = new Proxy({}, {14
get: function(object, prop) {15
const val = object[prop];16
if(typeof val !== 'undefined') {17
delete object[prop];18
}19
return val;20
}21
});13
this.events = [];14
}15
start() {16
requestAnimationFrame(this.loop.bind(this));17
this.update();26
this.g.save();18
this.render(this.g);28
this.g.restore();19
}20
loop() {21
requestAnimationFrame(this.loop.bind(this));
23
this.elapsed = this.now - this.then;24
if(this.elapsed > this.fps) {25
this.then = this.now - (this.elapsed % this.fps);26
for(const event of this.events) {27
if(this['on' + event.type]) {28
this['on' + event.type](event);29
}30
}31
this.update();37
this.g.save();32
this.render(this.g);39
this.g.restore();33
this.events.length = 0;34
}35
}36
update() {43
// empty37
// nothing38
}39
render() {40
this.g.clearRect(0, 0, this.width, this.height);
44
this.height = height;45
scaleCanvas(this.canvas, this.width, this.height);46
}53
bindEvent(element, event) {54
element[event] = event => {55
this.events[event.type] = this.populateEvent ? { type: event.type, ...this.populateEvent(event) } : event;56
}47
bindEvent(element, type) {48
element['on' + type] = event => this.events.push(event);49
}50
}
60
}61
render(g) {62
for(let item of this.items) {71
g.save();63
item.render(g);73
g.restore();64
}65
}66
causeEvent(type, events) {67
for(let item of this.items) {68
item.causeEvent(type, events);69
}70
}71
collide() {
127
this.x = x;128
this.y = y;129
this.shape = shape;135
this.events = new Proxy({}, {136
get: function(object, prop) {137
const val = object[prop];138
if(typeof val !== 'undefined') {139
delete object[prop];140
}141
return val;142
}143
});130
}131
update() {146
// empty132
// nothing133
}134
render(g) {135
if(this.shape instanceof Shape.Rect) {
143
g.stroke();144
}145
}160
causeEvent(event) {161
this.events[event.type] = event;146
causeEvent(type, events) {147
if(this['on' + type]) {148
for(const event of events) {149
if(event.type === type) {150
this['on' + type](event);151
}152
}153
}154
}155
}