Canvas Problem

[pdiddles03]

Originally Posted by Old Pedant

Because you coded something wrong?

How can we guess without seeing your code?

look at my first post, I am the starter of the thread.

[donna1]

Not sure why you reset your x coord, tilePos = -50 when you draw the next line?
Thats off the canvas

Easier - just have the x coordinate as x*25
or even 40+x*25 (say if you want a 40 pixel margin)

similarly your tileTop (y) coordinate could just be y*25

it will save you doing all the tilePos counting which is where the error is anyway.

Also you reset your image and reload your picture source every turn of the loop. That would be better done before the for loops start!

See 3 posts Below for my re-write!

[Old Pedant]

Originally Posted by donna1

... a statement like A=B=C=7
doesnt make any sense anyway ...

First of all, it *does* make sense.

In JavaScript, you would write it as

    A = B == C == 7;

And it means

   A = ( ( B == C ) == 7 )

which means that A will always end up being false, because you are comparing a boolean (true/false result of comparing B and C) to an integer. But that doesn't mean the construction is useless. I purposely created a pathological case.

*******************

in my language you couldnt have a statement like A=B=C=7

When you get a few years experience, if you really want to create a braindead language that doesn't allow that, you can. Just don't expect anybody to then use it.

[Old Pedant]

Originally Posted by pdiddles03

look at my first post, I am the starter of the thread.

LOL! Sorry! Mea maxima culpa! I thought I was answering donna1.

Let me go look again.

Though I'm not best person to ask about canvas.

[donna1]

Ive already rewritten it in perfect javascript lol

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++){
 for(y=0; y < map[x].length; y++){

    if(parseInt(map[x][y])==1){
	context.drawImage(grass,x*25,y*25);}
    else{
        context.drawImage(cement,x*25,y*25);}

 }
}

[Old Pedant]

There are several things in your code that don't make sense.

For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here:

#grass{
	height: 50px;
	width: 50px;
	background: url(new/grass.png):
	position: relative;
	float: left;
}

But that's all wrong, because you are using #grass so that style will *ONLY* affect an element which has id="grass". If it was meant to affect MANY elements, it should have been specified as .grass and then the elements would use class="grass".

In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down.

The increases *MUST* match the sizes of the images you are dropping in there.

When you reset the tilePos you do

    tilePos=-50l

yet in the initialization code you did

var tilePos=-25;

But both of them needlessly complicate matters.

[Old Pedant]

Originally Posted by donna1

Ive already rewritten it in perfect javascript lol

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++){
 for(y=0; y < map[x].length; y++){

    if(parseInt(map[x][y])==1){
	context.drawImage(grass,x*25,y*25);}
    else{
        context.drawImage(cement,x*25,y*25);}

 }
}

That's very close to what I was going to do.

A little more efficient:

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++)
{
    var line = map[x];
    for(y=0; y < line.length; y++)
    {
	context.drawImage( line[y] == "1" ? grass : cement  x*25, y*25);
    }
}

No reason to parseInt() the "1"/"0" value. Just compare the cell contents to a string instead of a number!

In x*25 and y*25: naturally, the 25's there need to match the actual height (x) and width (y) of the image.

Which suggests that for clarity we should swap the usage of x and y.

[Old Pedant]

What the heck...

var cellWidth = 25;
var cellHeight = 25;

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
grass.width = cellWidth; grass.height = cellHeight;
cement.src="new/cement.jpg";
cement.width = cellWidth; cement.height = cellHeight;

for( row=0; row < map.length; ++row)
{
    var line = map[row];
    for( column=0; column < line.length; ++column )
    {
	context.drawImage( line[column] == "1" ? grass : cement,
                           column*cellWidth, 
                           row*cellHeight 
        );
    }
}

That's actually getting readable.

[pdiddles03]

Thanks for your help! I'll study both your solutions when I have a lil more time.

[Old Pedant]

The beauty of this solution is that you could expand it to many types of "terrain".

Example:

var terrain {
   "g" : "grass.png",
   "c" : "cementjpg",
   "m" : "mountain.gif",
   "w" : "water.jpg",
   "t" : "town.png"
};

var map = [
    "mmmmmwwwww",
    "mmggcctttw",
    .... etc. ...
];

var cellWidth = 25;
var cellHeight = 25;

// replace strings with image objects:
for ( var c in terrain )
{
     var pic = new Image();
     pic.src = "new/" + terrain[c];
     pic.width = cellWidth; 
     pic.height = cellHeight;
     terrain[c] = pic; 
}
// draw terrain:
for( row=0; row < map.length; ++row)
{
    var line = map[row];
    for( column=0; column < line.length; ++column )
    {
        var image = terrain[ line[ column ] ];
	context.drawImage( image, column*cellWidth,  row*cellHeight );
    }
}

[pdiddles03]

So now I have another question, not to do with the programming side but canvas again. How efficient is it for a browser to render a game in canvas seeing every time you make a change, you have to clearthe canvas and then redo everything by calling the same functions. Wouldn't just having the DIV tags an programming their styles through CSS and Javascript be a lot simpler and make the browser faster?

I noticed by right clicking that basically your browser renders everything you did in javascript just a whole image.

[Old Pedant]

Well sure. Esp. if you are creating the game background via some server-side code (PHP/JSP/ASP/etc.) it would make more sense to just generate a bunch of <img> tags inside a <div>. Done correctly, the images would automatically show 10 per row.

The only reason I could see to use canvas like this (and even then I'm not sure it's a better choice then <img>s in a <div>) would be because you are downloading new maps via, say, AJAX and/or you are generating the maps using logic (semi-random??) in JS code.

[Old Pedant]

Oh...and you don't *HAVE* to clear the canvas and start over for *ANY* change.

Say you wanted to change one cell from grass to concrete: You could do that by just re-writing that part of the canvas.

Or, if you didn't use a canvas, by just changing the src property of one of your <img> tags.

[pdiddles03]

So ok, let's say I have my map all written out and generated.

Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?

[devnull69]

You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).