0
\$\begingroup\$

Ive tried a few things but i cant get a working function if player collides with object set speed to 0( stop moving)

ive tried to use the function under "game over " and change the things to make speedx=0 and speedy=0 but i couldnt format it correctly.

https://www.w3schools.com/graphics/game_obstacles.asp

my code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:4px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var endGoalPiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 0, 0);
    endGoalPiece = new component(30, 30, "black", 450, 240);
    myObstacle = new component(10, 200, "green", 300, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.gamearea = myGameArea;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;    
    if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }//left
    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }//right
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }//up
    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
    myObstacle.update();
    endGoalPiece.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}
</script>
<p>use the arrow keys on you keyboard to move the red square.</p>
</body>
</html>

https://jsfiddle.net/tmanrocks999/e6w9br2s/178/

I expect when the player hits the obstacle for them to stop moving. but at the moment they go through it/ i have 1 && that prevents it from going past the x location of obstacle but that doesn't work right

\$\endgroup\$
0
\$\begingroup\$

So for collision detection and game development in general I suggest you start off with https://developer.mozilla.org/en-US/docs/Games/Techniques or https://www.w3schools.com/graphics/game_intro.asp

The way you would do this is add a collision method in your component class like so:

 this.collison = function(rect2) {
      let rect1 = this;
      if (rect1.x < rect2.x + rect2.width &&
     rect1.x + rect1.width > rect2.x &&
     rect1.y < rect2.y + rect2.height &&
     rect1.y + rect1.height > rect2.y) {
      //credits to https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
      this.color = "yellow";
      //check which side (x) the rect is touching
      if(rect1.x <= rect2.x) {
        rect1.x = rect2.x - 30;
      } 
      if(rect1.x >= rect2.x) {
        rect1.x = rect2.x + rect2.width;
      }

    } else {
      this.color = "red";
    }
 }

Here's the updated JSFiddle: https://jsfiddle.net/mero789y/nvbcu7ja/1/

\$\endgroup\$
  • \$\begingroup\$ I should of worded my question a bit diffrently but i want the cube to stop when it hits a wall. but what you gave me does help i Will try setting speed to 0 after they touch thanks . \$\endgroup\$ – tmanrocks994 Oct 16 at 19:25
  • \$\begingroup\$ jsfiddle.net/tmanrocks999/e6w9br2s heres my updated fiddle with walls working correctly . so if you hit a bounty cube should stop \$\endgroup\$ – tmanrocks994 Oct 16 at 19:27
  • \$\begingroup\$ I actually cant haha. I will try more when i get home. basically if player after 1 more move will interest with a wall. stop movement. \$\endgroup\$ – tmanrocks994 Oct 16 at 19:33
  • \$\begingroup\$ Alright, I'll change the code so that when the player hit's the wall it'll stop moving \$\endgroup\$ – Ameer Oct 17 at 17:22
  • \$\begingroup\$ can you update it? i still cant get it to work. been working all weekend first time i got on in a while \$\endgroup\$ – tmanrocks994 Oct 20 at 21:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.