nkellenicki/momentumengine
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Converted Pong example over to ES6 and new format

Browse Source
This commit is contained in:
Nathan Kunicki 2016-03-06 19:45:53 -05:00
parent 2a032ca2e2
commit dbff95c496
2 changed files with 131 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
examples/pong/pong.js
View File

@ -2,19 +2,93 @@
import MomentumEngine from "../../src/es6";
let KeyConsts = MomentumEngine.Consts.Input.Keys;
window.onload = function () {
var width = 640,
let width = 640,
height = 360,
baseSize = width / 64;
let white = new MomentumEngine.Classes.Color(255, 255, 255),
black = new MomentumEngine.Classes.Color(0, 0, 0);
var pong = new MomentumEngine.Classes.Game({
canvas: document.getElementById("canvas"),
class Ball extends MomentumEngine.Classes.Rect {
constructor (startingLeft, startingTop) {
super(startingLeft, startingTop, baseSize, baseSize, white);
this.speed = new MomentumEngine.Classes.Vector2D(0.1, 0.05); // Starting ball speed
}
update (delta) {
this.pos.add(this.speed.clone().multiply(delta));
if ((this.left + baseSize > width && this.speed.x > 0) || (this.left < 0 && this.speed.x < 0)) {
this.speed.x = -this.speed.x;
}
if ((this.top + baseSize > height && this.speed.y > 0) || (this.top < 0 && this.speed.y < 0)) {
this.speed.y = -this.speed.y;
}
}
}
class Paddle extends MomentumEngine.Classes.Rect {
constructor (posLeft, keys) {
super(posLeft, baseSize, baseSize, baseSize * 7, white);
this.keyUp = keys.up;
this.keyDown = keys.down;
}
update (delta) {
if (this._game.inputs.keyboard.isPressed(this.keyUp)) {
this.top -= (0.5 * delta);
} else if (this._game.inputs.keyboard.isPressed(this.keyDown)) {
this.top += (0.5 * delta);
}
if (this.top > height - (baseSize * 8)) {
this.top = height - (baseSize * 8);
} else if (this.top < baseSize) {
this.top = baseSize;
}
this.balls.forEach((ball) => {
if (this.isCollidingWith(ball)) {
ball.speed.x = -ball.speed.x;
}
});
}
}
class Pong extends MomentumEngine.Classes.Game {
constructor (canvas, width, height) {
super({
canvas: canvas,
width: width,
height: height,
fixRatio: true,
@ -24,95 +98,51 @@ window.onload = function () {
}
});
let background = new MomentumEngine.Classes.Rect(0, 0, width, height, black);
this.addChildEntity(background);
// Colors
var white = new MomentumEngine.Classes.Color(255, 255, 255),
black = new MomentumEngine.Classes.Color(0, 0, 0);
this.balls = [];
this.paddles = [];
}
// All of these are instances of MomentumEngine.Classes.Entity
var mainScene = new MomentumEngine.Classes.Rect(0, 0, width, height, black),
ball = new MomentumEngine.Classes.Rect((width / 2) - (baseSize / 2), (height / 2) - (baseSize / 2), baseSize, baseSize, white),
leftPaddle = new MomentumEngine.Classes.Rect(baseSize, baseSize, baseSize, baseSize * 7, white),
rightPaddle = new MomentumEngine.Classes.Rect(width - (baseSize * 2), baseSize, baseSize, baseSize * 7, white);
addBall (ball) {
this.balls.push(ball);
this.addChildEntity(ball);
}
addPaddle (paddle) {
this.paddles.push(paddle);
this.addChildEntity(paddle);
paddle.balls = this.balls;
}
}
window.onload = function () {
var pong = new Pong(document.getElementById("canvas"), width, height);
var ball = new Ball((width / 2) - (baseSize / 2), (height / 2) - (baseSize / 2));
var leftPaddle = new Paddle(baseSize, {
up: KeyConsts.CHAR_Q,
down: KeyConsts.CHAR_A
});
var rightPaddle = new Paddle(width - (baseSize * 2), {
up: KeyConsts.CHAR_O,
down: KeyConsts.CHAR_L
});
// Create scene graph
pong.addChildEntity(mainScene);
mainScene.addChildEntity(ball);
mainScene.addChildEntity(leftPaddle);
mainScene.addChildEntity(rightPaddle);
// Update the ball position
ball.state.speed = new MomentumEngine.Classes.Vector2D(0.1, 0.05); // Current ball speed
ball.update = function (delta) {
this.pos.add(this.state.speed.clone().multiply(delta));
if ((this.left + baseSize > width && this.state.speed.x > 0) || (this.left < 0 && this.state.speed.x < 0)) {
this.state.speed.x = -this.state.speed.x;
}
if ((this.top + baseSize > height && this.state.speed.y > 0) || (this.top < 0 && this.state.speed.y < 0)) {
this.state.speed.y = -this.state.speed.y;
}
};
// Update the left paddle according to keyboard input
leftPaddle.update = function (delta) {
if (pong.inputs.keyboard.isPressed(KeyConsts.CHAR_Q) || pong.inputs.keyboard.isPressed(KeyConsts.UP)) {
leftPaddle.top -= (0.5 * delta);
}
if (pong.inputs.keyboard.isPressed(KeyConsts.CHAR_A) || pong.inputs.keyboard.isPressed(KeyConsts.DOWN)) {
leftPaddle.top += (0.5 * delta);
}
if (leftPaddle.top > height - (baseSize * 8)) {
leftPaddle.top = height - (baseSize * 8);
}
if (leftPaddle.top < baseSize) {
leftPaddle.top = baseSize;
}
if (leftPaddle.isCollidingWith(ball) && ball.state.speed.x < 0) {
ball.state.speed.x = -ball.state.speed.x;
}
};
// Update the right paddle according to keyboard input
rightPaddle.update = function (delta) {
if (pong.inputs.keyboard.isPressed(KeyConsts.CHAR_O)) {
rightPaddle.top -= (0.5 * delta);
}
if (pong.inputs.keyboard.isPressed(KeyConsts.CHAR_L)) {
rightPaddle.top += (0.5 * delta);
}
if (rightPaddle.top > height - (baseSize * 8)) {
rightPaddle.top = height - (baseSize * 8);
}
if (rightPaddle.top < baseSize) {
rightPaddle.top = baseSize;
}
if (rightPaddle.isCollidingWith(ball) && ball.state.speed.x > 0) {
ball.state.speed.x = -ball.state.speed.x;
}
};
pong.addBall(ball);
pong.addPaddle(leftPaddle);
pong.addPaddle(rightPaddle);
pong.start();

3
gulpfile.js
View File

@ -102,11 +102,9 @@ var build = function (options, callback) {
examples.forEach((example) => {
let entry = {};
entry[example] = path.join(__dirname, "examples", example, `${example}.js`);
gulp.task(`${example}-example`, (callback) => {
build({
@ -117,7 +115,6 @@ examples.forEach((example) => {
}, callback);
});
});