Added Phaser.Graphics and fixed the Out of World Bounds call.

This commit is contained in:
Richard Davey
2013-09-09 17:01:59 +01:00
parent 30fc4099c6
commit 60f0e8967f
8 changed files with 669 additions and 123 deletions
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE HTML>
<html>
<head>
<title>phaser.js - a new beginning</title>
<?php
require('js.php');
?>
</head>
<body>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, render: render });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
}
var graphics;
function create() {
graphics = game.add.graphics(0, 0);
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);
// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(50, 50);
graphics.endFill();
// set a fill and line style again
graphics.lineStyle(10, 0xFF0000, 0.8);
graphics.beginFill(0xFF700B, 1);
// draw a second shape
graphics.moveTo(210,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,20);
graphics.lineTo(330,120);
graphics.lineTo(410,200);
graphics.lineTo(210,300);
graphics.endFill();
// draw a rectangel
graphics.lineStyle(2, 0x0000FF, 1);
graphics.drawRect(50, 250, 100, 100);
// draw a circle
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(470, 200,100);
graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);
game.add.tween(graphics).to({ x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);
}
function render() {
}
})();
</script>
</body>
</html>
+1
View File
@@ -64,6 +64,7 @@
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/gameobjects/Button.js"></script>
<script src="../src/gameobjects/Graphics.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/StageScaleMode.js"></script>
<script src="../src/system/Device.js"></script>
+6 -3
View File
@@ -12,7 +12,7 @@
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('alien', 'assets/sprites/space-baddie.png');
@@ -33,10 +33,10 @@
{
for (var x = 0; x < 10; x++)
{
var alien = aliens.create(x * 48, y * 50, 'alien');
var alien = aliens.create(200 + x * 48, y * 50, 'alien');
alien.name = 'alien' + x.toString() + y.toString();
alien.events.onOutOfBounds.add(alienOut, this);
alien.body.velocity.y = 50 + Math.random() * 150;
alien.body.velocity.y = 50 + Math.random() * 200;
}
}
@@ -44,7 +44,10 @@
function alienOut(alien) {
// Move the alien to the top of the screen again
alien.reset(alien.x, -32);
// And give it a new random velocity
alien.body.velocity.y = 50 + Math.random() * 200;
}