OhNoItsATornahdo

Members
  • Content Count

    16
  • Joined

  • Last visited

About OhNoItsATornahdo

  • Rank
    Member

Profile Information

  • Gender
    Male

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. What I'm trying to accomplish: First, an image: There is a textbox underneath the 'code' tab - what I want is for all the canvas-related code written inside the HTML to be displayed on the canvas on the right. My problem: I'm struggling with doing so, I tried doing this: run.addEventListener('click', function() { canvas.innerHTML = '<script>' + jsarea.value + '</script>'; }) But it didn't work. I'm also getting a 'Cannot read property 'getContext' of null' error on: var ctx = canvas.getContext('2d'); I think this might be because the canvas is in an iframe. How could I achieve what I'm trying to accomplish?
  2. I'm currently experimenting making an inventory system in JavaScript in preparation for hopefully making a point and click game. I've tried a few approaches, but they did not work, at least not well enough. So I was wondering if anyone would share their input in regards to what they would to implement something like this. Here is the fiddle I've been using to experiment with this: https://jsfiddle.net/Static_Cloud/0oc9L2nd/5/
  3. So I created a player object: function Player(x, y, width, height, speed, context) { this.x = x; this.y = y; this.width = width; this.height = height; this.speed = speed; this.create = function() { context.fillRect(this.x, this.y, this.width, this.height); } } And I created it in my draw() function: function draw() { var canvas = document.getElementById('mainCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var player = new Player(0, 0, 50, 50, 3, ctx); ctx.clearRect(0, 0, canvas.width, canvas.height); player.create(); if (upPressed == true) { player.y -= player.speed; } if (downPressed == true) { player.y += player.speed; } if (leftPressed == true) { player.x -= player.speed; } if (rightPressed == true) { player.x += player.speed; } requestAnimationFrame(draw); } } draw(); But for some reason, my player is still not moving. Is there something I'm missing, or should have done better?
  4. This works really well! But there is a minor problem: when my player collides with the other object from any direction and I press WASD, the player slightly goes into and out of the object. Not by much, thankfully.
  5. So I'm making a prototype for a game, and I want to add a collision system to it. I have the detection part down: function checkCollision(rect1, rect2) { if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) { } } And I don't want the player to move past the rectangle it's colliding with. If I were to type to type 'player.x += 0' or 'player.speed = 0', it would just stop the player from moving regardless if I press WASD. How would I make it so that my player can't move through objects?
  6. I know that, I don't know how though.
  7. So I'm testing out collision and keyboard input right now and my application looks like this: When I press and WASD key, I get this: As you can see, it keeps drawing the square over and over. Here is my code: function gameLoop(timeStamp) { var delta = timeStamp - (lastTime || timeStamp); if(aPressed){ player.x -= player.speed * delta; } if(dPressed){ player.x += player.speed * delta; } if(wPressed){ player.y -= player.speed * delta; } if(sPressed){ player.y += player.speed * delta; } window.requestAnimationFrame(gameLoop); lastTime = timeStamp; canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); playerObject = ctx.fillRect(player.x, player.y, player.width, player.height); collisionObject = ctx.fillRect(collisionBox.x, collisionBox.y, collisionBox.width, collisionBox.height); collision(player, collisionBox); } window.requestAnimationFrame(gameLoop); You might wonder 'okay, just take the playerObject and collisionObject out of the loop'. Actually, it isn't that easy. If I did do that, ctx.fillRect would be undefined. If I took took the canvas and ctx code out, the screen won't update. If I took the code from the canvas line to the collisionObject line, nothing would happen. How am I supposed to fix this?
  8. So, I implemented keyboard movement into my game: PIXI.loader .add(rooms[0].imageName, rooms[0].image) .add(rooms[1].imageName, rooms[1].image) .add(rooms[2].imageName, rooms[2].image) .add(player.imageName, player.sprite) .load(setup); function setup() { loadRoom(0); animationloop(); } function animationloop() { requestAnimationFrame(animationloop); document.addEventListener('keydown', function(event) { if (event.keyCode == 68) { player.x += 1; } else if (event.keyCode == 65) { player.x -= 1; } if (event.keyCode == 87) { player.y -= 1; } else if (event.keyCode == 83) { player.y += 1; } }); renderer.render(stage); } Here is the player in it's starting position: Then I press (technically, I tapped) 'D': So everything looks okay right now, but if I press 'D' once again: How did my player go from the side of the bed to the front of the computer in one tap? It just keeps going; my player teleports farther and farther as I press 'D' or any other button that moves my player. Could someone please help me?
  9. I'm trying to implement keyboard input into my game (basic WASD input). I tried searching how to do so, but I either came across nothing or something that didn't work. I was wondering if anyone knew a way of implementing WASD input into a pixi.js game.
  10. So I treid using Pixi.js for the first time and I tried loading an image onto a web page. When I tried doing so, I got this error: Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin pixi.js:2367 image at file:///C:/Users/x/Desktop/Projects/project/img/bck1.png may not be loaded. Here's the code to my project: PIXI.utils.sayHello(); var renderer = PIXI.autoDetectRenderer(800, 600, { transparent: true, resolution: 1 }); document.getElementById('main').appendChild(renderer.view); var stage = new PIXI.Container(); PIXI.loader .add('image', 'img/bck1.png') .load(setup); var image; function setup() { image = new PIXI.Sprite(PIXI.loader.resources['image'].texture); stage.addChild(image); renderer.render(stage); } What is the problem?
  11. So if I did this in my HTML file: <script src="node_modules/pixi.js/dist/pixi.js"></script> Should it work?
  12. I'm developing a game and I plan on using Pixi.js for it. I tried installing Pixi.js on my computer by using the NPM install and it did create the node_modules file but, when I tried implementing Pixi.js into my app.js file, I got an error on the browser saying PIXI is not defined. I assumed this meant that it was still not implemented despite installing it. I even tried starting fresh by creating a new project with npm init and then typing npm install pixi.js. So I tried searching for an installation tutorial and couldn't find anything, so I'm pretty stressed out from all this. Is there something I'm missing? Is there something I'm not doing right?