wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-07-02 17:00:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Lots of new examples :)

Browse Source 
Lots of new examples, the wip/examples folder can be destoryed I think
This commit is contained in:
Webeled
2013-09-30 17:30:45 +01:00
parent 4b177e0a9b
commit bdc8edea9d
15 changed files with 807 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/display/fullscreen.php
+55
View File
@@ -0,0 +1,55 @@
<?php
$title = "Go fullscreen";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update,render:render});
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
}
function create() {
var sprite = game.add.sprite(0, 0, 'atari1');
game.stage.backgroundColor = '#e3ed49';
// // Testing iOS7 lack of fullscreen. Damnit.
// document.documentElement['style'].minHeight = '2000px';
// window.scrollTo(0, document.body.scrollHeight);
game.input.onDown.add(gofull, this);
}
function gofull() {
game.stage.scale.startFullScreen();
}
function update() {
if (document.getElementsByTagName('body')[0].scrollTop > 1000)
{
game.stage.backgroundColor = '#87ff55';
window.scrollTo(0, 0);
}
}
function render () {
game.debug.renderText('Tap to go fullscreen',15,150);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/display/linkedList.php
+65
View File
@@ -0,0 +1,65 @@
<?php
$title = "Using LinkedLists";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create });
function preload() {
game.load.image('alien', 'assets/sprites/space-baddie.png');
game.load.image('ship', 'assets/sprites/shmup-ship.png');
}
var a;
var b;
var c;
var d;
var e;
var f;
var list;
function create() {
a = game.add.sprite(100, 100, 'ship');
a.name = 's1';
b = game.add.sprite(130, 100, 'ship');
b.name = 's2';
c = game.add.sprite(160, 100, 'ship');
c.name = 's3';
d = game.add.sprite(190, 100, 'alien');
d.name = 'a1';
e = game.add.sprite(220, 100, 'alien');
e.name = 'a2';
f = game.add.sprite(250, 100, 'alien');
f.name = 'a3';
list = new Phaser.LinkedList();
list.add(a.input);
list.add(b.input);
list.add(c.input);
list.add(d.input);
list.add(e.input);
list.add(f.input);
list.dump();
// list.remove(d.input);
// list.dump();
}
})();
</script>
<?php
require('../foot.php');
?>
examples/groups/sub groups and group length.php
+77
View File
@@ -0,0 +1,77 @@
<?php
$title = "Group length and sub groups";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
// Groups for storing friends and enemies, may use for collision later.
var friendAndFoe,
enemies;
// Groups for teaming up stuff.
var normalBaddies,
purpleBaddies;
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
game.load.image('purple-baddie', 'assets/sprites/space-baddie-purple.png');
}
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
normalBaddies = game.add.group();
purpleBaddies = game.add.group();
// Add both teams to enemies group, using the Pixi container otherwise it's impossible
enemies.add(normalBaddies._container);
enemies.add(purpleBaddies._container);
// Create a ufo as a friend sprite.
friendAndFoe.create(200, 240, 'ufo');
// Create some enemies.
for (var i = 0; i < 16; i++) {
createBaddie();
}
// Tap to create new baddie sprites.
game.input.onTap.add(createBaddie, this);
}
function createBaddie() {
var baddie;
// Of course, the baddies created will belong to their respective groups
if (Math.random() > 0.5) {
baddie = purpleBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
'purple-baddie');
}
else {
baddie = normalBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
'baddie');
}
}
function render() {
game.debug.renderStyle = '#fff';
game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
game.debug.renderText('enemies: ' + enemies.length + ' (actually ' + enemies.length + ' groups)', 16, 48);
game.debug.renderText('normal baddies: ' + normalBaddies.length, 16, 60);
game.debug.renderText('purple baddies: ' + purpleBaddies.length, 16, 72);
game.debug.renderText('friends: ' + friendAndFoe.length, 16, 96);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/groups/swap children inside a group.php
+52
View File
@@ -0,0 +1,52 @@
<?php
$title = "Swap children inside a group";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
}
var atari1;
var atari2;
function create() {
// Items are rendered in the depth order in which they are added to the Group
atari1 = game.add.sprite(100, 100, 'atari1');
atari2 = game.add.sprite(250, 90, 'atari2');
game.input.onTap.add(swapSprites, this);
}
function swapSprites() {
// The 2 Sprites are in the global world Group, but this will work for any Group:
game.world.group.swap(atari1, atari2);
}
function render () {
game.debug.renderText('Tap screen to swap the children and therefore swap their indexes.', 10, 280);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/input/drag.php
+1 -1
View File
@@ -1,5 +1,5 @@
<?php
$title = "Test Title";
$title = "How to drag a sprite";
require('../head.php');
?>
examples/input/drop limitation.php
+63
View File
@@ -0,0 +1,63 @@
<?php
$title = "Using a drop event to control the drag and drop";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
// Add some items to left side, and set a onDragStop listener
// to limit its location when dropped.
var item;
for (var i = 0; i < 6; i++) {
// Directly create sprites on the left group.
item = game.add.sprite(90, 90 * i, 'item', i);
// Enable input detection, then it's possible be dragged.
item.input.start(0,true);
// Make this item draggable.
item.input.enableDrag();
// Then we make it snap to left and right side,
// also we make it only snap when released.
item.input.enableSnap(90, 90, false, true);
// Limit drop location to only the 2 columns.
item.events.onDragStop.add(fixLocation);
}
}
function render() {
game.debug.renderText('Group Left.', 100, 560);
game.debug.renderText('Group Right.', 280, 560);
}
function fixLocation(item) {
// Move the items when it is already dropped.
if (item.x < 90) {
item.x = 90;
}
else if (item.x > 180 && item.x < 270) {
item.x = 180;
}
else if (item.x > 360) {
item.x = 270;
}
}
})();
</script>
<?php
require('../foot.php');
?>
examples/input/game scale.php
+76
View File
@@ -0,0 +1,76 @@
<?php
$title = "Scale the game and explore it using the keyboard";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render});
function preload() {
// This sets a limit on the up-scale
game.stage.scale.maxWidth = 800;
game.stage.scale.maxHeight = 600;
// Then we tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
game.load.image('melon', 'assets/sprites/melon.png');
}
function create() {
//We increase the size of our game world
game.world.setSize(2000, 2000);
for (var i = 0; i < 1000; i++)
{
//And spread some sprites inside it
game.add.sprite(game.world.randomX, game.world.randomY, 'melon');
}
}
function update() {
//This allows us to move the game camera using the keyboard
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
game.camera.x -= 4;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
game.camera.x += 4;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
game.camera.y -= 4;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
game.camera.y += 4;
}
}
function render() {
game.debug.renderInputInfo(16, 16);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/input/keyboard.php
+1 -1
View File
@@ -44,7 +44,7 @@
game.add.sprite(900, 170, 'cloud2')
.scrollFactor.setTo(0.7, 0.3);
// Create a ufo spirte as player.
// Create a ufo sprite as player.
ufo = game.add.sprite(320, 240, 'ufo');
ufo.anchor.setTo(0.5, 0.5);
examples/input/motion lock - horizontal.php
+54
View File
@@ -0,0 +1,54 @@
<?php
$title = "Enable horizontal drag bounds";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
// Using Phasers asset loader we load up a PNG from the assets folder
game.load.image('sprite', 'assets/sprites/parsec.png');
}
var sprite;
function create() {
game.stage.backgroundColor = 'rgb(85,85,85)';
sprite = game.add.sprite(200, 400, 'sprite');
// Enable Input detection. Sprites have this disabled by default,
// so you have to start it if you want to interact with them.
sprite.input.start(0,true);
// This allows you to drag the sprite. The parameter controls if you drag from the position you touched it (false)
// or if it will snap to the center (true)
sprite.input.enableDrag();
// This will lock the sprite so it can only be dragged horizontally, not vertically
sprite.input.allowVerticalDrag = false;
}
function render() {
game.debug.renderInputInfo(32, 32);
game.debug.renderSpriteInputInfo(sprite, 300, 32);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/input/motion lock - vertical.php
+54
View File
@@ -0,0 +1,54 @@
<?php
$title = "Enable vertical drag bounds";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
// Using Phasers asset loader we load up a PNG from the assets folder
game.load.image('sprite', 'assets/sprites/darkwing_crazy.png');
}
var sprite;
function create() {
game.stage.backgroundColor = 'rgb(85,85,85)';
sprite = game.add.sprite(200, 200, 'sprite');
// Enable Input detection. Sprites have this disabled by default,
// so you have to start it if you want to interact with them.
sprite.input.start(0,true);
// This allows you to drag the sprite. The parameter controls if you drag from the position you touched it (false)
// or if it will snap to the center (true)
sprite.input.enableDrag();
// This will lock the sprite so it can only be dragged vertically, not horizontally
sprite.input.allowHorizontalDrag = false;
}
function render() {
game.debug.renderInputInfo(32, 32);
game.debug.renderSpriteInputInfo(sprite, 300, 32);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/input/multi touch.php
+1 -9
View File
@@ -7,13 +7,8 @@
(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.CANVAS, '', {create: create, render: render });
function preload() {
// game.load.image('disk', 'assets/sprites/ra_dont_crack_under_pressure.png');
}
function create() {
@@ -21,9 +16,6 @@
}
function update() {
}
function render() {
game.debug.renderPointer(game.input.mousePointer);
examples/input/override browser keyboard controls.php
+127
View File
@@ -0,0 +1,127 @@
<?php
$title = "Overriding the browser's default keyboard behaviour";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render });
var ufo,
leftBtn,
rightBtn;
var speed=4;
function preload() {
game.world.setSize(1280, 600);
game.load.image('ground', 'assets/tests/ground-2x.png');
game.load.image('river', 'assets/tests/river-2x.png');
game.load.image('sky', 'assets/tests/sky-2x.png');
game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
game.load.spritesheet('button', 'assets/buttons/arrow-button.png', 112, 95);
game.load.image('spacebar', 'assets/buttons/spacebar.png');
game.load.image('ufo', 'assets/sprites/ufo.png');
}
function create() {
// background images
game.add.sprite(0, 0, 'sky')
.scrollFactor.setTo(0, 0);
game.add.sprite(0, 360, 'ground')
.scrollFactor.setTo(0.5, 0.5);
game.add.sprite(0, 400, 'river')
.scrollFactor.setTo(1.3, 1.3);
game.add.sprite(200, 120, 'cloud0')
.scrollFactor.setTo(0.3, 0.3);
game.add.sprite(-60, 120, 'cloud1')
.scrollFactor.setTo(0.5, 0.3);
game.add.sprite(900, 170, 'cloud2')
.scrollFactor.setTo(0.7, 0.3);
// Create a ufo sprite as a player.
ufo = game.add.sprite(320, 240, 'ufo');
ufo.anchor.setTo(0.5, 0.5);
// Make the camera follow the ufo.
game.camera.follow(ufo);
// Add 2 sprite to display hold direction.
leftBtn = game.add.sprite(160 - 112, 200, 'button', 0);
leftBtn.scrollFactor.setTo(0, 0);
leftBtn.alpha = 0;
rightBtn = game.add.sprite(640 - 112, 200, 'button', 1);
rightBtn.alpha = 0;
rightBtn.scrollFactor.setTo(0, 0);
// Add a sprite to display spacebar press.
spaceBtn = game.add.sprite(400 - 112, 100, 'spacebar');
spaceBtn.transform.scrollFactor.setTo(0, 0);
spaceBtn.alpha = 0;
// Prevent directions and space key events bubbling up to browser,
// since these keys will make web page scroll which is not
// expected.
game.input.keyboard.addKeyCapture([
Phaser.Keyboard.LEFT,
Phaser.Keyboard.RIGHT,
Phaser.Keyboard.UP,
Phaser.Keyboard.DOWN,
Phaser.Keyboard.SPACEBAR
]);
}
function update() {
// Check key states every frame.
// Move ONLY one of the left and right key is hold.
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) &&
!game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
ufo.x -= speed;
ufo.rotation = -15;
leftBtn.alpha = 0.6;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) &&
!game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
ufo.x += speed;
ufo.rotation = 15;
rightBtn.alpha = 0.6;
}
else {
ufo.rotation = 0;
leftBtn.alpha = rightBtn.alpha = 0;
}
// 50 as a second parameter is a good choice if you are running 60FPS.
if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR, 50)) {
console.log('space bar pressed');
spaceBtn.alpha = 1;
}
if (spaceBtn.alpha > 0) {
spaceBtn.alpha -= 0.03;
}
}
function render() {
game.debug.renderText('Hold left/right to move the ufo.', 16, 32);
game.debug.renderText('Direction and Space key events are stopped by Phaser now,', 16, 48);
game.debug.renderText('so they will no longer be sent to the browser', 16, 64);
game.debug.renderText('Now you can press UP/DOWN or SPACE to see what happened.', 16, 80);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/misc/net.php
+39
View File
@@ -0,0 +1,39 @@
<?php
$title = "Motion";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { render:render});
function render () {
game.debug.renderText('Host Name:'+game.net.getHostName(),game.world.centerX-300,20);
game.debug.renderText('Host Name contains 192:'+game.net.checkDomainName('192'),game.world.centerX-300,40);
game.debug.renderText('Host Name contains google.com:'+game.net.checkDomainName('google.com'),game.world.centerX-300,60);
// Add some values to the query string
game.debug.renderText('Query string with new values : '+game.net.updateQueryString('atari', '520'),game.world.centerX-400,80);
game.debug.renderText('Query string with new values : '+game.net.updateQueryString('amiga', '1200'),game.world.centerX-400,100);
game.debug.renderText('Query string with new values : '+game.net.updateQueryString('commodore', '64'),game.world.centerX-400,120);
console.log('Query String: '+game.net.getQueryString(),game.world.centerX-300,140);
console.log('Query String Param: '+game.net.getQueryString('atari'),game.world.centerX-300,160);
}
})();
</script>
<a href="<?php echo $_SERVER['PHP_SELF'] ?>?atari=1&amiga=2&commodore=3">Reload with query string</a>
<?php
require('../foot.php');
?>
examples/physics/Motion.php
+80
View File
@@ -0,0 +1,80 @@
<?php
$title = "Motion";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update});
function preload() {
game.load.image('car', 'assets/sprites/car90.png');
game.load.image('ship', 'assets/sprites/xenon2_ship.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
var car;
var ship;
var total;
var aliens;
function create() {
aliens = [];
for (var i = 0; i < 50; i++)
{
var s = game.add.sprite(game.world.randomX, game.world.randomY, 'baddie');
s.name = 'alien' + s;
s.body.collideWorldBounds = true;
s.body.bounce.setTo(1, 1);
s.body.velocity.setTo(10 + Math.random() * 40, 10 + Math.random() * 40);
aliens.push(s);
}
car = game.add.sprite(400, 300, 'car');
car.anchor.setTo(0.5, 0.5);
car.body.collideWorldBounds = true;
car.body.bounce.setTo(0.5, 0.5);
car.body.allowRotation = true;
ship = game.add.sprite(400, 400, 'ship');
ship.body.collideWorldBounds = true;
ship.body.bounce.setTo(0.5, 0.5);
}
function update() {
car.body.velocity.x = 0;
car.body.velocity.y = 0;
car.body.angularVelocity = 0;
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
car.body.angularVelocity = -200;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
car.body.angularVelocity = 200;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
car.body.velocity.copyFrom(game.physics.velocityFromAngle(car.angle, 300));
}
game.physics.collide(aliens);
}
})();
</script>
<?php
require('../foot.php');
?>
examples/physics/sprite bounds.php
+62
View File
@@ -0,0 +1,62 @@
<?php
$title = "Motion";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update,render:render});
function preload() {
game.load.image('fuji', 'assets/pics/atari_fujilogo.png');
}
var fuji,
b;
function create() {
game.stage.backgroundColor = 'rgb(0,0,100)';
fuji = game.add.sprite(game.world.centerX, game.world.centerY, 'fuji');
fuji.anchor.setTo(0, 0.5);
fuji.angle = 34;
b = new Phaser.Rectangle(fuji.center.x, fuji.center.y, fuji.width, fuji.height);
//Remember that the sprite is rotating around its anchor
game.add.tween(fuji).to({ angle: 360 }, 20000, Phaser.Easing.Linear.None, true, 0, true);
}
function update() {
if (game.input.activePointer.justPressed()){
fuji.centerOn(game.input.x, game.input.y);
}
b.x = fuji.center.x - fuji.halfWidth;
b.y = fuji.center.y - fuji.halfHeight;
}
function render() {
//Phaser.DebugUtils.renderSpriteWorldViewBounds(fuji);
//Phaser.DebugUtils.renderSpriteBounds(fuji);
game.debug.renderSpriteCorners(fuji);
//Phaser.DebugUtils.renderSpriteWorldView(fuji, 32, 32);
game.debug.renderRectangle(b, 'rgba(0,20,91,1)');
}
})();
</script>
<?php
require('../foot.php');
?>