mirror of
https://github.com/ysoftdevs/pf2016.git
synced 2026-01-15 16:23:54 +01:00
291 lines
9.1 KiB
HTML
291 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>PF 2016</title>
|
|
<meta name="author" content="Juraj Michálek" />
|
|
<meta name="description" content="PF 2016 greeting - puzzle game - set direction for ball" />
|
|
|
|
<script src="js/kiwi-js-v1.4.0/kiwi.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
|
|
var levelSelectorState = new Kiwi.State('levelSelector');
|
|
|
|
levelSelectorState.create = function() {
|
|
this.myButton = new Kiwi.HUD.Widget.Button( this.game, 'Start', 260, 100 );
|
|
this.game.huds.defaultHUD.addWidget( this.myButton );
|
|
|
|
this.myButton.style.color = 'white';
|
|
this.myButton.style.fontSize = '2em';
|
|
this.myButton.style.fontWeight = 'bold';
|
|
this.myButton.style.padding = '0.5em 1em';
|
|
this.myButton.style.backgroundColor = 'black';
|
|
this.myButton.style.cursor = 'pointer';
|
|
|
|
|
|
this.myButton.input.onUp.add( this.buttonReleased, this );
|
|
|
|
}
|
|
|
|
levelSelectorState.buttonReleased = function() {
|
|
this.game.huds.defaultHUD.removeWidget( this.myButton );
|
|
game.states.switchState('state');
|
|
}
|
|
|
|
var state = new Kiwi.State('state');
|
|
|
|
state.preload = function() {
|
|
this.addJSON('tilemap', 'tilemap.json');
|
|
this.addSpriteSheet('base', './data/images/gfx64/tiles.png', 64, 64);
|
|
this.addSpriteSheet('character', './data/images/gfx64/marble_black.png', 80, 80 );
|
|
this.addSpriteSheet('oneWay', './data/images/gfx64/st_oneway.png', 64, 64 );
|
|
this.addSpriteSheet('finishMarker', './data/images/gfx64/finish_marker.png', 64, 64 );
|
|
}
|
|
|
|
state.create = function() {
|
|
|
|
this.tilemap = new Kiwi.GameObjects.Tilemap.TileMap(this, 'tilemap', this.textures.base);
|
|
|
|
this.character = new Kiwi.GameObjects.Sprite(this, this.textures.character, 2*64 - 8, 64 - 8);
|
|
// Hitbox is detecting collision in future step.
|
|
// This is little bit counter intuitive.
|
|
// You have to make collision box smaller at least one step.
|
|
this.character.box.hitbox = new Kiwi.Geom.Rectangle( 12, 12, 58, 58 );
|
|
this.character.physics = this.character.components.add( new Kiwi.Components.ArcadePhysics( this.character, this.character.box ) );
|
|
this.character.physics.acceleration.y = 0;
|
|
this.character.physics.maxVelocity.y = 140;
|
|
|
|
this.character.animation.add('walking', [ 0, 1 ], 0.2, true);
|
|
this.character.animation.add('idle', [ 2, 3, 4, 5, 4, 3 ], 0.2, true);
|
|
|
|
this.redirector = new Kiwi.GameObjects.Sprite(this, this.textures.oneWay, 9*64, 2*64);
|
|
this.redirector.input.enableDrag(true);
|
|
this.redirector.input.onDragStopped.add( this.stoppedDrag, this );
|
|
|
|
this.redirector2 = new Kiwi.GameObjects.Sprite(this, this.textures.oneWay, 9*64, 3*64);
|
|
this.redirector2.cellIndex = 6;
|
|
this.redirector2.input.enableDrag(true);
|
|
this.redirector2.input.onDragStopped.add( this.stoppedDrag2, this );
|
|
|
|
this.finishMarker = new Kiwi.GameObjects.Sprite(this, this.textures.finishMarker, 6*64, 4*64);
|
|
this.finishMarker.animation.add('idle', [ 0, 1, 2, 3, 2, 1 ], 0.3, true);
|
|
this.finishMarker.animation.play('idle', true);
|
|
|
|
// Ground layer
|
|
this.addChild(this.tilemap.layers[0]);
|
|
|
|
this.addChild(this.character);
|
|
|
|
// Walls layer
|
|
this.addChild(this.tilemap.layers[1]);
|
|
this.addChild(this.finishMarker);
|
|
|
|
this.addChild(this.redirector);
|
|
this.addChild(this.redirector2);
|
|
|
|
// Sky layer
|
|
this.addChild(this.tilemap.layers[2]);
|
|
|
|
|
|
for(var i = 21; i < this.tilemap.tileTypes.length; i++) {
|
|
this.tilemap.tileTypes[i].allowCollisions = Kiwi.Components.ArcadePhysics.ANY;
|
|
}
|
|
|
|
this.keyboard = this.game.input.keyboard;
|
|
|
|
this.leftKey = this.keyboard.addKey(Kiwi.Input.Keycodes.LEFT, true);
|
|
this.rightKey = this.keyboard.addKey(Kiwi.Input.Keycodes.RIGHT, true);
|
|
//Prevent the down key from scrolling the page
|
|
this.keyboard.addKey(Kiwi.Input.Keycodes.DOWN, true);
|
|
|
|
this.keyboard.onKeyDownOnce.add(this.keyDownOnce, this);
|
|
this.keyboard.onKeyUp.add(this.keyUp, this);
|
|
|
|
this.stageState = 'init';
|
|
this.myButton = new Kiwi.HUD.Widget.Button( this.game, 'Start', 260, 50 );
|
|
this.game.huds.defaultHUD.addWidget( this.myButton );
|
|
|
|
this.myButton.style.color = 'white';
|
|
this.myButton.style.fontSize = '2em';
|
|
this.myButton.style.fontWeight = 'bold';
|
|
this.myButton.style.padding = '0.5em 1em';
|
|
this.myButton.style.backgroundColor = 'black';
|
|
this.myButton.style.cursor = 'pointer';
|
|
|
|
this.myButton.input.onDown.add( this.buttonPressed, this );
|
|
this.myButton.input.onUp.add( this.buttonReleased, this );
|
|
|
|
// this.myButton.input.onOver.add( this.buttonOver, this );
|
|
// this.myButton.input.onOut.add( this.buttonOut, this );
|
|
}
|
|
|
|
state.velocityX = 64;
|
|
state.velocityY = 64;
|
|
|
|
state.buttonPressed = function() {
|
|
|
|
}
|
|
|
|
state.buttonReleased = function() {
|
|
if (this.stageState == 'init') {
|
|
this.myButton.text = '...';
|
|
this.activateScene();
|
|
} else if (this.stageState == 'stop') {
|
|
this.resetCharacter();
|
|
this.myButton.text = 'Start'
|
|
this.stageState = 'init';
|
|
} else if (this.stageState == 'complete') {
|
|
this.game.huds.defaultHUD.removeWidget( this.myButton );
|
|
game.states.switchState('levelSelector');
|
|
}
|
|
|
|
}
|
|
|
|
state.resetCharacter = function () {
|
|
this.character.physics.velocity.x = 0;
|
|
this.character.physics.velocity.y = 0;
|
|
this.character.x = 2*64 - 8;
|
|
this.character.y = 64 - 8;
|
|
}
|
|
|
|
state.stoppedDrag = function() {
|
|
if (this.redirector.x % 64 > 32) {
|
|
this.redirector.x += 64;
|
|
}
|
|
if (this.redirector.y % 64 > 32) {
|
|
this.redirector.y += 64;
|
|
}
|
|
this.redirector.x = this.redirector.x - this.redirector.x % 64;
|
|
this.redirector.y = this.redirector.y - this.redirector.y % 64;
|
|
}
|
|
|
|
state.stoppedDrag2 = function() {
|
|
if (this.redirector2.x % 64 > 32) {
|
|
this.redirector2.x += 64;
|
|
}
|
|
if (this.redirector2.y % 64 > 32) {
|
|
this.redirector2.y += 64;
|
|
}
|
|
this.redirector2.x = this.redirector2.x - this.redirector2.x % 64;
|
|
this.redirector2.y = this.redirector2.y - this.redirector2.y % 64;
|
|
}
|
|
|
|
state.activateScene = function () {
|
|
this.character.physics.velocity.y = this.velocityY;
|
|
this.stageState = 'running';
|
|
}
|
|
|
|
state.update = function () {
|
|
//Update all the gameobjects
|
|
Kiwi.State.prototype.update.call(this);
|
|
|
|
//Update physics
|
|
this.checkCollision();
|
|
|
|
this.updateCharacterMovement();
|
|
this.updateCharacterAnimation();
|
|
|
|
// this.resetCharacter();
|
|
}
|
|
|
|
state.updateCharacterAnimation = function () {
|
|
|
|
if(( this.character.physics.velocity.y != 0 ) || (this.character.physics.velocity.x != 0)) {
|
|
this.character.animation.play('walking', false);
|
|
} else {
|
|
this.character.animation.play('idle', false);
|
|
}
|
|
}
|
|
|
|
//Resolve collisions between the character and the first layer.
|
|
state.checkCollision = function () {
|
|
this.tilemap.layers[1].physics.overlapsTiles( this.character, true );
|
|
|
|
|
|
if ((this.character.physics.velocity.x == 0) && (this.character.physics.velocity.y == 0)) {
|
|
if (this.stageState == 'running') {
|
|
this.stageState = 'stop';
|
|
this.myButton.text = 'Restart'
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Make collision detection only when ball is fully on the same tile
|
|
var positionX = Math.round(this.character.x) + 8;
|
|
var positionY = Math.round(this.character.y) + 8;
|
|
if ((Math.round(positionX) % 64 != 0) || (Math.round(positionY)% 64 != 0)) {
|
|
return;
|
|
}
|
|
|
|
if (((Math.round(positionX/64) == Math.round(this.redirector.x/64) )) && (Math.round(positionY/64) == Math.round(this.redirector.y/64))) {
|
|
this.character.physics.velocity.x = this.velocityX;
|
|
this.character.physics.velocity.y = 0;
|
|
this.character.y = Math.round(this.character.y);
|
|
this.character.x = Math.round(this.character.x);
|
|
} else if (((Math.round(positionX/64) == Math.round(this.redirector2.x/64) )) && (Math.round(positionY/64) == Math.round(this.redirector2.y/64))) {
|
|
this.character.physics.velocity.x = 0;
|
|
this.character.physics.velocity.y = this.velocityY;
|
|
this.character.y = Math.round(this.character.y);
|
|
this.character.x = Math.round(this.character.x);
|
|
}
|
|
|
|
if (((Math.round(positionX/64) == Math.round(this.finishMarker.x/64) )) && (Math.round(positionY/64) == Math.round(this.finishMarker.y/64))) {
|
|
this.stageState = 'complete';
|
|
this.myButton.text = 'Next level'
|
|
this.character.physics.velocity.x = 0;
|
|
this.character.physics.velocity.y = 0;
|
|
}
|
|
|
|
}
|
|
|
|
state.updateCharacterMovement = function () {
|
|
|
|
//Move the player/character
|
|
if ( this.leftPressed ) {
|
|
this.character.scaleX = -1;
|
|
this.character.physics.velocity.x = -this.velocityX;
|
|
|
|
} else if ( this.rightPressed ) {
|
|
this.character.scaleX = 1;
|
|
this.character.physics.velocity.x = this.velocityY;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//When the key is pressed
|
|
state.keyDownOnce = function(keyCode, key) {
|
|
if( keyCode === this.rightKey.keyCode ){
|
|
this.rightPressed = true;
|
|
}
|
|
|
|
if( keyCode === this.leftKey.keyCode ){
|
|
this.leftPressed = true;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//When the key is released
|
|
state.keyUp = function(keyCode, key) {
|
|
|
|
if( keyCode === this.rightKey.keyCode ){
|
|
this.rightPressed = false;
|
|
}
|
|
|
|
if( keyCode === this.leftKey.keyCode ){
|
|
this.leftPressed = false;
|
|
}
|
|
|
|
}
|
|
|
|
var game = new Kiwi.Game(null, 'PF 2016', levelSelectorState);
|
|
game.states.addState(state);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |