-
-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding more examples, changing _proto to prototype to make it more ob…
…vious
- Loading branch information
Showing
11 changed files
with
270 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Extend Sprite</title> | ||
| <style> | ||
| canvas { | ||
| background: black; | ||
| } | ||
| </style> | ||
| <script type="text/javascript" src="../../kontra.js"></script> | ||
| </head> | ||
| <body> | ||
| <canvas width="600" height="300"></canvas> | ||
| <script> | ||
| kontra.init(); | ||
|
|
||
| // traditional constructor function inheritance | ||
| function ConstructorParent() { | ||
| this.one = 1; | ||
| } | ||
| ConstructorParent.prototype.myFunc = function() { | ||
| console.log(this.one); | ||
| }; | ||
|
|
||
| function ConstructorChild() { | ||
| this.two = 2; | ||
| } | ||
| ConstructorChild.prototype = new ConstructorParent(); | ||
|
|
||
| ConstructorChild.prototype.someFunc = function() { | ||
| console.log(this.two); | ||
| }; | ||
|
|
||
| var constructorObj = new ConstructorChild(); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // kontra object inheritance using constructor function | ||
| function spriteConstructorChild() { | ||
| this.two = 2; | ||
| } | ||
| spriteConstructorChild.prototype = Object.create(kontra.sprite.prototype); | ||
|
|
||
| spriteConstructorChild.prototype.one = 1; | ||
| spriteConstructorChild.prototype.someFunc = function() { | ||
| console.log(this.two); | ||
| }; | ||
|
|
||
| var spriteConstructorObj = new spriteConstructorChild(); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // kontra object inheritance using factory function | ||
| function createExtendedSprite() { | ||
| var extendedSprite = Object.create(createExtendedSprite.prototype); | ||
| extendedSprite.two = 2; | ||
|
|
||
| return extendedSprite; | ||
| } | ||
|
|
||
| createExtendedSprite.prototype = Object.create(kontra.sprite.prototype); | ||
|
|
||
| createExtendedSprite.prototype.one = 1; | ||
| createExtendedSprite.prototype.someFunc = function() { | ||
| console.log(this.two); | ||
| }; | ||
|
|
||
| var extendedSprite = createExtendedSprite(); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // overriding sprite set function | ||
| function createSetSprite() { | ||
| var extendedSprite = Object.create(createSetSprite.prototype); | ||
| extendedSprite.two = 2; | ||
|
|
||
| return extendedSprite; | ||
| } | ||
|
|
||
| createSetSprite.prototype = Object.create(kontra.sprite.prototype); | ||
|
|
||
| createSetSprite.prototype.set = function(properties) { | ||
| this.one = 1; | ||
| this.someFunc = function() { | ||
| console.log(this.two); | ||
| }; | ||
|
|
||
| // call kontra.sprite set function | ||
| kontra.sprite._proto.set.call(this, properties); | ||
| }; | ||
|
|
||
| var setSprite = createSetSprite(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Particle Engine</title> | ||
| <style> | ||
| canvas { | ||
| background: black; | ||
| } | ||
| </style> | ||
| <script type="text/javascript" src="../../kontra.js"></script> | ||
| </head> | ||
| <body> | ||
| <canvas width="600" height="600"></canvas> | ||
| <script> | ||
| kontra.init(); | ||
|
|
||
| var midX = kontra.canvas.width / 2; | ||
| var midY = kontra.canvas.height / 2; | ||
|
|
||
| // you can animate about 5000 particles in 60PFS | ||
| // each field means you have to reduce the particle count about 1000 to remain under 60FPS | ||
| var fields = [ | ||
| kontra.sprite({ | ||
| x: midX - 75, | ||
| y: midY + 20, | ||
| width: 3, | ||
| height: 3, | ||
| color: 'green', | ||
| properties: { | ||
| mass: 900, | ||
| size: 3 | ||
| } | ||
| }), | ||
| kontra.sprite({ | ||
| x: midX + 25, | ||
| y: midY + 10, | ||
| width: 3, | ||
| height: 3, | ||
| color: 'red', | ||
| properties: { | ||
| mass: -50, | ||
| size: 3 | ||
| } | ||
| }) | ||
| ]; | ||
|
|
||
| var pool = kontra.pool({ | ||
| create: kontra.sprite, | ||
| maxSize: 4000, | ||
| fill: true | ||
| }); | ||
|
|
||
| kontra.context.fillStyle = 'blue'; | ||
|
|
||
| // redefine sprite update to account for fields | ||
| kontra.sprite.prototype.update = function() { | ||
| // apply field | ||
| var totalAccelerationX = 0 | ||
| var totalAccelerationY = 0; | ||
|
|
||
| for (var i = 0, field; field = fields[i]; i++) { | ||
|
|
||
| var vectorX = field.position.x - this.position.x; | ||
| var vectorY = field.position.y - this.position.y; | ||
|
|
||
| var force = field.mass / Math.pow(vectorX * vectorX + vectorY * vectorY, 1.5); | ||
|
|
||
| totalAccelerationX += vectorX * force; | ||
| totalAccelerationY += vectorY * force; | ||
| } | ||
|
|
||
| this.acceleration.x = totalAccelerationX | ||
| this.acceleration.y = totalAccelerationY | ||
|
|
||
| this.advance(); | ||
| }; | ||
|
|
||
| // redefine sprite render to not change context fillStyle every time | ||
| kontra.sprite.prototype.render = function() { | ||
| kontra.context.fillRect(this.position.x, this.position.y, 3, 3); | ||
| }; | ||
|
|
||
| var loop = kontra.gameLoop({ | ||
| update: function() { | ||
| for (var i = 0; i < 4; i++) { | ||
| pool.get({ | ||
| x: midX + 75, | ||
| y: midY, | ||
| dx: 2 - Math.random() * 4, | ||
| dy: 2 - Math.random() * 4, | ||
| color: 'blue', | ||
| width: 1, | ||
| height: 1, | ||
| timeToLive: Infinity | ||
| }); | ||
| } | ||
|
|
||
| pool.update(); | ||
| }, | ||
| render: function() { | ||
| kontra.context.clearRect(0, 0, kontra.game.width, kontra.game.height); | ||
|
|
||
| pool.render(); | ||
| } | ||
| }); | ||
|
|
||
| loop.start(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.