<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Phaser testing game mechanics</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #game{
height: 100%;
width: auto;
}
body{
margin: 0; padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//make canvas taller w 800 h 900
//* window.devicePixelRatio;
var canvas_width = window.innerWidth * window.devicePixelRatio;
var canvas_height = window.innerHeight * window.devicePixelRatio;
var game = new Phaser.Game( canvas_width, canvas_height, Phaser.AUTO, 'game', { preload: preload, create: create, update: update })
function preload() {
//allows the user to go full screen currently using .EXACT_FIT
//other option SHOW_ALL seems to work better;
//allows you to fit the screen in full size.
game.scale.setGameSize(canvas_width, canvas_height);
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.parentIsWindow = true;
//sets the canvas to the middle.
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();
//running into a height issue where the two sprites aren't meeting up.
//center game on screen
//load images
game.load.image('sky', 'assets/sky.jpg');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png',32, 48);
game.load.spritesheet('bad-guy', 'assets/baddie.png',32,32);
}
var platforms;
var player;
var score = 0;
var scoreText;
var enemy;
var cursors;
var stars;
//health indicator
var life = 100;
//sprite controls
var playerLeft;
var playerRight;
//gamepad support
var pad1;
var indicator;
function create() {
var canvas_height_max = 900;
var canvas_width_max = 1000;
var aspect_ratio = canvas_width / canvas_height;
if(aspect_ratio > 1){
scale_ratio = canvas_height / canvas_height_max;
} else {
scale_ratio = canvas_width / canvas_width_max;
}
game.input.gamepad.start();
pad1 = game.input.gamepad.pad1;
//normal screen should show all.
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
//go full if user clicks the canvas updated to a function
game.input.onDown.add(function(){
game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
if(game.scale.isFullScreen){
game.scale.stopFullScreen();
} else {
game.scale.startFullScreen(false);
}
})
game.physics.startSystem(Phaser.Physics.ARCADE);
//resize canvas when minimizing
game.add.sprite(0,0, 'sky');
//way to group objects together so they inherit properties.
platforms = game.add.group();
platforms.enableBody = true;
//creates ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
//scale to fit the width of the game (original sprite is 400x 32) allows us to create the ground to fit the entire screen.
ground.scale.setTo(4.8,2);
//stops you from faling away when you jump
ground.body.immovable = true;
//manually creates two ledges.
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
//player needs to be loaded in after the ground sprite or they will fall through
player = game.add.sprite(32, game.world.height - 150, 'dude');
//enables physics on player
game.physics.arcade.enable(player);
player.body.bounce.y = 0.1;
player.body.gravity.y = 400;
player.body.collideWorldBounds = true;
//player animation
player.animations.add('left', [0,1,2,3], 10, true);
player.animations.add('right', [5,6,7,8], 10, true);
//enemy and settings review more into heights.
enemy = game.add.sprite(500, game.world.height - 248, 'bad-guy');
game.physics.arcade.enable(enemy);
enemy.body.gravity.y = 500;
enemy.body.collideWorldBounds = true;
enemy.animations.add('left', [0,1,2,3], 10, true);
enemy.animations.add('right', [5,6,7,8], 10, true);
//initalise enemy movement
enemy.body.velocity.x = 150;
enemy.animations.play('right');
enemy.body.velocity.x = -150;
enemy.animations.play('left');
stars = game.add.group();
stars.enableBody = true;
for(var i = 0; i < 12; i++){
//create a start inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
star.body.gravity.y = 1000;
star.body.bounce.y = 0.1 + Math.random() * 0.21;
}
//score
scoreText = game.add.text(16, 16, 'score: 0', {fontSize: '32px', fill: '#000'});
//life guauge
lifeText = game.add.text(16,46,'Life: 100', {fontSize: '32px', fill: '#000'});
//our controls
cursors = game.input.keyboard.createCursorKeys();
}
//update here to make the player hit the platform.
function update() {
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(enemy, platforms);
game.physics.arcade.collide(stars, platforms);
//sets the canvas to the middle.
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();
//checks to see if the player overlaps with any stars
game.physics.arcade.overlap(player, stars, collectStar, null, this);
//checks to see if the player overlaps with the enemy
game.physics.arcade.overlap(enemy, player, touchEnemy, null, this);
//resets the players velocity
//enemy automatic movement
if(enemy.x < 400){
enemy.body.velocity.x = 350;
enemy.animations.play('right');
} else if(enemy.x > 760){
enemy.body.velocity.x = -350;
enemy.animations.play('left');
}
player.body.velocity.x = 0;
//controls
//check if game.input.gamepad.supported && game.input.gamepad.active && pad1.connected
if(game.input.gamepad.supported && game.input.gamepad.active && pad1.connected){
if(pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT)|| pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.10){
//move to the left
player.body.velocity.x = -150;
player.animations.play('left');
playerLeft = true;
playerRight = false;
}
else if(pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT)|| pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.10){
playerLeft = false;
playerRight = true;
player.body.velocity.x = 150;
player.animations.play('right');
}
else {//stand still
player.animations.stop();
if(playerLeft == true){
player.frame = 0;
} else {
player.frame = 3;
}
}
if(pad1.justPressed(Phaser.Gamepad.XBOX360_A) && player.body.touching.down && hitPlatform){
player.body.velocity.y = -350;
}
} else {
//keyboard controls
if(cursors.left.isDown){
//move to the left
player.body.velocity.x = -150;
player.animations.play('left');
playerLeft = true;
playerRight = false;
} else if(cursors.right.isDown){
playerLeft = false;
playerRight = true;
player.body.velocity.x = 150;
player.animations.play('right');
} else {
//stand still
player.animations.stop();
if(playerLeft == true){
player.frame = 0;
} else {
player.frame = 3;
}
}
if(cursors.up.isDown && player.body.touching.down){
player.body.velocity.y = -350;
}
}
//check if player has collected all stars and won
if(score == 120){
enemy.kill();
var style = {font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle"};
var text = game.add.text(game.world.centerX, game.world.centerY, "You Win!", style);
}
}
//collects stars and adds 10 points
function collectStar(player, star){
//removes star from screen
star.kill();
score += 10;
scoreText.text = 'Score: ' + score;
}
function touchEnemy(enemy, player){
//if you can jump onto of the enemy you kill him.
if(player.y > enemy.y){
enemy.body.velocity.x = 0;
enemy.y -= 500;
enemy.kill();
player.y -= 30;
} else{
//if you touch the enemy you get damaged
life -= 2;
}
lifeText.text = 'Life: ' + life;
//gameover
if(life == 0){
player.kill();
var text = game.add.text(game.world.centerX, game.world.centerY, "You Lose!", {font: "65px Arial", fill: "#ff0044", align: "center"});
}
}
</script>
<div id="game" style="width: canvas_width, height: canvas_height"></div>
</body>
</html>
// Code goes here
/* Styles go here */
* {
margin: 0;
padding: 0;
}
html body {
width: 100%;
height: 100%;
background-color:#6ac1f7;
margin: 0;
}
#game{
width: 800px;
}
canvas {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}