n00b_phaser Posted June 1, 2018 Share Posted June 1, 2018 Hi all, I need to implement some game logic that I've hit a wall with. My game: code below, is intended to be an infinite platform climber. Currently, the ledges stop at the length of the canvas, but I need it to loop creating ledges as the player jumps up. Can anyone please take a look at my code below and consult? Quote let score = 0 let scoreText let platforms let bitcoins let cursors let player let playerObj let enemy let getUsername // let enemies let overlay = document.getElementById("overlay"); let gameHeader = document.createElement("h1") let newUserButton = document.createElement("button"); let existingUserButton = document.createElement("button"); let findOverlay = document.getElementById("overlay") gameHeader.innerText = "RAT RACE" newUserButton.innerText = "New User" existingUserButton.innerText = "Existing User" function post(body) { const config = { method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(body) } fetch('http://localhost:3000/api/v1/players', config).then(r => r.json()).then(data => { playerObj = data }) } function scorePost(body) { const config = { method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(body) } fetch('http://localhost:3000/api/v1/scores', config).then(r => r.json()).then(data => console.log(data)) } newUserButton.addEventListener('click', function(e) { getUsername = prompt("Please enter your username:") post({ players: { username: getUsername } }) start(); }); existingUserButton.addEventListener('click', function(e) { prompt("Username:") start(); }) startScreen(); function startScreen() { overlay.appendChild(gameHeader) overlay.appendChild(newUserButton) overlay.appendChild(existingUserButton) overlay.style.display; } function start() { findOverlay.remove() const game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }) function preload() { game.load.image('city_background', 'assets/city_background.png') game.load.image('ledge', 'assets/ledge.png') game.load.image('ground', 'assets/ground.png') game.load.image('bitcoin', 'assets/bitcoin.png') game.load.spritesheet('enemy', 'assets/pigeon.png', 32, 32) game.load.spritesheet('woof', 'assets/woof.png', 32, 32) } function create() { // system create game.physics.startSystem(Phaser.Physics.ARCADE) game.add.sprite(0, 0, 'city_background') // platform create platforms = game.add.group() platforms.enableBody = true let ground = platforms.create(0, game.world.height - 64, 'ground') ground.scale.setTo(2, 2) ground.body.immovable = true // ledges create let x = 100 let y = 150 for (var i = 0; i < 5; i++) { let leftLedge = platforms.create(0, x, 'ledge') leftEnemy = game.add.sprite(0, x - 25, 'enemy') game.physics.arcade.enable(leftEnemy) leftEnemy.body.bounce.y = 0.5 leftEnemy.body.gravity.y = 800 leftEnemy.body.velocity.x = -50 leftEnemy.body.collideWorldBounds = true leftEnemy.animations.add('left', [10, 11, 12], 10, true) leftEnemy.animations.add('right', [3, 4, 5], 10, true) let rightLedge = platforms.create((game.width) - (300), y, 'ledge') rightEnemy = game.add.sprite(700, x - 50, 'enemy') game.physics.arcade.enable(rightEnemy) rightEnemy.body.bounce.y = 0.5 rightEnemy.body.gravity.y = 800 rightEnemy.body.velocity.x = -50 rightEnemy.body.collideWorldBounds = true rightEnemy.animations.add('left', [10, 11, 12], 10, true) rightEnemy.animations.add('right', [3, 4, 5], 10, true) leftLedge.body.immovable = true rightLedge.body.immovable = true } // let ledge = platforms.create(100, 450, 'ledge') // ledge.body.immovable = true // // ledge = platforms.create(-75, 150, 'ledge') // ledge.body.immovable = true // player create player = game.add.sprite(50, game.world.height - 250, 'woof') game.physics.arcade.enable(player) player.body.bounce.y = 0.5 player.body.gravity.y = 800 player.body.collideWorldBounds = true player.animations.add('left', [0, 1], 10, true) player.animations.add('right', [2, 3], 10, true) // enemies create enemy = game.add.sprite(750, game.world.height - 250, 'enemy') game.physics.arcade.enable(enemy) enemy.body.bounce.y = 0.5 enemy.body.gravity.y = 800 enemy.body.velocity.x = -50 enemy.body.collideWorldBounds = true enemy.animations.add('left', [10, 11, 12], 10, true) enemy.animations.add('right', [3, 4, 5], 10, true) // bitcoin create bitcoins = game.add.group() bitcoins.enableBody = true // randomize bitcoin for (var i = 0; i < 12; i++) { let bitcoin = bitcoins.create(i * 70, 0, 'bitcoin') bitcoin.body.gravity.y = 1000 bitcoin.body.bounce.y = 0.3 + Math.random() * 0.2 } // set score text scoreText = game.add.text(16, 16, '', { fontSize: '32px', fill: '#000' }) // initiate cursors cursors = game.input.keyboard.createCursorKeys() } function update() { // player update player.body.velocity.x = 0 game.physics.arcade.collide(player, platforms) game.physics.arcade.overlap(player, bitcoins, collectBitcoin, null, this) game.physics.arcade.overlap(player, enemy, collectPigeon, null, this) // enemy update // enemy.body.velocity.x = -50 game.physics.arcade.collide(enemy, platforms) // bitcoin update game.physics.arcade.collide(bitcoins, platforms) // game.physics.arcade.collide(enemies, platforms) // controls if (cursors.left.isDown) { player.body.velocity.x = -150 player.animations.play('left') } else if (cursors.right.isDown) { player.body.velocity.x = 150 player.animations.play('right') } else { player.animations.stop() } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -900 } if (score === 120) { alert('You collected all of the bitcoin!') endGame() } if ((Math.floor(enemy.body.x) < 390) && enemy.body.velocity.x === -50) { enemy.body.velocity.x = (50) // enemy.animations.play('right') console.log(Math.floor(enemy.body.x)) } if ((Math.floor(enemy.body.x) > 700) && enemy.body.velocity.x === 50) { enemy.body.velocity.x = (-50) // enemy.animations.play('right') console.log(Math.floor(enemy.body.x)) } //face based on velocity enemy.body.velocity.x > 0 ? enemy.animations.play('right') : enemy.animations.play('left') } // scoring function collectBitcoin(player, bitcoin) { bitcoin.kill() score += 10 scoreText.text = 'Score: ' + score } function collectPigeon(player, enemy) { player.kill() score -= 10 scoreText.text = 'Score: ' + score endGame() } function endGame() { scorePost({ scores: { points: score, player_id: playerObj.id } }) const div = document.createElement('div') const h2 = document.createElement('h2') div.id = "overlay" h2.innerText = "Game Over" const para = document.createElement('p') para.innerText = `Your score is ${score} Click to restart!` const canvas = document.querySelector('canvas') score = 0 canvas.remove() document.body.append(div) div.append(h2) div.append(para) div.removeAttribute('style') div.addEventListener('click', function() { while (div.hasChildNodes()) { div.removeChild(div.lastChild); } start(); }) } }; Link to comment Share on other sites More sharing options...
casey Posted June 1, 2018 Share Posted June 1, 2018 I don't have time to go through all that, but for a few bucks you can get the complete source code to one here: http://www.emanueleferonato.com/2017/08/22/learn-to-create-html5-cross-platform-games-using-phaser-ladderz-game-completely-commented-source-code-available/ Link to comment Share on other sites More sharing options...
Recommended Posts