How to deny movement on some tiles in a javascript tile based game?
I have already created a map for the game and now I want to deflect movement on some fragments. For example, some tiles are the path the character is following, while others are forest, grass, or something similar where the character cannot move. Here's my map code:
var mapLeft = 224;
var mapTop = 160;
var protagonistLeft;
var protagonistTop;
var tileProperties = [
[ true,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[true, true, true, true,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
[false,false,false,false,false,false,],
]
I was thinking of something similar, but I don't know what to put instead of "disable movement" and "allow movement":
if (tileProperties = true){
allow movement
}
else {
deny movement
}
EDIT:
I am not actually moving the player. The card moves behind it, and the player is always in the middle. But here's the code:
function positionSettings() {
document.getElementById("gameWindow").scrollLeft = mapLeft;
document.getElementById("gameWindow").scrollTop = mapTop;
document.getElementById("protagonist").style.left ="507px";
document.getElementById("protagonist").style.top ="347px";
}
function moveMap(keystroke){
switch(keystroke.keyCode){
case 37:
mapLeft = mapLeft - 8;
positionSettings();
break
case 38:
mapTop = mapTop - 8;
positionSettings();
break
case 39:
mapLeft = mapLeft + 8;
positionSettings();
break
case 40:
mapTop = mapTop + 8;
positionSettings();
break
}
}
function loadMap(){
for(updown=0;updown<50;updown++){
for(leftright=0;leftright<50;leftright++){
//alert(tileProperties[leftright][updown]);
var tile = document.createElement("div");
tile.setAttribute("class","mapTile");
if(tileProperties[leftright][updown]){
tile.setAttribute("style","background-color:#00FF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
}
else{
tile.setAttribute("style","background-color:#FFFF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
}
var tileNum = document.createTextNode(leftright +":"+ updown);
tile.appendChild(tileNum);
document.getElementById("worldMap").appendChild(tile);
}
}
positionSettings();
}
EDIT:
This is my HTML if it helps (there is also styling code in there, but it has nothing to do with movement, so I won't post it here.):
<body onload="loadMap()" onkeydown="moveMap(event)">
<div id="gameWindow">
<div id="worldMap">
</div>
</div>
<div id="protagonist">
</div>
</body>
+3
source to share
3 answers
Something easier to work with is using a char map ... for example:
M = ["wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww",
"w::::::::::::::::::::::::::::r::::::w",
"w:::::::::::::t::::::t::::::r:::::::w",
"w:::::::t:t:::::::t::::::::bbb::X:::w",
"w::::::t::::::::::::::::::::r:::::::w",
"E::*::::::t:::t:::::::::t:::r:::::::w",
"w::::::::::::::::::::::::::::r::::::w",
"wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"];
where, for example, t
means a tree, b
means a bridge, r
river, w
wall, *
starting position for the player, X
treasure to capture, E
exit point (doors open only when you have treasure), etc.
Then you can create a map for each flag and use it with:
var can_walk = {'b': true, ':': true, 'X': true};
...
if (can_walk[M[y1][x1]]) {
// Step ok, update coords
x = x1; y = y1;
}
+2
source to share
I made this "game" some time ago for fun. It is incomplete and the code should be better organized, but it should be useful to you:
Js
var canvas = document.getElementById("grid");
var context = canvas.getContext("2d");
var tile = new Image();
var cursorImg = new Image();
cursorImg.src = "http://www.sebissimos.com/imgs/rmt_icon.png";
var game = function(document) {
this.document = document;
this.grid = {};
this.cursor = {
spriteImg: cursorImg,
x: 0,
y: 0,
cellx: 2,
celly: 2
};
this.tile = function(idx, idy, x, y, type) {
this.idx = idx;
this.idy = idy;
this.x = x;
this.y = y;
this.sprite = new Image();
if (type === "dirt") {
this.walkable = true;
this.sprite.src = 'http://vignette1.wikia.nocookie.net/tibia/images/0/0b/Dirt_%28Light%29.gif/revision/latest?cb=20091024213053&path-prefix=en';
}
if (type === "rock") {
this.walkable = false;
this.sprite.src = 'http://christessmer.com/sprites/tiles/grey_rock_tile.png';
}
};
this.map = [
["rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "rock", "dirt", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "dirt", "rock", "rock"],
["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
["rock", "rock", "dirt", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "dirt", "rock", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
["rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock"]
];
this.firstStart = true;
this.initGrid();
};
game.prototype = {
getInput: function(kc) {
actualx = this.cursor.cellx;
actualy = this.cursor.celly;
if (kc == 37) {
nextx = actualx - 1;
if (this.grid.squares[actualy][nextx] != undefined && this.grid.squares[actualy][nextx].walkable)
this.cursor.cellx = nextx;
}
if (kc == 38) {
nexty = actualy - 1;
if (this.grid.squares[nexty][actualx] != undefined && this.grid.squares[nexty][actualx].walkable)
this.cursor.celly = nexty;
}
if (kc == 39) {
nextx = actualx + 1;
if (this.grid.squares[actualy][nextx] != undefined && this.grid.squares[actualy][nextx].walkable)
this.cursor.cellx = nextx;
}
if (kc == 40) {
nexty = actualy + 1;
if (this.grid.squares[nexty][actualx] != undefined && this.grid.squares[nexty][actualx].walkable)
this.cursor.celly = nexty;
}
},
start: function() {
game = this;
var interval = setInterval(function() {
game.draw();
}, 10);
function checkKey(e) {
e = e || window.event;
game.getInput(e.keyCode);
}
document.onkeydown = checkKey;
},
draw: function() {
if (this.firstStart) {
this.grid.squares.forEach(function(yrow) {
yrow.forEach(function(cell) {
context.drawImage(cell.sprite, cell.x, cell.y);
});
});
}
context.drawImage(this.cursor.spriteImg, this.grid.squares[this.cursor.celly][this.cursor.cellx].x, this.grid.squares[this.cursor.celly][this.cursor.cellx].y);
},
initGrid: function() {
this.grid.squaresize = 32;
this.grid.squares = [];
var idx = 0;
var idy = 0;
var posx = 0;
var posy = 0;
for (var y = 0; y < this.map.length; y += 1) {
this.grid.squares[y] = [];
for (var x = 0; x < this.map[y].length; x += 1) {
this.grid.squares[idy][idx] = new this.tile(idx, idy, posx, posy, this.map[y][x]);
idx++;
posx = this.grid.squaresize * idx;
}
idx = 0;
posx = 0;
idy++;
posy = this.grid.squaresize * idy;
}
}
};
window.onload = function() {
test1 = new game(document);
test1.start();
};
Html
<canvas id="grid" width="800" height="600"></canvas>
Jsfiddle example: https://jsfiddle.net/xqjp4j72/7/ Edit: now with maps.
+2
source to share
Just check if the new position is valid before moving. Else, does nothing and leaves the player in their original position.
function moveMap(keystroke){
switch(keystroke.keyCode){
case 37:
if (isValidTile(mapLeft - 8, mapTop)) {
mapLeft = mapLeft - 8;
positionSettings();
} else {
//Do nothing, as if no keypress, to ignore it
}
break;
case 38:
if (isValidTile(mapLeft, mapTop - 8)) {
mapTop = mapTop - 8;
positionSettings();
} else {
//Do nothing, as if no keypress, to ignore it
}
break;
case 39:
if (isValidTile(mapLeft + 8, mapTop)) {
mapLeft = mapLeft + 8;
positionSettings();
} else {
//Do nothing, as if no keypress, to ignore it
}
break;
case 40:
if (isValidTile(mapLeft, mapTop + 8)) {
mapTop = mapTop + 8;
positionSettings();
} else {
//Do nothing, as if no keypress, to ignore it
}
break;
}
}
function isValidTile(leftright, updown) {
if(!tileProperties[leftright][updown]) {
return true;
} else {
return false;
}
}
+1
source to share