Added 10 more gists.
This commit is contained in:
Miguel Astor
1
breakout_phaser.coffee/README.md
Normal file
1
breakout_phaser.coffee/README.md
Normal file
@@ -0,0 +1 @@
|
||||
Coffeescript implementation of the MDN Breakout tutorial with Phaser V2 from [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay)
|
||||
151
breakout_phaser.coffee/breakout_phaser.coffee
Normal file
151
breakout_phaser.coffee/breakout_phaser.coffee
Normal file
@@ -0,0 +1,151 @@
|
||||
ball = null
|
||||
paddle = null
|
||||
bricks = null
|
||||
newBrick = null
|
||||
brickInfo = null
|
||||
scoreText = null
|
||||
score = 0
|
||||
textStyle =
|
||||
font: "18px Arial"
|
||||
fill: "#0095DD"
|
||||
lives = 3
|
||||
livesText = null
|
||||
lifeLostText = null
|
||||
playing = false
|
||||
startButton = null
|
||||
|
||||
startGame = ->
|
||||
do startButton.destroy
|
||||
ball.body.velocity.set 150, -150
|
||||
playing = true
|
||||
|
||||
ballLeaveScreen = ->
|
||||
playing = false
|
||||
lives--
|
||||
if lives
|
||||
livesText.setText "Lives: " + lives
|
||||
lifeLostText.visible = true
|
||||
ball.reset game.world.width * 0.5, game.world.height - 25
|
||||
paddle.reset game.world.width * 0.5, game.world.height - 5
|
||||
game.input.onDown.addOnce ->
|
||||
lifeLostText.visible = false
|
||||
ball.body.velocity.set 150, -150
|
||||
playing = true
|
||||
, this
|
||||
else
|
||||
alert "Game over, man!"
|
||||
do location.reload
|
||||
|
||||
initBricks = ->
|
||||
brickInfo =
|
||||
width: 50
|
||||
height: 20
|
||||
count:
|
||||
row: 3
|
||||
col: 7
|
||||
offset:
|
||||
top: 50
|
||||
left: 60
|
||||
padding: 10
|
||||
|
||||
bricks = do game.add.group
|
||||
|
||||
for c in [0 ... brickInfo.count.col]
|
||||
for r in [0 ... brickInfo.count.row]
|
||||
brickX = (c * (brickInfo.width + brickInfo.padding)) + brickInfo.offset.left
|
||||
brickY = (r * (brickInfo.height + brickInfo.padding)) + brickInfo.offset.top
|
||||
newBrick = game.add.sprite brickX, brickY, "brick"
|
||||
game.physics.enable newBrick, Phaser.Physics.ARCADE
|
||||
newBrick.body.immovable = true
|
||||
newBrick.anchor.set 0.5
|
||||
bricks.add newBrick
|
||||
|
||||
ballHitBrick = (ball, brick) ->
|
||||
target =
|
||||
x: 0
|
||||
y: 0
|
||||
killTween = game.add.tween brick.scale
|
||||
killTween.to target =
|
||||
x: 0
|
||||
y: 0
|
||||
, 200, Phaser.Easing.Linear.None
|
||||
killTween.onComplete.addOnce ->
|
||||
do brick.kill
|
||||
, this
|
||||
do killTween.start
|
||||
|
||||
score += 10
|
||||
scoreText.setText "Points: " + score
|
||||
|
||||
if score == brickInfo.count.row * brickInfo.count.col * 10
|
||||
alert "A winner is you!"
|
||||
do location.reload
|
||||
|
||||
ball.animations.play "wobble"
|
||||
|
||||
ballHitPaddle = (ball, paddle) ->
|
||||
ball.animations.play "wobble"
|
||||
ball.body.velocity.x = -1 * 5 * (paddle.x - ball.x)
|
||||
|
||||
preload = ->
|
||||
# Set basic game properties
|
||||
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
|
||||
game.scale.pageAlignHorizontally = true
|
||||
game.scale.pageAlignVertically = true
|
||||
game.stage.backgroundColor = "#eee"
|
||||
|
||||
# Load texture images
|
||||
game.load.image "paddle", "img/paddle.png"
|
||||
game.load.image "brick", "img/brick.png"
|
||||
game.load.spritesheet "ball", "img/wobble.png", 20, 20
|
||||
game.load.spritesheet "button", "img/button.png", 120, 40
|
||||
|
||||
create = ->
|
||||
# Initialize the physics engine
|
||||
game.physics.startSystem Phaser.Physics.ARCADE
|
||||
game.physics.arcade.checkCollision.down = false
|
||||
|
||||
# Create the ball sprite and set it"s properties
|
||||
ball = game.add.sprite game.world.width * 0.5, game.world.height - 25, "ball"
|
||||
ball.animations.add "wobble", [0, 1, 0, 2, 0, 1, 0, 2, 0], 24
|
||||
ball.anchor.set 0.5
|
||||
game.physics.enable ball, Phaser.Physics.ARCADE
|
||||
ball.body.bounce.set 1
|
||||
ball.body.collideWorldBounds = true
|
||||
ball.checkWorldBounds = true
|
||||
ball.events.onOutOfBounds.add ballLeaveScreen, this
|
||||
|
||||
# Create the paddle sprite and set it"s properties
|
||||
paddle = game.add.sprite game.world.width * 0.5, game.world.height - 5, "paddle"
|
||||
paddle.anchor.set 0.5, 1
|
||||
game.physics.enable paddle, Phaser.Physics.ARCADE
|
||||
paddle.body.immovable = true
|
||||
|
||||
# Brick creation
|
||||
do initBricks
|
||||
|
||||
# Scorekeeping
|
||||
scoreText = game.add.text 5, 5, "Points: 0", textStyle
|
||||
|
||||
# Player lives
|
||||
livesText = game.add.text game.world.width - 5, 5, "Lives: " + lives, textStyle
|
||||
livesText.anchor.set 1, 0
|
||||
lifeLostText = game.add.text game.world.width * 0.5, game.world.height * 0.5, 'Life lost, click to continue', textStyle
|
||||
lifeLostText.anchor.set 0.5
|
||||
lifeLostText.visible = false
|
||||
|
||||
# Start button
|
||||
startButton = game.add.button game.world.width * 0.5, game.world.height * 0.5, "button", startGame, this, 1, 0, 2
|
||||
startButton.anchor.set 0.5
|
||||
|
||||
update = ->
|
||||
game.physics.arcade.collide ball, paddle, ballHitPaddle
|
||||
game.physics.arcade.collide ball, bricks, ballHitBrick
|
||||
paddle.x = game.input.x or (game.world.width * 0.5) if playing
|
||||
|
||||
functions =
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
|
||||
game = new Phaser.Game 480, 320, Phaser.CANVAS, null, functions
|
||||
186
breakout_phaser.coffee/breakout_phaser.js
Normal file
186
breakout_phaser.coffee/breakout_phaser.js
Normal file
@@ -0,0 +1,186 @@
|
||||
// Generated by CoffeeScript 2.3.2
|
||||
(function() {
|
||||
var ball, ballHitBrick, ballHitPaddle, ballLeaveScreen, brickInfo, bricks, create, functions, game, initBricks, lifeLostText, lives, livesText, newBrick, paddle, playing, preload, score, scoreText, startButton, startGame, textStyle, update;
|
||||
|
||||
ball = null;
|
||||
|
||||
paddle = null;
|
||||
|
||||
bricks = null;
|
||||
|
||||
newBrick = null;
|
||||
|
||||
brickInfo = null;
|
||||
|
||||
scoreText = null;
|
||||
|
||||
score = 0;
|
||||
|
||||
textStyle = {
|
||||
font: "18px Arial",
|
||||
fill: "#0095DD"
|
||||
};
|
||||
|
||||
lives = 3;
|
||||
|
||||
livesText = null;
|
||||
|
||||
lifeLostText = null;
|
||||
|
||||
playing = false;
|
||||
|
||||
startButton = null;
|
||||
|
||||
startGame = function() {
|
||||
startButton.destroy();
|
||||
ball.body.velocity.set(150, -150);
|
||||
return playing = true;
|
||||
};
|
||||
|
||||
ballLeaveScreen = function() {
|
||||
playing = false;
|
||||
lives--;
|
||||
if (lives) {
|
||||
livesText.setText("Lives: " + lives);
|
||||
lifeLostText.visible = true;
|
||||
ball.reset(game.world.width * 0.5, game.world.height - 25);
|
||||
paddle.reset(game.world.width * 0.5, game.world.height - 5);
|
||||
return game.input.onDown.addOnce(function() {
|
||||
lifeLostText.visible = false;
|
||||
ball.body.velocity.set(150, -150);
|
||||
return playing = true;
|
||||
}, this);
|
||||
} else {
|
||||
alert("Game over, man!");
|
||||
return location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
initBricks = function() {
|
||||
var brickX, brickY, c, i, r, ref, results;
|
||||
brickInfo = {
|
||||
width: 50,
|
||||
height: 20,
|
||||
count: {
|
||||
row: 3,
|
||||
col: 7
|
||||
},
|
||||
offset: {
|
||||
top: 50,
|
||||
left: 60
|
||||
},
|
||||
padding: 10
|
||||
};
|
||||
bricks = game.add.group();
|
||||
results = [];
|
||||
for (c = i = 0, ref = brickInfo.count.col; (0 <= ref ? i < ref : i > ref); c = 0 <= ref ? ++i : --i) {
|
||||
results.push((function() {
|
||||
var j, ref1, results1;
|
||||
results1 = [];
|
||||
for (r = j = 0, ref1 = brickInfo.count.row; (0 <= ref1 ? j < ref1 : j > ref1); r = 0 <= ref1 ? ++j : --j) {
|
||||
brickX = (c * (brickInfo.width + brickInfo.padding)) + brickInfo.offset.left;
|
||||
brickY = (r * (brickInfo.height + brickInfo.padding)) + brickInfo.offset.top;
|
||||
newBrick = game.add.sprite(brickX, brickY, "brick");
|
||||
game.physics.enable(newBrick, Phaser.Physics.ARCADE);
|
||||
newBrick.body.immovable = true;
|
||||
newBrick.anchor.set(0.5);
|
||||
results1.push(bricks.add(newBrick));
|
||||
}
|
||||
return results1;
|
||||
})());
|
||||
}
|
||||
return results;
|
||||
};
|
||||
|
||||
ballHitBrick = function(ball, brick) {
|
||||
var killTween, target;
|
||||
target = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
killTween = game.add.tween(brick.scale);
|
||||
killTween.to(target = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}, 200, Phaser.Easing.Linear.None);
|
||||
killTween.onComplete.addOnce(function() {
|
||||
return brick.kill();
|
||||
}, this);
|
||||
killTween.start();
|
||||
score += 10;
|
||||
scoreText.setText("Points: " + score);
|
||||
if (score === brickInfo.count.row * brickInfo.count.col * 10) {
|
||||
alert("A winner is you!");
|
||||
location.reload();
|
||||
}
|
||||
return ball.animations.play("wobble");
|
||||
};
|
||||
|
||||
ballHitPaddle = function(ball, paddle) {
|
||||
ball.animations.play("wobble");
|
||||
return ball.body.velocity.x = -1 * 5 * (paddle.x - ball.x);
|
||||
};
|
||||
|
||||
preload = function() {
|
||||
// Set basic game properties
|
||||
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
game.scale.pageAlignHorizontally = true;
|
||||
game.scale.pageAlignVertically = true;
|
||||
game.stage.backgroundColor = "#eee";
|
||||
// Load texture images
|
||||
game.load.image("paddle", "img/paddle.png");
|
||||
game.load.image("brick", "img/brick.png");
|
||||
game.load.spritesheet("ball", "img/wobble.png", 20, 20);
|
||||
return game.load.spritesheet("button", "img/button.png", 120, 40);
|
||||
};
|
||||
|
||||
create = function() {
|
||||
// Initialize the physics engine
|
||||
game.physics.startSystem(Phaser.Physics.ARCADE);
|
||||
game.physics.arcade.checkCollision.down = false;
|
||||
// Create the ball sprite and set it"s properties
|
||||
ball = game.add.sprite(game.world.width * 0.5, game.world.height - 25, "ball");
|
||||
ball.animations.add("wobble", [0, 1, 0, 2, 0, 1, 0, 2, 0], 24);
|
||||
ball.anchor.set(0.5);
|
||||
game.physics.enable(ball, Phaser.Physics.ARCADE);
|
||||
ball.body.bounce.set(1);
|
||||
ball.body.collideWorldBounds = true;
|
||||
ball.checkWorldBounds = true;
|
||||
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
|
||||
// Create the paddle sprite and set it"s properties
|
||||
paddle = game.add.sprite(game.world.width * 0.5, game.world.height - 5, "paddle");
|
||||
paddle.anchor.set(0.5, 1);
|
||||
game.physics.enable(paddle, Phaser.Physics.ARCADE);
|
||||
paddle.body.immovable = true;
|
||||
// Brick creation
|
||||
initBricks();
|
||||
// Scorekeeping
|
||||
scoreText = game.add.text(5, 5, "Points: 0", textStyle);
|
||||
// Player lives
|
||||
livesText = game.add.text(game.world.width - 5, 5, "Lives: " + lives, textStyle);
|
||||
livesText.anchor.set(1, 0);
|
||||
lifeLostText = game.add.text(game.world.width * 0.5, game.world.height * 0.5, 'Life lost, click to continue', textStyle);
|
||||
lifeLostText.anchor.set(0.5);
|
||||
lifeLostText.visible = false;
|
||||
// Start button
|
||||
startButton = game.add.button(game.world.width * 0.5, game.world.height * 0.5, "button", startGame, this, 1, 0, 2);
|
||||
return startButton.anchor.set(0.5);
|
||||
};
|
||||
|
||||
update = function() {
|
||||
game.physics.arcade.collide(ball, paddle, ballHitPaddle);
|
||||
game.physics.arcade.collide(ball, bricks, ballHitBrick);
|
||||
if (playing) {
|
||||
return paddle.x = game.input.x || (game.world.width * 0.5);
|
||||
}
|
||||
};
|
||||
|
||||
functions = {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
};
|
||||
|
||||
game = new Phaser.Game(480, 320, Phaser.CANVAS, null, functions);
|
||||
|
||||
}).call(this);
|
||||
13
breakout_phaser.coffee/index.html
Normal file
13
breakout_phaser.coffee/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
|
||||
<style>* { padding: 0; margin: 0; }</style>
|
||||
<script src="js/phaser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Get the assets from here https://github.com/end3r/Gamedev-Phaser-Content-Kit/tree/gh-pages/demos/img -->
|
||||
<script src="js/breakout_phaser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user