2
\$\begingroup\$

What I want to do:

I simply want the have a 2D array to represent my game map.

I want a player sprite and I want that sprite to be able to move around my map freely using the keyboard and also have collisions with certain tiles of my map array.

I want to use very large maps so I need a viewport.

What I have:

I have a loop to load the tile images into an array:

//Loop to load tile images into an array
var mapTiles = [];

for (x = 0; x <= 256; x++) {
    var imageObj = new Image(); // new instance for each image
    imageObj.src = "images/prototype/"+x+".jpg";
    mapTiles.push(imageObj);
}

I have a 2D array for my game map:

//Array to hold map data
var board =   [
    [1,2,3,4,3,4,3,4,5,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [17,18,19,20,19,20,19,20,21,22,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [33,34,35,36,35,36,35,36,37,38,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [49,50,51,52,51,52,51,52,53,54,1,1,1,1,1,1,1,1,1,1,1,1,1,197,198,199,1,1,1,1],
    [65,66,67,68,146,147,67,68,69,70,1,1,1,1,1,1,1,1,216,217,1,1,1,213,214,215,1,1,1,1],
    [81,82,83,161,162,163,164,84,85,86,1,1,1,1,1,1,1,1,232,233,1,1,1,229,230,231,1,1,1,1],
    [97,98,99,177,178,179,180,100,101,102,1,1,1,1,59,1,1,1,248,249,1,1,1,245,246,247,1,1,1,1],
    [1,1,238,1,1,1,1,239,240,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [216,217,254,1,1,1,1,255,256,1,204,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [232,233,1,1,1,117,118,1,1,1,220,1,1,119,120,1,1,1,1,1,1,1,1,1,1,1,119,120,1,1],
    [248,249,1,1,1,133,134,1,1,1,1,1,1,135,136,1,1,1,1,1,1,59,1,1,1,1,135,136,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,216,217,1,1,1,1,1,1,60,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,232,233,1,1,1,1,1,1,1,1,1,1,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,248,249,1,1,1,1,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,1,1,216,217,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,149,150,151,1,1,1,1,1,1,1,1,1,1,232,233,1,1,1],
    [12,12,12,12,12,12,12,13,1,1,1,1,165,166,167,1,1,1,1,1,1,119,120,1,1,248,249,1,1,1],
    [28,28,28,28,28,28,28,29,1,1,1,1,181,182,183,1,1,1,1,1,1,135,136,1,1,1,1,1,1,1],
    [44,44,44,44,44,15,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,59,1,1,197,198,199,1,1,1,1,119,120,1],
    [1,1,1,1,1,27,28,29,1,1,216,217,1,1,1,1,1,1,1,1,213,214,215,1,1,1,1,135,136,1],
    [1,1,1,1,1,27,28,29,1,1,232,233,1,1,1,1,1,1,1,1,229,230,231,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,248,249,1,1,1,1,1,1,1,1,245,246,247,1,1,1,1,1,1,1],
    [1,1,1,197,198,199,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,213,214,215,28,29,1,1,1,1,1,60,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,229,230,231,28,29,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,119,120,1,1,1,1,1],
    [1,1,1,245,246,247,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,135,136,1,1,60,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

I have my loop to place the correct tile sin the correct positions:

//Loop to place tiles onto screen in correct position
for (x = 0; x <= viewWidth; x++){
    for (y = 0; y <= viewHeight; y++){
        var width = 32;
        var height = 32;
        context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height);
    }
}

I have my player object :

//Place player object
    context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32);

I have my viewport setup:

//Set viewport pos
viewX = playerX - Math.floor(0.5 * viewWidth);
    if (viewX < 0) viewX = 0;
    if (viewX+viewWidth > worldWidth) viewX = worldWidth - viewWidth;


    viewY = playerY - Math.floor(0.5 * viewHeight);
    if (viewY < 0) viewY = 0;
    if (viewY+viewHeight > worldHeight) viewY = worldHeight - viewHeight;

I have my player movement:

canvas.addEventListener('keydown', function(e) {
    console.log(e);
    var key = null;
    switch (e.which) {
        case 37:
            // Left
            if (playerY > 0) playerY--;
            break;
        case 38:
            // Up
            if (playerX > 0) playerX--;
            break;
        case 39:
            // Right
            if (playerY < worldWidth) playerY++;
            break;
        case 40:
            // Down
            if (playerX < worldHeight) playerX++;
            break;
    }

My Problem:

I have my map loading an it looks fine, but my player position thinks it's on a different tile to what it actually is.

So for instance, I know that if my player moves left 1 tile, the value of that tile should be 2, but if i print out the value it should be moving to (2), it comes up with a different value.

How I've tried to solve the problem:

I have tried swap X and Y values for the initialization of my player, for when my map prints.

If I swap the X and Y values in this part of my code:

context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height);

The map doesnt get draw correctly at all and tiles are placed all in random positions or orientations

If I swap the X and Y values for my player in this line :

context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32);

The players movements are inversed, so up and down keys move my player left and right viceversa.

My question:

Where am I going wrong in my code, and how do I solve it so I have my map looking like it should and my player moving as it should as well as my player returning the correct tileID it is standing on or moving too.

ALSO

Here is a link to my whole code:

prototype

Improve this question
\$\endgroup\$
7
  • \$\begingroup\$ So... what's your question? \$\endgroup\$
    – Anko
    Dec 11, 2012 at 12:32
  • \$\begingroup\$ Where am i going wrong with my player movement or map? \$\endgroup\$
    – Tom Burman
    Dec 11, 2012 at 12:33
  • \$\begingroup\$ These are the problems I'm having reading your question: You've posted a lot of messy code with no comments. I don't know what you want your code to do. I don't know how you've tried to solve the problem. These make it very difficult for me to answer. \$\endgroup\$
    – Anko
    Dec 11, 2012 at 12:39
  • \$\begingroup\$ ok ill post these details \$\endgroup\$
    – Tom Burman
    Dec 11, 2012 at 12:41
  • \$\begingroup\$ Please look at my response below Anko, Thankyou very much \$\endgroup\$
    – Tom Burman
    Dec 11, 2012 at 13:14

1 Answer 1

Reset to default
2
\$\begingroup\$

This code....

switch (e.which) {
        case 37:
            // Left
            if (playerY > 0) playerY--;
            break;
        case 38:
            // Up
            if (playerX > 0) playerX--;
            break;
        case 39:
            // Right
            if (playerY < worldWidth) playerY++;
            break;
        case 40:
            // Down
            if (playerX < worldHeight) playerX++;
            break;
    }

Should be:

     switch (e.which) {
        case 37:
            // Left
            if (playerX > 0) playerX--;
            break;
        case 38:
            // Up
            if (playerY > 0) playerY--;
            break;
        case 39:
            // Right
            if (playerX < worldWidth) playerX++;
            break;
        case 40:
            // Down
            if (playerY < worldHeight) playerY++;
            break;
    }

You got Up and Down mixed up with Left and right (And I'm assuming your comment are correct here), also worldHeight and worldWidth have been corrected.

I see no code that enquires what tile the player is currently under so unable to fix anything related to that part of the question.

The following should work:

 function getPlayerTile(x, y) {
     return board[y][x];
 }

 console.log(getPlayerTile(playerX, playerY));
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Thankyou very much it seems to be working fine now! \$\endgroup\$
    – Tom Burman
    Dec 12, 2012 at 3:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .