How to make an rpg map stretched when a player reaches the border? Javascript HTML5

Question

I'm struggling to find the answer to my question on google, so the thought is id post.

I create a top-down tile based on tiles using only html5, javascript and jquery.

I created the images in an array. I set my card in an array and just scrolled it to show the tiles on the screen.

I want to select a 750px x 600px large map to display on the canvas, and when the player moves to one of the four borders, the map will update and display the next part of the map or if the map is not available, this.

How to implement this?

If you do not understand what I'm asking, try to explain better: p, but heres my code:

$(document).ready(function(){ var canvas = $("#TBG"); var context = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); //Player Controls ------------------------------------------------------------------------- $(window).keydown(function(e){ var keyCode = e.keyCode; if (keyCode == arrowRight){ Player.moveRight = true; } else if (keyCode == arrowLeft){ Player.moveLeft = true; } else if (keyCode == arrowUp){ Player.moveUp = true; } else if (keyCode == arrowDown) { Player.moveDown = true; } }); $(window).keyup(function(e){ var keyCode = e.keyCode; if (keyCode == arrowRight){ Player.moveRight = false; } else if (keyCode == arrowLeft){ Player.moveLeft = false; } else if (keyCode == arrowUp){ Player.moveUp = false; } else if (keyCode == arrowDown) { Player.moveDown = false; } }); function player() { this.x = 100; this.y = 100; this.vX = 0; this.vY = 0; var moveRight = false; var moveLeft = false; var moveUp = false; var moveDown = false; } var Player = new player(); var arrowLeft = 37; var arrowUp = 38; var arrowRight = 39; var arrowDown = 40; //End Player controls ------------------------------------------------------------------------------ //Map initialisation ------------------------------------------------------------------------------------- var images = new Array(3); images[0] = new Image(); images[0].src = "images/player.png"; images[1] = new Image(); images[1].src = "images/wall.png"; images[2] = new Image(); images[2].src = "images/grass.png"; images[3] = new Image(); images[3].src = "images/floor.png"; var tileMap = [ [3,1,3,3,3,3,3,3,3,3], [3,1,1,2,2,2,2,2,2,3], [3,1,1,1,2,2,2,2,2,3], [3,2,1,1,1,2,2,2,2,3], [3,2,2,1,1,1,2,2,2,3], [3,2,2,2,1,1,1,1,1,3], [3,2,2,2,2,1,1,1,1,3], [3,2,2,2,2,1,1,1,1,3], [3,2,2,2,2,1,1,1,1,3], [3,3,3,3,3,3,3,3,3,3] ]; //Animate Loop ------------------------------------------------------------------------------------------- function animate () { context.clearRect(0,0,canvasWidth,canvasHeight); Player.vX = 0; Player.vY = 0; //Player Animation if (Player.moveRight) { Player.vX =2; }; if (Player.moveUp) { Player.vY = -2; }; if (Player.moveDown) { Player.vY = 2; }; if (Player.moveLeft) { Player.vX = -2; }; Player.x += Player.vX; Player.y += Player.vY; if (Player.x < 0){ Player.x = 0; Player.vX *= -2; } else if (Player.x + 64 > canvasWidth) { Player.x = canvasWidth - 64; Player.vX *= -2; }; if (Player.y < 0){ Player.y = 0; Player.vY *= -2; } else if (Player.y + 64 > canvasHeight) { Player.y = canvasWidth - 64; Player.vY *= -2; }; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++){ var tileId = tileMap[i][j]; var tileWidth = 32; var tileHeight = 32; context.drawImage(images[tileId],i * tileWidth, j * tileHeight); } } context.drawImage(images[0], Player.x, Player.y); setTimeout(animate, 0); } // End Loop ------------------------------------------------------------------------------------------------ animate(); 

});

I am not very good at Javascript, but I study and know a convenient amount about programming.

thanks in advance Tom

Answer 1

Well, there’s no particular way to do this (for example, anything in developing activity), but maybe I could be of some help, as I am creating a gender-oriented activity. There is nothing special for floor layers; it's just a phrase given for diagrams that can be complemented by each other. You may even have one part of all your activity, but you can see how this will not be done. If a was the 5X5 position of the lawn, and you wanted to place a bush on it, then between the departments you just see what color is qualified because you changed the floor of the lawn that was there before. Some people deal with this by including another part to position the bush. Thus, on the first part there is a lawn, and the bush looks like from above. You may need to use several levels for several plants that are actual to obtain the desired effect. Individually, I have only one part of the gender in my activity. This will be for the main subjects of the landscape, lawn, dust, etc. Then I will have a part of the subject where I will have ready-made items (which can be plants, flowers, bad people, houses, etc.), And my motor will take their roles and figure out how to sketch them.

For beginners, you can make your identity conflict with the sides of the screen. For example, to conflict with the rest of the display, you must check if the position of artist x was less than 0, and if so, set it to 0.

Then you will want to sketch the flooring on the display. You can draw a map of floors using a range of integers. Different numbers would mean different floor designs that you would need to sketch out. Thus, the 3X3 range of “0” will be a map that symbolizes the 3X3 lines of the turf, and “1 may be water or something else”. You can use these numbers from a text / binary computer file or an XML file or something else. Since you were thinking about XML, this is usually just a human-readable way to purchase parts. The XML data does not actually do anything (in a sense), it is up to your system to understand it.

Another recommendation is that since you are using SFML, you can use “views” to move the camera. Take a look at the SFML webpage on how to use them.

Now for my best recommendation. My post is relatively inexplicable, but everything I described is protected in the floor catwalk guides at Chip Gravelin. It is published in C #, and it does a lot more by developing a floor manager, but you can still implement your stuff in your C ++ / SFML activities. Watch "NIckGravelyn" online. com

Answer 2

You are almost there! I recently implemented something like this in a renderer for my own game.

In this loop:

 for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { var tileId = tileMap[i][j]; var tileWidth = 32; var tileHeight = 32; context.drawImage(images[tileId],i * tileWidth, j * tileHeight); } } 

You need to “center” your camera. In my game, every time a player moves, I focus him on my location, but you can do it as you like. You can center your camera by applying an offset to your world coordinates when drawing:

 for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { var tileId = tileMap[i + yOffset][j + xOffset] || tileIdForEmptyCell; var tileWidth = 32; var tileHeight = 32; context.drawImage(images[tileId],i * tileWidth, j * tileHeight); } } 

In your code, i and j represent your coordinates on the screen, they never change. To “shift” the world, you simply apply the offset to your world coordinates, which are used to perform a search on your tile map.

You will have to consider when the map ends, which makes the bit || tileIdForEmptyCell || tileIdForEmptyCell .