Thunderfist

Members
  • Content Count

    56
  • Joined

  • Last visited

Everything posted by Thunderfist

  1. Thunderfist

    making collectibles in canvas game

    I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday. EDIT: I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner. I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map. Here's the code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, cash = new collectibles(), obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgPlayer = new Image(); imgMoney = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/temp.png"; imgPlayer.addEventListener("load", init, false); imgMoney.src = "img/coin.png"; imgMoney.addEventListener("load", init, false); function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); cash.update(); } function draw() { player1.draw(); cash.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 48; this.srcY = 1; this.width = 31; //how wide the sprite is in pixels this.height = 35; //how tall the sprite is in pixels this.drawX = 125; this.drawY = 50; this.moveX = 31; this.moveY = 35; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = .60; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY,//draw specific specific points on x and y coordinates //newMoveX = this.moveX, //newMoveY = this.moveY; obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; //newMoveY -= this.speed; //this.moveY -= 35; this.srcX = 48; //Facing North this.srcY = 72; } else if (this.isDownKey) { newDrawY += this.speed; //newMoveY += this.speed; //this.moveY += 35; this.srcX = 48; //Facing South this.srcY = 1; } else if (this.isRightKey) { newDrawX += this.speed; //newMoveX += this.speed; //this.moveX += 31; this.srcX = 48; //Facing East this.srcY = 36; } else if (this.isLeftKey) { newDrawX -= this.speed; //newMoveX -= this.speed; //this.moveX -= 31; this.srcX = 48; //Facing West this.srcY = 108; } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var tEdgeWidth = 512, tEdgeHeight = 10; var bEdgeWidth = 512, bEdgeHeight = 10; var rEdgeWidth = 1, rEdgeHeight = 512; var lEdgeWidth = 1, lEdgeHeight = 512; var bigFenceLeftSideWidth = 20, bigFenceLeftSideHeight = 304; var bigFenceRightSideWidth = 22, bigFenceRightSideHeight = 304; var bigFenceUpperLeftWidth = 160, bigFenceUpperLeftHeight = 30, bigFenceUpperRightWidth = 140, bigFenceUpperRightHeight = 30; var bigFenceLowerLeftWidth = 100, bigFenceLowerLeftHeight = 20, bigFenceLowerRightWidth = 195, bigFenceLowerRightHeight = 20; var smallFenceSideWidth = 4, smallFenceSideHeight = 80; var rockWidth = 34, rockHeight = 32; var smallInclineWidth = 89, smallInclineHeight = 42; var largeInclineRWidth = 153, largeInclineRHeight = 55; var largeInclineLWidth = 176, largeInclineLHeight = 58; var leftHoleWidth = 64, leftHoleHeight = 48; var rightHoleLongWidth = 113, rightHoleLongHeight = 48; var rightHoleTallWidth = 43, rightHoleTallHeight = 99; obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight), new Obstacle(10, 512, bEdgeWidth, bEdgeHeight), new Obstacle(499, 1, rEdgeWidth, rEdgeHeight), new Obstacle(14, 1, lEdgeWidth, lEdgeHeight), new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight), new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight), new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight), new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight), new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight), new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight), new Obstacle(90, 403, rockWidth, rockHeight), new Obstacle(184, 291, smallInclineWidth, smallInclineHeight), new Obstacle(15, 165, leftHoleWidth, leftHoleHeight), new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight), new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight), new Obstacle(97, 170, rockWidth, rockHeight), new Obstacle(73, 195, rockWidth, rockHeight), new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight), new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight), new Obstacle(120, 175, rockWidth, rockHeight), new Obstacle(215, 170, rockWidth, rockHeight), new Obstacle(233, 187, rockWidth, rockHeight), ]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function collectibles () { this.srcX = 0; this.srcY = 0; this.width = 20; //how wide the sprite is in pixels this.height = 20; //how tall the sprite is in pixels this.drawX = randomRange; this.drawY = randomRange; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); } collectibles.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); }; collectibles.prototype.draw = function () { ctxEntities.drawImage(imgMoney, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, edgeTop = 512, edgeBottom = 0, edgeRight = 512, edgeLeft = 0; return newBottomY > edgeBottom || newTopY < edgeTop || newRightX > edgeRight || newLeftX < edgeLeft; } What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.
  2. Thunderfist

    Collision not working

    So... I apparently didn't program the edges of my map to have collision data. Whoops. Anyways, I've got until the 18th of this month to finish this.
  3. Thunderfist

    Collision not working

    So, I've managed to make my character sprite move, but the collision doesn't work and the sprite can move out of bound even though I've defined the outOfBounds function. Is there anything I can do about this? And so you know, when this: if (!obstacleCollision) { this.drawX = newDrawX; this.drawY = newDrawY; } is changed to this: if (!obstacleCollision && !outOfBounds (this, newDrawX, newDrawY) { this.drawX = newDrawX; this.drawY = newDrawY; } The sprite is locked in place! I had to remove that part in order for the code to work.
  4. Thunderfist

    Character movement not working

    I noticed that something was keeping the movement from working. There was an && !outOfBounds(this, newDrawX, newDrawY) in the code, which somehow kept the game from making the sprite move.
  5. Thunderfist

    Character movement not working

    I managed to get a character sprite to appear on my project's testmap. The problem I'm having is that the movement code isn't working and I can't figure out why. There aren't any errors in the browser console, which makes this harder. Here's the game.js code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgPlayer = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/player.png"; imgPlayer.addEventListener("load", init, false); function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 0; this.width = 12; this.height = 21; this.drawX = 0; this.drawY = 0; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 12; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 36; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 24; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 512, treeLineBottom = 512, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas that could be used to fix the problems?
  6. Thunderfist

    Character movement not working

    I've tried to fix a few things, but the code still isn't working. And to make matters worse, certain lines of code that I commented out make the sprite disappear if I uncomment them.
  7. Thunderfist

    Character sprite not appearing

    I got the sprite to appear... but not where it belongs. It's appearing in the space below the map.
  8. Thunderfist

    Character sprite not appearing

    I've been working on an action RPG for quite a while now, and I finally got my map to appear. Now I'm having a hard time getting my character sprite to appear. I have no idea what I should do about this. Here's my code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); player1.src = "img/player.png"; function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 600; this.width = 35; this.height = 54; this.drawX = 400; this.drawY = 300; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 35; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 105; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 70; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 5, treeLineBottom = 570, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas for what can be done to make the sprite appear?
  9. Thunderfist

    Map not appearing

    Someone recommended that I try using a .png and the canvas element instead of trying to implement a .json.
  10. Thunderfist

    Map not appearing

    My game isn't loading the map I made using tiled. The file, testroom1.json, is called properly, but something in my game.js is keeping the game from loading the map itself. var RPG = RPG || {}; RPG.GameState = { init: function (currentLevel) { //Needed to keep track of the level this.currentLevel = currentLevel || currentLevel === 'testroom1'; //movement speed constants this.PLAYER_SPEED = 90; //no gravity in top down games this.game.physics.arcade.gravity.y = 0; //keyboard cursors for input this.cursors = this.game.input.keyboard.createCursorKeys(); }, create: function () { this.Game.onscreenControls = this.game.plugins.add(Phaser.Plugin.OnscreenControls); this.loadLevel(); }, update: function () { }, loadLevel: function () { //create the tilemap object this.map = this.add.tilemap(this.currentLevel); //Join the tile images to the .json data this.map.addTilesetImage('tileset', 'tilesheet'); //create tile layers this.backgroundLayer = this.map.createLayer('backgroundLayer'); //this.collisionLayer = this.map.createLayer('collisionLayer'); //set background to the back of screen this.game.world.sendToBack(this.backgroundLayer); //Collision Layer... if only I made it earlier //this.map.setCollisionBetween(1, 16, true, 'collisionLayer'); //resize the world to fit the layer //this.collisionLayer.resizeWorld(); }, gameOver: function () { this.game.state.start('Game', true, false, this.currentLevel); } }; I never made the collision layer. I plan on doing that AFTER getting the map to appear first. Does anyone have any advice on how to tackle this?
  11. Thunderfist

    Property 'width'

    It says undefined, and I just tried changing the next line and it still isn't working. Now the error is 'data.trim' is not a function. Any idea why this is happening?
  12. Thunderfist

    Property 'width'

    I can't figure this out. My game code keeps saying that it can't read the property 'width' of undefined. There's nothing my code declaring a property width. Most of the locations are different lines in the phaser.js, but two of them are in the game.js: game.js lines 25, and 32. Line 25 is this.loadLevel(); and line 32 is this.map = this.add.tilemap(this.currentLevel); Here's the code: /*global Phaser*/ var RPG = RPG || {}; RPG.GameState = { init: function (currentLevel) { //Needed to keep track of the level this.currentLevel = currentLevel || currentLevel === 'testroom1'; //movement speed constants this.PLAYER_SPEED = 150; //no gravity in top down games this.game.physics.arcade.gravity.y = 0; //keyboard cursors for input this.cursors = this.game.input.keyboard.createCursorKeys(); }, preload: function () { //this.map.loadTilesetImage('terrain'); }, create: function () { this.game.onscreenControls = this.game.plugins.add(Phaser.Plugin.OnscreenControls); this.loadLevel(); }, update: function () { }, loadLevel: function () { //create the tilemap object this.map = this.add.tilemap(this.currentLevel); //Join the tile images to the .json data this.map.addTilesetImage('terrains', 'terrain'); //create tile layers this.backgroundLayer = this.map.createLayer('backgroundLayer'); //this.collisionLayer = this.map.createLayer('collisionLayer'); //set background to the back of screen this.game.world.sendToBack(this.backgroundLayer); //Collision Layer... if only I made it earlier //this.map.setCollisionBetween(1, 16, true, 'collisionLayer'); //resize the world to fit the layer //this.collisionLayer.resizeWorld(); }, gameOver: function () { this.game.state.start('Game', true, false, this.currentLevel); } }; What do I do to fix this issue? I only have a month until my project is due!
  13. Thunderfist

    Property 'width'

    I found this in the console. Is this overkill? phaser.js:98872 Uncaught TypeError: Cannot read property 'width' of undefined at new Phaser.Tilemap (phaser.js:98872) at Phaser.GameObjectFactory.tilemap (phaser.js:48822) at Object.loadLevel (game.js:32) at Object.create (game.js:25) at Phaser.StateManager.loadComplete (phaser.js:29298) at Phaser.StateManager.preUpdate (phaser.js:29056) at Phaser.Game.updateLogic (phaser.js:36129) at Phaser.Game.update (phaser.js:36072) at Phaser.RequestAnimationFrame.updateRAF (phaser.js:64165) at _onLoop (phaser.js:64148) Phaser.Tilemap @ phaser.js:98872 tilemap @ phaser.js:48822 loadLevel @ game.js:32 create @ game.js:25 loadComplete @ phaser.js:29298 preUpdate @ phaser.js:29056 updateLogic @ phaser.js:36129 update @ phaser.js:36072 updateRAF @ phaser.js:64165 _onLoop @ phaser.js:64148 requestAnimationFrame (async) updateRAF @ phaser.js:64167 _onLoop @ phaser.js:64148 requestAnimationFrame (async) updateRAF @ phaser.js:64167 _onLoop @ phaser.js:64148 requestAnimationFrame (async) updateRAF @ phaser.js:64167 _onLoop @ phaser.js:64148 requestAnimationFrame (async) updateRAF @ phaser.js:64167 _onLoop @ phaser.js:64148 requestAnimationFrame (async) start @ phaser.js:64151 (anonymous) @ phaser.js:35784 execute @ phaser.js:30129 dispatch @ phaser.js:29934 _ready @ phaser.js:75063 _checkReady @ phaser.js:75049 _removePending @ phaser.js:75035 img.onload @ phaser.js:73201 load (async) addImageAsync @ phaser.js:73199 addMissingImage @ phaser.js:73242 _addImages @ phaser.js:74991 Phaser.Cache @ phaser.js:72932 boot @ phaser.js:35719 Phaser.Device._readyCheck @ phaser.js:62985
  14. Thunderfist

    Map not appearing

    Cannot read property 'loadTilesetImage' of undefined at Object.preload (game.js:20) All that function is doing is trying to load the map terrains from the preload.js. I'm worried that I won't finish this project before May, and I'm still stuck on this part!
  15. Thunderfist

    Map not appearing

    I think I found the big error! It's saying that the program can't read property width of undefined for this.loadLevel in my create function, and this.add.tilemap in the loadLevel function. What do I do?
  16. Thunderfist

    Map not appearing

    I just tried that, and now my browser's console says that the .csv file isn't found. How do I find it? UPDATE: I got the .csv file to be found. Now I'm getting an error about the onscreenControls.js that game.js is trying to use. It says 'cannot set property 'onscreenControls' of undefined. How do I deal with this?
  17. Thunderfist

    Map not appearing

    I just realized that loadLevel is only called upon in the create function. Should that be called on in another place too?
  18. Thunderfist

    I can't find the bugs in my code

    I started re-coding the .js files, re-using certain files. I found this in my console after comparing the code between my new main.js and the old one: Uncaught TypeError: RPG.getGameLandscapeDimensions is not a function EDIT: Just realized I put the main.js before my scaler.js file. my bad.
  19. Thunderfist

    I can't find the bugs in my code

    I have a problem: I'm making an RPG and it's not working. I just keep getting a green bar on a white screen. I have multiple .js files, and I can't figure out which file might be it.
  20. Thunderfist

    I can't find the bugs in my code

    I found that my enemyPrefab.js has a bug: According to my console, it says Cannot set property 'prototype' of undefined at enemyPrefab.js line 20. Is there a workaround for that? It's the only thing that's showing up in the console for bugs. EDIT I took a look at someone's tutorial and found what I did wrong. The code still isn't working right yet, but I'm getting there. I found this in the console: Phaser.StateManager - No state found with the key: game
  21. Thunderfist

    I can't find the bugs in my code

    I just checked the console, and it says GainNode.gain.value setting is deprecated and can't be used after last month. Is there some sort of work-around? UPDATE: All of the errors in the console are pointing at my phaser.js. does the Phaser library get updated?
  22. Thunderfist

    I can't find the bugs in my code

    Okay, I still can't find the bug... Maybe it's in my player.js? var RPG = RPG || {}; RPG.Player = function (state, x, y, data) { Phaser.Sprite.call(this, state.game, x, y, 'player'); this.state = state; this.game = state.game; this.data = data; this.anchor.setTo(0.5); //walking animation this.animations.add('walk', [0, 1, 0], 6, false); //enable physics this.game.physics.arcade.enable(this); }; RPG.Player.prototype = Object.create(Phaser.Sprite.prototype); RPG.Player.prototype.constructor = RPG.Player; RPG.Player.prototype.collectItem = function (item) { //two types of items, quest items and consumables if (item.data.isQuest) { this.data.items.push(item); //check quest completion this.checkQuestCompletion(item); } else { //consumable items //add properties this.data.health += item.data.health || item.data.health === 0; this.data.attack += item.data.attack || item.data.attack === 0; this.data.defense += item.data.defense || item.data.defense === 0; this.data.gold += item.data.gold || item.data.gold === 0; //refresh stats this.state.refreshStats(); } item.kill(); }; RPG.Player.prototype.checkQuestCompletion = function (item) { var i = 0; var len = this.data.quests.length; while (i < len) { if (this.data.quests[i].code === item.data.questCode) { this.data.quests[i].isCompleted = true; console.log(this.data.quests[i].name + ' has been completed'); break; } } }; I hope I can find the bugs soon... otherwise I can't make a simple Role-Playing Game.
  23. Thunderfist

    I can't find the bugs in my code

    I didn't think of that. I'll try that, and if none of them have a bug, I'll post code for another .js file
  24. Thunderfist

    I can't find the bugs in my code

    Here's my game.js var RPG = RPG || {}; RPG.GameState = { init: function (currentLevel) { //keep track of the current level this.currentLevel = currentLevel || currentLevel === 'testroom1'; //constants this.PLAYER_SPEED = 90; //no gravity in a top-down game this.game.physics.arcade.gravity.y = 0; //keyboard cursors this.cursors = this.game.input.keyboard.createCursorKeys(); }, create: function () { this.game.onscreenControls = this.game.plugins.add(Phaser.Plugin.OnscreenControls); this.loadLevel(); }, update: function () { //player can't walk through walls this.game.physics.arcade.collide(this.player, this.collisionLayer); //items collection this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this); //stop each time this.player.body.velocity.x = 0; this.player.body.velocity.y = 0; if (this.cursors.left.isDown || this.player.btnsPressed.left || this.player.btnsPressed.upleft || this.player.btnsPressed.downleft) { this.player.body.velocity.x = -this.PLAYER_SPEED; this.player.scale.setTo(1, 1); } if (this.cursors.right.isDown || this.player.btnsPressed.right || this.player.btnsPressed.upright || this.player.btnsPressed.downright) { this.player.body.velocity.x = this.PLAYER_SPEED; this.player.scale.setTo(-1, 1); } if (this.cursors.up.isDown || this.player.btnsPressed.up || this.player.btnsPressed.upright || this.player.btnsPressed.upleft) { this.player.body.velocity.y = -this.PLAYER_SPEED; } if (this.cursors.down.isDown || this.player.btnsPressed.down || this.player.btnsPressed.downright || this.player.btnsPressed.downleft) { this.player.body.velocity.y = this.PLAYER_SPEED; } //stop all movement if nothing is being pressed if (this.game.input.activePointer.isUp) { this.game.onscreenControls.stopMovement(); } //play walking animation' if (this.player.body.velocity.x !== 0 || this.player.body.velocity.y !== 0) { this.player.play('walk'); } else { this.player.animations.stop(); this.player.frame = 0; } }, loadLevel: function () { //create a tilemap object this.map = this.add.tilemap(this.currentLevel); //join the tile images to the json data this.map.addTilesetImage('terrains', 'tilesheet'); //create tile layers this.backgroundLayer = this.map.createLayer('backgroundLayer'); this.collisionLayer = this.map.createLayer('collisionLayer'); //send background to the back this.game.world.sendToBack(this.backgroundLayer); //collision layer should be collisionLayer this.map.setCollisionBetween(1, 16, true, 'collisionLayer'); //resize the world to fit the layer this.collisionLayer.resizeWorld(); //create player var playerData = { //list of items items: [], //player stats health: 30, attack: 10, defense: 10, gold: 0, //quest quests: [ { name: 'find the map in Schnyders room ', code: 'robschneider', isCompleted: false }, { name: 'aquire the Sword of Destiny', code: 'destiny-sword', isCompleted: false }, { name: 'aquire the Staff of Gods', code: 'godsstaff', isCompleted: false } ] }; this.player = new RPG.Player(this, 100, 100, playerData); //add player to the world this.add.existing(this.player); //group of items this.items = this.add.group(); this.loadItems(); //enemies this.enemies = this.add.group(); //this.loadEnemies(); //this.enemy = new RPG.Enemy(this, 200, 60, 'monster', {attack: 10, health: 20, defense: 5}); //this.enemies.add(this.enemy); //follow player with the camera this.game.camera.follow(this.player); this.initGUI(); }, gameOver: function () { this.game.state.start('Game', true, false, this.currentLevel); }, initGUI: function() { //onscreen controls setup this.game.onscreenControls.setup(this.player, { left: true, right: true, up: true, down: true, upleft: true, downleft: true, upright: true, downright: true, action: false }); this.showPlayerIcons(); }, collect: function(player, item) { this.player.collectItem(item); }, showPlayerIcons: function() { //gold icon this.goldIcon = this.add.sprite(10, 10, 'coin'); this.goldIcon.fixedToCamera = true; var style = {font: '14px Arial', fill: '#fff'}; this.goldLabel = this.add.text(30, 10, '0', style); this.goldLabel.fixedToCamera = true; //attack icon this.attackIcon = this.add.sprite(70, 10, 'sword'); this.attackIcon.fixedToCamera = true; var style = {font: '14px Arial', fill: '#fff'}; this.attackLabel = this.add.text(90, 10, '0', style); this.attackLabel.fixedToCamera = true; //defense icon this.defenseIcon = this.add.sprite(130, 10, 'shield'); this.defenseIcon.fixedToCamera = true; var style = {font: '14px Arial', fill: '#fff'}; this.defenseLabel = this.add.text(150, 10, '0', style); this.defenseLabel.fixedToCamera = true; this.refreshStats(); }, refreshStats: function() { this.goldLabel.text = this.player.data.gold; this.attackLabel.text = this.player.data.attack; this.defenseLabel.text = this.player.data.defense; }, findObjectsByType: function(targetType, tilemap, layer){ var result = []; tilemap.objects[layer].forEach(function (element) { if (element.properties.type === targetType) { element.y -= tilemap.tileHeight / 2; element.x += tilemap.tileHeight / 2; result.push(element); } }, this); return result; }, loadItems: function () { var elementsArr = this.findObjectsByType('item', this.map, 'objectsLayer'); var elementObj; elementsArr.forEach(function (element) { elementObj = new RPG.Item(this, element.x, element.y, element.properties.asset, element.properties); this.items.add(elementObj); }, this); } }; Thing is, I don't know if this is the one filled with bugs.
  25. Thunderfist

    HTML5 JS Quiz help

    It worked! but only on result pages 1 and 2. --EDIT-- I just made some minor adjustments. That fixed it! I got it working! Thanks for the help.