Get rotateY() of element as variable with javascript - javascript

For an ajax animation on my website I need to check if an element has a full transform to
transform: rotateY(-90deg)
I found this code on the internet to check an elements css value
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
usage:
getStyle(document.getElementById('to-transform'), "transform")
this will return a matrix3d, which can be different in many browsers like 'internet explorer' and also be different in other versions like IE7 and IE8:
matrix3d(0.00000000000000006123233995736766, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1) safari
matrix3d(0.00000000000000006123233995736766, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1) chrome
matrix3d(0.00000000000000006123233995736766, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1) opera
matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1) firefox
is there an easier way to check if an element has a rotateY(-90deg)? So the code can finish the last part of the animation
Note: it must be javascript because I haven't included jQuery

Related

Javascript 2d tilemap without drawing all tiles

I am creating a 2D platformer in JavaScript. I am trying to create a tilemap that does not spawn in blocks where there is supposed to be air (labeled 0 in tilemap). I do not get any errors. However, no blocks are spawned in the canvas. The game also crashes unless i remove the collision detection.
Main js
//drawing variables
var canvas;
var context;
//game variables
var gameLoop;
var player;
var borders = [];
var mapHeight = 12;
var mapWidth = 22;
var tilesize = 50;
//input variables
var upKey;
var rightKey;
var downKey;
var leftKey;
//runs once pace has been loaded
window.onload = function(){
//canvas and context variable setup
canvas = document.getElementById("gameCanvas")
context = canvas.getContext("2d")
//key listeners
setupInputs();
//create player
player = new Player(400, 400);
//create border
let tilemap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]
//create a box (border) based on tilemap position. Let 0's be air
for (let row = 0; row < mapHeight; row++){
for(let col = 0; col < mapWidth; col++){
if(tilemap[row][col] !== 0){
borders.push(new Border(tilemap[row]*tilesize, tilemap[col]*tilesize, tilesize, tilesize, tilemap[row][col]));
}
}
}
//initialize main game loop. Framerate = 30/sec
gameLoop = setInterval(step, 1000/30);
//draw canvas
context.fillStyle = "#f4f4f4f4"
context.fillRect(0, 0, mapWidth*tilesize, mapHeight*tilesize);
}
function step(){
player.step();
//draw after updates
draw();
}
function draw(){
//Clear previous canvas
context.fillStyle = "#f4f4f4f4"
context.fillRect(0, 0, mapWidth*tilesize, mapHeight*tilesize);
//draw the player
player.draw();
//draw borders
for(let i = 0; i < borders.length; i++){
borders[i].draw();
}
}
//keyboard inputs
function setupInputs(){
document.addEventListener("keydown", function(event){
if(event.key === "w"){
upKey = true;
} else if(event.key === "a"){
leftKey = true;
} else if(event.key === "s"){
downKey = true;
} else if(event.key === "d"){
rightKey = true;
}
});
document.addEventListener("keyup", function(event){
if(event.key === "w"){
upKey = false;
} else if(event.key === "a"){
leftKey = false;
} else if(event.key === "s"){
downKey = false;
} else if(event.key === "d"){
rightKey = false;
}
});
}
//Checking to see if player and border intersect
function checkIntersection(r1, r2){
if (r1.x >= r2.x + r2.width){
return false;
} else if (r1.x + r1.width <= r2.x){
return false;
} else if (r1.y >= r2.y + r2.height){
return false;
} else if (r1.y + r1.height <= r2.y){
return false;
} else {
return true;
}
}
Player js
function Player(x, y){
//Player variables
this.x = x;
this.y = y;
this.xvel = 0;
this.yvel = 0;
this.friction = 0.6;
this.maxVel = 12;
this.width = tilesize;
this.height = tilesize;
this.active = true;
this.falling = false;
this.step = function(){
if(this.active){
if(!leftKey && !rightKey || leftKey && rightKey){
this.xvel *= this.friction;
} else if (rightKey){
this.xvel++;
} else if (leftKey){
this.xvel--;
}
if(upKey){
//check if standing on ground
if (this.yvel === 0 && this.falling === false){
this.yvel -= 70;
this.falling = true;
} else{
this.yvel += 0;
}
}
this.yvel += 1;
//not allowing velocity to surpass maximum velocity
if (this.xvel > this.maxVel){
this.xvel = this.maxVel;
} else if(this.xvel < -this.maxVel){
this.xvel = -this.maxVel;
}
if (this.yvel > this.maxVel){
this.yvel = this.maxVel;
} else if(this.yvel < -this.maxVel){
this.yvel = -this.maxVel;
}
if (this.xvel > 0){
this.xvel = Math.floor(this.xvel);
} else {
this.xvel = Math.ceil(this.xvel);
}
if (this.yvel > 0){
this.yvel = Math.floor(this.yvel);
} else {
this.yvel = Math.ceil(this.yvel);
}
//collision rectangles
let horizontalRect = {
x: this.x + this.xvel,
y: this.y,
width: this.width,
height: this.height
}
let verticalRect = {
x: this.x,
y: this.y + this.yvel,
width: this.width,
height: this.height
}
//Collision deteQction
for(let i = 0; i<borders.length; i++){
let borderRect = {
x: borders[i].x,
y: borders[i].y,
width: borders[i].width,
height: borders[i].height
}
if (checkIntersection(horizontalRect, borderRect)){
while (checkIntersection(horizontalRect, borderRect)){
horizontalRect.x -= Math.sign(this.xvel);
}
this.x = horizontalRect.x;
this.xvel = 0;
}
if (checkIntersection(verticalRect, borderRect)){
while(checkIntersection(verticalRect, borderRect)){
verticalRect.y -= Math.sign(this.yvel);
}
this.y = verticalRect.y;
this.yvel = 0;
this.falling = false;
}
}
if (this.x + this.xvel > mapWidth*tilesize - tileisze){
this.xvel = 0;
}
if (this.x + this.xvel < 0){
this.xvel = 0;
}
this.x += this.xvel;
this.y += this.yvel;
}
}
this.draw = function(){
context.fillStyle = "orange";
context.fillRect(this.x, this.y, this.width, this.height);
}
}
Border js
function Border(x, y, width, height, type){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.type = type;
this.draw = function(){
if (this.type === 1){
context.fillStyle = "#2C2C34";
} else if (this.type === 2){
context.fillStyle = "#39393A";
}
context.fillRect(this.x, this.y, this.width, this.height);
}
}
There seems to be several errors in your code and it may take a while to find them all. You hex colors have 8 characters "#f4f4f4f4". You have a map width of 22 but only have 21 columns in the 2D array. It also seems off that when you are creating your borders array you have rows in the x spot and col in the y spot. I seems like it should be reversed. Anyway if you're not opposed to using a 1D array here is a simplified version of you code without the player stuff.
Border
function Border(type, x, y){
this.x = x;
this.y = y;
this.width = TILE_SIZE;
this.height = TILE_SIZE;
this.type = type;
this.draw = function(){
if (this.type === 1){
context.fillStyle = "purple";
context.fillRect(this.x, this.y, this.width, this.height);
} else if (this.type === 2){
context.fillStyle = "orange";
context.fillRect(this.x, this.y, this.width, this.height);
}
}
}
and the main file
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d")
const TILE_SIZE = 25; //50 was too big for my screen based on how many rows/columns you wanted
canvas.width = 525; //TILE_SIZE * columns
canvas.height = 300; //TILE_SIZE * rows
var borders = [];
let tileMap = {
mapHeight: 12,
mapWidth: 21,
size: TILE_SIZE,
grid: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 2, 0, 0, 2, 0, 2, 2, 2, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 0,
0, 0, 2, 0, 0, 2, 0, 0, 2, 0, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 0,
0, 0, 2, 2, 2, 2, 0, 0, 2, 0, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 0,
0, 0, 2, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 2, 0, 0, 2, 0, 2, 2, 2, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
]
}
//Uses 1 loop to create the grid
function createGrid() {
for (let i = 0; i < tileMap.grid.length; i++) {
let x = (i % tileMap.mapWidth) * tileMap.size;
let y = Math.floor((i / tileMap.mapWidth)) * tileMap.size;
let type = tileMap.grid[i];
borders.push(new Border(type, x, y));
}
};
createGrid(); //creates the grid when file is loaded
function animate() {
context.clearRect(0, 0, canvas.width, canvas.height);
for(let i = 0; i < borders.length; i++){
borders[i].draw();
}
requestAnimationFrame(animate);
}
animate()
I stuck the for loop in the animate function only for this example. Normally it would be its own function and that is where you can handle collision detection or drawing tiles or anything else you want to do with them.
If you must use a 2d array here is a function that will create it
function createGrid() {
for (let row = 0; row < tileMap.mapHeight; row++) {
for (let col = 0; col < tileMap.mapWidth; col++) {
let type = tileMap.grid[row][col];
let x = col * TILE_SIZE;
let y = row * TILE_SIZE;
borders.push(new Border(type, x, y))
}
}
}
createGrid()
Be sure to change the map back to 2d if you use the one I posted above. I also noticed in your player file you have tileisze at one point instead of tilesize. I would take some time to carefully scrub your files for errors as these may be the cause of some of your problems.

Running into Uncaught TypeError: Cannot read property of undefined

I have an algorithm that will modify a 10x10 2D array for a BattleShip game to randomly place ships down in a random direction.
The board looks like this:
var board= [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 0
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 1
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 2
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 3
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 4
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 6
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 7
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 8
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0] // 9
];
The algorithm will turn the 0's into 1's and place a random ship at a random index, and at a random direction. The array is like this: var array = [5, 4, 3, 3, 2] (The numbers represent the length e.g. five 1's, four 1's, etc.) The algorithm works good most times and will run until the array is empty.
The problem is, I keep occasionally running into Uncaught TypeError: Cannot read property of <some integer> undefined ONLY when trying to place the ship in either the UP or DOWN direction as it reaches out of bounds. The error occurs for the if statements that check if the direction chosen is out of bounds like so:
// check out of bounds for UP direction
if (x - 1 < 0 || array[x - i][y] == undefined) {
break;
}
// check out of bounds for DOWN direction
if (x + 1 > 9 || array[x + i][y] == undefined) {
break;
}
I believe the error is occurring with something to do with the negative index from trying to perform array[x - i][y] and array[x + i][y]. I thought I already fixed this by adding my additional OR check with x - 1 < 0 and x + 1 > 9 but still I am running into this exception.
Per the comments, the problem is there is no bounds checking on array[x + i] and array[x - i]. Because of that, the calls to array[x +/- i][y] result in a cannot read property ... of undefined error.

Items in javascript array suddenly changed without any reason

I've been working on a tile-based game, but after playing it for about a minute or so, some tiles just change to a different value. I have found that the code responsible for the sudden change is this part:
console.table(field);
console.table(ct);
var xcoord = x;
var ycoord = y;
if(y < 0) {
redrawField();
gameOver();
return;
}
for(var i = 0; i < ct.length; i++) {
for(var j = 0; j < ct[0].length; j++) {
if(ct[i][j] == 1) {
field[ycoord+i][xcoord+j] = index;
}
}
}
console.table(field);
the field variable is a two-dimensional array containing the 'status' of every tile. the ct variable has to be copied into the field on the x and y coordinates. (The field its vertical so the first index is the y-coordinate (or the row) and the second the x-coordinate (or the column)).
Usually this works fine, so when field is
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
ct is
0, 0, 1
1, 1, 1
and x and y are 2 and index = 3,
the result is:
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 3
0, 0, 3, 3, 3
But sometimes it randomly gives this:
0, 0, 0, 0, 3
0, 0, 0, 0, 3
0, 0, 0, 0, 3
0, 0, 3, 3, 3
I really can't think of any reason why it would do this, can someone help me?
Thanks in advance.

Can this 2 dimensional array work?

so far ive got:
var Items = new Array(5); // this array contains the items
BodyPaint = new Array(1, 0, 1, 0, 0, 0, 0, 0, 0); // this array gives stats for the item
WolfFur = new Array(3, 0, 1, 0, 0, 0, 0, 0, 0); // ^^
BearFur = new Array(4, 0, 1, 0, 0, 0, 0, 0, 0); // ^^
WolfSkin = new Array(6, 0, 0, 0, 0, 0, 0, 0, 0); // ^^
BearSkin = new Array(7, 1, 0, 0, 0, 0, 0, 0, 0); // ^^
would this array work? im relatively new to programing and my friend suggested this is how i should do it, but i looked around and everywhere else recommends a more complex way of doing it that might make sense were they to explain it.
if this array would work please tell me how i would access values in the second array
so far to access the 1st stat for wolf fur ive got this:
var example = Items.2.1
would this (^^) work?
and if it wouldnt work, please tell me how to do it using the above names in the example and explaining why you do everything you do and what it does.
thx.
Im now using an object, ive got:
var Items = {
BodyPaint : new Array(1, 0, 1, 0, 0, 0, 0, 0, 0),
FurCloak : new Array(3, 0, 1, 0, 0, 0, 0, 0, 0),
WolfSkin : new Array(5, 0, 0, 0, 0, 0, 0, 0, 0)};
there are more arrays but i ended it here to save space
i get the following errors:
Unknown identifier: BodyPaint
Unknown identifier: FurCloak
Unknown identifier: WolfSkin
and for all of my other arrays
if i replace a name with a number the error goes but it cant be good for the code and i dont really want my items to be refered to as numbers here, i wont b able 2 know which is which
No. It's that's not how you get values from an array.
Items[2][1] would work if your array were something like this;
var BodyPaint = new Array(1, 0, 1, 0, 0, 0, 0, 0, 0); // this array gives stats for the item
var WolfFur = new Array(3, 0, 1, 0, 0, 0, 0, 0, 0); // ^^
var BearFur = new Array(4, 0, 1, 0, 0, 0, 0, 0, 0); // ^^
var WolfSkin = new Array(6, 0, 0, 0, 0, 0, 0, 0, 0); // ^^
var BearSkin = new Array(7, 1, 0, 0, 0, 0, 0, 0, 0); // ^^
Items = [BodyPaint, WolfFur, BearFur, WolfSkin, BearSkin];
Items[2][1] would return 0.
Edit: You might be interested in using an object too.
var Items = {
BodyPaint: new Array(1, 0, 1, 0, 0, 0, 0, 0, 0),
WolfFur: new Array(3, 0, 1, 0, 0, 0, 0, 0, 0),
BearFur: new Array(4, 0, 1, 0, 0, 0, 0, 0, 0),
WolfSkin: new Array(6, 0, 0, 0, 0, 0, 0, 0, 0),
BearSkin: new Array(7, 1, 0, 0, 0, 0, 0, 0, 0)
}
This would allow you to write some code like this:
Items.BearFur[1] would return 0 and is the same as Items[2][1] above.
You only have multiple 1D arrays, you should combine them into 2D, like :
var Items = new Array
BodyPaint = new Array(1, 0, 1, 0, 0, 0, 0, 0, 0);
WolfFur = new Array(3, 0, 1, 0, 0, 0, 0, 0, 0);
BearFur = new Array(4, 0, 1, 0, 0, 0, 0, 0, 0);
WolfSkin = new Array(6, 0, 0, 0, 0, 0, 0, 0, 0);
BearSkin = new Array(7, 1, 0, 0, 0, 0, 0, 0, 0);
Items[0] = BodyPaint;
alert(Items[0][2]);
In that case you have 2D, and with the alert example you can access the items
It would not work because you aren't linking Items in any way to any of the other arrays. You would have to write:
var BodyPaint = new Array(1, 0, 1, 0, 0, 0, 0, 0, 0);
var WolfFur = new Array(3, 0, 1, 0, 0, 0, 0, 0, 0);
var BearFur = new Array(4, 0, 1, 0, 0, 0, 0, 0, 0);
var WolfSkin = new Array(6, 0, 0, 0, 0, 0, 0, 0, 0);
var BearSkin = new Array(7, 1, 0, 0, 0, 0, 0, 0, 0);
var Items = new Array(BodyPaint, WolfFur, BearFur, WolfSkin, BearSkin);
Then this would work:
var example = Items[2][1];
I would recommend that you use a JavaScript Object instead of arrays. In JSON, this would be:
var Items = {
BodyPaint : Array(1, 0, 1, 0, 0, 0, 0, 0, 0),
WolfFur : new Array(3, 0, 1, 0, 0, 0, 0, 0, 0),
BearFur : new Array(4, 0, 1, 0, 0, 0, 0, 0, 0),
WolfSkin : new Array(6, 0, 0, 0, 0, 0, 0, 0, 0),
BearSkin : new Array(7, 1, 0, 0, 0, 0, 0, 0, 0)};
You can then add new items like this:
Items.AnotherItem = new Array(8, 0, 0, 0, 0, 0, 0, 0, 0);
Or:
Items['AnotherItem'] = new Array(8, 0, 0, 0, 0, 0, 0, 0, 0);
And get a property like:
var example = Items.WolfSkin[5];
JavaScript Objects are very flexible an I recommend you take some time to really get to know them.

HTML5 Canvas drawImage only draws after second refresh

OK, I have a HTML5 canvas... and it draws images from .png tiles (32x32). It works. Sort of. It only draws on the canvas after the second refresh. For example, if you were to load it up... al you would see is a red canvas (the background for #canvas is red) then if you were to refresh it... it would be successfully draw the images... why is that?
Here is the code. (All you need is two images. t0.png and t1.png in line_tiles folder) But I am sure you can spot the error right away that I can't :P
game.js
// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 1; // starting from ZERO
// Set return 2D array of map
function loadMap(map) {
if (map == 1) {
return [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
}
}
// On load...
window.onload = function () {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
imageObj = new Image();
tiles = [];
board = loadMap(1);
canvas.width = 512;
canvas.height = 352;
// 2. SET UP THE MAP TILES
for (x = 0; x <= NUM_OF_TILES; x++) {
imageObj = new Image(); // new instance for each image
imageObj.src = "line_tile/t" + x + ".png";
tiles.push(imageObj);
}
var theX;
var theY;
// 3. DRAW MAP BY ROWS AND COLS
for (x = 0; x <= 10; x++) {
for (y = 0; y <= 15; y++) {
theX = x * 32;
theY = y * 32;
context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
}
}
};
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>HTML5</title>
<script type="text/javascript" src="game.js"></script>
<style type="text/css">
<!--
#canvas {
background:red;
z-index:0;
position:relative;
}
.container {
width: 512px;
position: relative;
}
-->
</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
You need to add onload hooks on your images (the tiles) and draw only when all images are loaded.
Here's a suggestion :
// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 1; // starting from ZERO
// Set return 2D array of map
function loadMap(map) {
if (map == 1) {
return [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
}
}
// On load...
window.onload = function () {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
imageObj = new Image();
tiles = [];
board = loadMap(1);
canvas.width = 512;
canvas.height = 352;
var draw = function() {
var theX;
var theY;
// 3. DRAW MAP BY ROWS AND COLS
for (x = 0; x <= 10; x++) {
for (y = 0; y <= 15; y++) {
theX = x * 32;
theY = y * 32;
context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
}
}
}
var loadedImagesCount = 0;
// 2. SET UP THE MAP TILES
for (x = 0; x <= NUM_OF_TILES; x++) {
var imageObj = new Image(); // new instance for each image
imageObj.src = "line_tile/t" + x + ".png";
imageObj.onload = function() {
loadedImagesCount++;
if (loadedImagesCount==NUM_OF_TILES) draw();
};
tiles.push(imageObj);
}
};
And be careful not to forget the var keyword (look at the loop).

Categories

Resources