Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12016 > unrolled thread

Anyone for a Canvas Competition?

Back to article view | Back to comp.lang.javascript

Contents

  Anyone for a Canvas Competition? darwinist <darwinist@gmail.com> - 2012-02-21 17:24 -0800
    Re: Anyone for a Canvas Competition? Andrew Poulos <ap_prog@hotmail.com> - 2012-02-22 12:45 +1100
      Re: Anyone for a Canvas Competition? darwinist <darwinist@gmail.com> - 2012-02-21 18:27 -0800
      Re: Anyone for a Canvas Competition? darwinist <darwinist@gmail.com> - 2012-02-21 20:25 -0800
        Re: Anyone for a Canvas Competition? Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-22 13:18 +0000
          Re: Anyone for a Canvas Competition? darwinist <darwinist@gmail.com> - 2012-02-22 14:45 -0800
            Re: Anyone for a Canvas Competition? Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-23 02:27 +0000
            Re: Anyone for a Canvas Competition? John G Harris <john@nospam.demon.co.uk> - 2012-02-23 11:53 +0000
              Re: Anyone for a Canvas Competition? Captain Paralytic <paul_lautman@yahoo.com> - 2012-02-23 04:50 -0800
                Re: Anyone for a Canvas Competition? John G Harris <john@nospam.demon.co.uk> - 2012-02-24 11:02 +0000
                  Re: Anyone for a Canvas Competition? Gene Wirchenko <genew@ocis.net> - 2012-02-24 09:42 -0800
              Re: Anyone for a Canvas Competition? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-24 14:04 +0100
                Re: Anyone for a Canvas Competition? John G Harris <john@nospam.demon.co.uk> - 2012-02-25 11:33 +0000
                  Re: Anyone for a Canvas Competition? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-25 13:30 +0100
                    Re: Anyone for a Canvas Competition? John G Harris <john@nospam.demon.co.uk> - 2012-02-25 16:31 +0000
      Re: Anyone for a Canvas Competition? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-22 13:27 +0100
    Re: Anyone for a Canvas Competition? Dr J R Stockton <reply1208@merlyn.demon.co.uk> - 2012-02-23 20:01 +0000
      Re: Anyone for a Canvas Competition? darwinist <darwinist@gmail.com> - 2012-02-23 20:16 -0800
        Re: Anyone for a Canvas Competition? Dr J R Stockton <reply1208@merlyn.demon.co.uk> - 2012-02-25 20:42 +0000

#12016 — Anyone for a Canvas Competition?

The canvas tag has a lot of potential but mostly flash still rules and
I wish it didn't.

I am interested in clever examples or proofs of concept of what could
be made with canvas and javascript. As a minor incentive, if this
thread gets at least three responses (that meet the below
requirements), then for each of my favourite three responses, I'll
paypal $100(AUD) to its submitter. Hopefully I'll get at least $300
dollars worth of education out of the whole ordeal.

Conditions:
- Any code/images used are expressly released into the public domain
so everyone can benefit from your genius.
- The example is submitted to this thread within 24.5 hours of now (or
by 1300 on the 23rd Feb, Sydney time).
- No more than 2 entries per person, but I guess you could cheat and
use multiple addresses. But don't.
- Also don't be a bastard and take something that's not public domain
and which you didn't write and pretend you can enter it, that's not
cool.

Make sure to indicate where the money can be sent (paypal only) if you
want it. I'll announce winners within an hour of the date mentioned
above.

I'm mostly interested in enjoyablity, cleverness and source-code
readability. If it were also useful well that would just be a bonus.

I realise you have no reason to believe me about the money but for
anyone taking the chance I appreciate it. I'm really a very honest
person.

Thanks

[toc] | [next] | [standalone]

#12017

On 22/02/2012 12:24 PM, darwinist wrote:
> The canvas tag has a lot of potential but mostly flash still rules and
> I wish it didn't.
>
> I am interested in clever examples or proofs of concept of what could
> be made with canvas and javascript. As a minor incentive, if this
> thread gets at least three responses (that meet the below
> requirements), then for each of my favourite three responses, I'll
> paypal $100(AUD) to its submitter. Hopefully I'll get at least $300
> dollars worth of education out of the whole ordeal.
>
> Conditions:
> - Any code/images used are expressly released into the public domain
> so everyone can benefit from your genius.
> - The example is submitted to this thread within 24.5 hours of now (or
> by 1300 on the 23rd Feb, Sydney time).
> - No more than 2 entries per person, but I guess you could cheat and
> use multiple addresses. But don't.
> - Also don't be a bastard and take something that's not public domain
> and which you didn't write and pretend you can enter it, that's not
> cool.
>
> Make sure to indicate where the money can be sent (paypal only) if you
> want it. I'll announce winners within an hour of the date mentioned
> above.
>
> I'm mostly interested in enjoyablity, cleverness and source-code
> readability. If it were also useful well that would just be a bonus.
>
> I realise you have no reason to believe me about the money but for
> anyone taking the chance I appreciate it. I'm really a very honest
> person.

You know this post wouldn't smell like some sort of scam if you didn't 
use a Gmail account, used a "real name", and there weren't lots of 
examples on Google already.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#12019

On Feb 22, 12:45 pm, Andrew Poulos <ap_p...@hotmail.com> wrote:
> On 22/02/2012 12:24 PM, darwinist wrote:
>
>
>
>
>
> > The canvas tag has a lot of potential but mostly flash still rules and
> > I wish it didn't.
>
> > I am interested in clever examples or proofs of concept of what could
> > be made with canvas and javascript. As a minor incentive, if this
> > thread gets at least three responses (that meet the below
> > requirements), then for each of my favourite three responses, I'll
> > paypal $100(AUD) to its submitter. Hopefully I'll get at least $300
> > dollars worth of education out of the whole ordeal.
>
> > Conditions:
> > - Any code/images used are expressly released into the public domain
> > so everyone can benefit from your genius.
> > - The example is submitted to this thread within 24.5 hours of now (or
> > by 1300 on the 23rd Feb, Sydney time).
> > - No more than 2 entries per person, but I guess you could cheat and
> > use multiple addresses. But don't.
> > - Also don't be a bastard and take something that's not public domain
> > and which you didn't write and pretend you can enter it, that's not
> > cool.
>
> > Make sure to indicate where the money can be sent (paypal only) if you
> > want it. I'll announce winners within an hour of the date mentioned
> > above.
>
> > I'm mostly interested in enjoyablity, cleverness and source-code
> > readability. If it were also useful well that would just be a bonus.
>
> > I realise you have no reason to believe me about the money but for
> > anyone taking the chance I appreciate it. I'm really a very honest
> > person.
>
> You know this post wouldn't smell like some sort of scam if you didn't
> use a Gmail account, used a "real name", and there weren't lots of
> examples on Google already.
>
> Andrew Poulos

It's always wise to suspect a scam but I don't see that you can do
much damage with a PayPal address. For example my PayPal address is
the one I'm currently posting with.

You can see my posting history to judge what kind of person I am.

I guess it could be an advance fee fraud so let me say I won't ask for
any advance fee.

[toc] | [prev] | [next] | [standalone]

#12022

On Feb 22, 12:45 pm, Andrew Poulos <ap_p...@hotmail.com> wrote:
> On 22/02/2012 12:24 PM, darwinist wrote:
[...]
> You know this post wouldn't smell like some sort of scam if you didn't
> use a Gmail account, used a "real name", and there weren't lots of
> examples on Google already.
>
> Andrew Poulos

As a show of good faith, here is my own meagre example. This of course
won't count as an entry into the competition.

Feel free to copy as much of it as you want if you submit your own
example.

(You can test it at http://pagefabricator.com/gametest.html and see
that I mentioned this thread on that page. It's a very basic platform
game but you can control two sprites simultaneously.)

<!--
Public Domain 2012
-->
<body onkeydown="keydown(event)" onkeyup = "keyup(event)">

<input type="text" id="output_box" size=100></input><br>
<canvas style='border-style:solid;border-width:1px;' id="game_canvas"
width="566" height="350">
This web-browser does not implement the canvas element.<br>
Try Firefox, Chrome, Safari or Opera.
</canvas>
<br>
Money $<input type='text' style='width:50px;' id='cash' />
Required <input type='text' style='width:50px;' id='requirement' />
Health <input type='text' style='width:50px;' id='health' />

<br>

Controls:<br>
Sprite 1: up down left right<br>
Sprite 2: w s a d<br><br>
Goal: Get the required amount of money before exiting the level
through the swirl
<br>
<script>

function get_element(id)
	{return document.getElementById(id);}

function clear_canvas()
	{drawing_2d.clearRect(0,0, canvas.width, canvas.height);}

function clear_buffer()
	{buffer_drawing.clearRect(0,0, buffer.width, buffer.height);}

function put_image(image, x, y)
	{drawing_2d.drawImage(image, x, y);}

function buffer_image(image, x, y)
	{if (image!=false) buffer_drawing.drawImage(image, x, y);}

function buffer_frame(image, frame_number, frame_width, put_x, put_y)
{
	var src_x = frame_number*frame_width;
	buffer_drawing.drawImage(image, src_x, 0, frame_width-5,
image.height, put_x, put_y, frame_width-5, image.height);
}
function run_code(code)
	{eval(code);}

function enter_pressed(e)
	{return (e.keyCode == 13) ? true: false;}

function keydown(e)
{
	// keycodes go left, up, right down, from 37 to 40
	if (e.keyCode == 37) left_pressed = true;
	if (e.keyCode == 38) up_pressed = true;
	if (e.keyCode == 39) right_pressed = true;
	if (e.keyCode == 40) down_pressed = true;

	// wasd are : 87, 65, 83, 68
	else if (e.keyCode == 87) w_pressed = true;
	else if (e.keyCode == 65) a_pressed = true;
	else if (e.keyCode == 83) s_pressed = true;
	else if (e.keyCode == 68) d_pressed = true;

}

function keyup(e)
{
	// keycodes go left, up, right down, from 37 to 40
	if (e.keyCode == 37) left_pressed = false;
	else if (e.keyCode == 38) up_pressed = false;
	else if (e.keyCode == 39) right_pressed = false;
	else if (e.keyCode == 40) down_pressed = false;

	// wasd are : 87, 65, 83, 68
	else if (e.keyCode == 87) w_pressed = false;
	else if (e.keyCode == 65) a_pressed = false;
	else if (e.keyCode == 83) s_pressed = false;
	else if (e.keyCode == 68) d_pressed = false;
}
function jump(sprite, height)
{
	sprite.ascent_rate = height;
	sprite.jumping = true;
}

function handle_block_collision(mover, target)
{
	// What kind of collision is it?
	// We will judge this by their previous position. If they used to be
above it, it's a
	// bottom-collision. If they used to be to the right of it, it's a
left-collision, etc

	// bottom collision
	if (mover.bottom > target.top && mover.previous_bottom <= target.top)
	{
		mover.top = target.top - mover.height;
		mover.bottom = mover.top + mover.height;
		mover.ascent_rate = 0;
		mover.grounded = true;
	}
	// top collision
	else if (mover.top < target.bottom && mover.previous_top >=
target.bottom)
	{
		mover.top = target.bottom;
		mover.bottom = mover.top + mover.height;
		mover.ascent_rate = 0;
	}
	// right collision
	else if (mover.right > target.left && mover.previous_right <=
target.left)
	{
		mover.left = target.left - (mover.width);
		mover.right = mover.left + mover.width;
		if (mover.ascent_rate > 0) mover.ascent_rate /=2;
		if (mover.manual == true) mover.speed = 0;
		else mover.direction =-1;
	}
	// left collision
	else if (mover.left < target.right && mover.previous_left >=
target.right)
	{
		mover.left = target.right;
		mover.right = mover.left + mover.width;
		if (mover.ascent_rate > 0) mover.ascent_rate /=2;
		if (mover.manual == true) mover.speed = 0;
		else mover.direction = 1;
	}
	else
	{
		clearInterval(timer);
		alert("collision, but don't know what kind\nprevious right was "+
					mover.previous_right+ " and object left is "+target.left +
					" previous bottom was " + mover.previous_bottom + " and object
top is "+target.top);
	}
}

function handle_treasure_collision(mover, target)
{
	if (mover.type == sprite_object)
	{
		target.type=destroyed_object;
		target.image_type=destroyed_object;
		cash += 10;
	}
}

function handle_monster_collision(mover, target)
{
	if (mover.type == sprite_object)
	{
		// bottom collision
		if (mover.bottom > target.top && mover.previous_bottom <=
target.previous_top)
	  {
		//	target.type=destroyed_object;
			//target.image_type=destroyed_object;
			target.image_type = monster_bitten_object;
			health -=10;
			if (left_pressed && mover == sprite) sprite.direction =-1;
			if (right_pressed && mover == sprite) sprite.direction =1;
			if (a_pressed && mover == sprite2) sprite2.direction =-1;
			if (d_pressed && mover == sprite2) sprite.direction =1;
			jump(mover, 10);
		}
		// top collision
		if (mover.top < target.bottom && mover.previous_top >=
target.previous_bottom)
		{
			health -= 10;
			target.image_type = monster_bitten_object;
		}
		// right collision
		else if (mover.right > target.left && mover.previous_right <=
target.previous_left)
		{
			health -= 10;
			target.image_type = monster_bitten_object;
			target.direction = 1;
		}
		// left collision
		else if (mover.left < target.right && mover.previous_left >=
target.previous_right)
		{
			health -= 10;
			target.image_type = monster_bitten_object;
			target.direction = -1;
		}
		else // can't determine the kind
		{
			target.image_type = monster_bitten_object;
			if (mover.grounded) health -=10;
			jump(mover, 10);
		}
	}
}

function handle_win_collision(mover, target)
{
	if (mover.type != sprite_object) return;

	if (cash >= required_cash)
	{
		mover.type = destroyed_object;
		mover.image_type = destroyed_object;
		mover.finished = true;
		if (sprite.finished && sprite2.finished)
		{
			alert("level complete");
			clearInterval(timer);
			current_level++;
			start_level();
		}
	}
	else
	{
		// What kind of collision?
		mover.direction *=-1;

		// bottom collision
		if (mover.bottom > target.top && mover.previous_bottom <=
target.top)
		{
			mover.top = target.top - mover.height;
			mover.bottom = mover.top + mover.height;
			mover.ascent_rate = 10;
			mover.speed =0;
			mover.grounded = false;
		}
		// top collision
		else if (mover.top < target.bottom && mover.previous_top >=
target.bottom)
		{
			mover.top = target.bottom;
			mover.bottom = mover.top + mover.height;
			mover.ascent_rate = 0;
		}
		// right collision
		else if (mover.right > target.left && mover.previous_right <=
target.left)
		{
			mover.left = target.left - (mover.width+5);
			mover.right = mover.left + mover.width;
			mover.ascent_rate /=2;
			mover.speed = 0;
		}
		// left collision
		else if (mover.left < target.right && mover.previous_left >=
target.right)
		{
			mover.left = target.right + 5;
			mover.right = mover.left + mover.width;
			mover.ascent_rate /=2;
			mover.speed = 0;
		}
		alert("not enough cash");
		left_pressed = false;right_pressed = false;
		a_pressed = false;d_pressed = false
	}
}

function check_map_object_collisions(sprite)
{
	//var collision = false;

	var num_objects = map_objects.length;

	for (var mover = 0; mover < num_objects; mover++)
	{
		// If it's a moving object, check for collisions.
		if (map_objects[mover].moves && map_objects[mover].type !=
destroyed_object)
		{
			for (var i=0; i < num_objects; i++)
			{
				// If object1 moves and intersects with object2, then 's a
collision.
				if ((i != mover) &&
						(map_objects[mover].right > map_objects[i].left) &&
						(map_objects[mover].left < map_objects[i].right) &&
						(map_objects[mover].bottom > map_objects[i].top) &&
						(map_objects[mover].top < map_objects[i].bottom))
				{
					//alert("Collision with block "+i);
					//clearInterval(timer);

					var object_type = map_objects[i].type;
					// If it intersects with a block:
					if (object_type == block_object || object_type == wall_object)
						handle_block_collision(map_objects[mover], map_objects[i], i);

					// If it intersects with treasures
					else if (object_type == treasure_object)
						handle_treasure_collision(map_objects[mover], map_objects[i],
i);

					// if it intersects with a monster:
					else if (object_type == monster_object || object_type ==
monster_bitten_object)
						handle_monster_collision(map_objects[mover], map_objects[i], i);

					// if it intersects with the level-end:
					else if (object_type == win_object)
						handle_win_collision(map_objects[mover], map_objects[i]);
				}
			}
		}
	}
}

function move_objects()
{
	var num_objects = map_objects.length;
	for (var i=0; i< num_objects; i++)
	{
		if (map_objects[i].moves && map_objects[i].type != destroyed_object)
		{
			// if they're running, move them and slow them down.
			if (map_objects[i].speed > 0)
			{
				map_objects[i].left += (map_objects[i].speed *
map_objects[i].direction);
				map_objects[i].left = Math.round(map_objects[i].left);
				if (map_objects[i].manual && map_objects[i].grounded)
				{
					map_objects[i].speed *= 0.8;
					if (map_objects[i].speed < 1) map_objects[i].speed = 0;
				}
			}
			// Fall or rise, according to ascent_rate;
			map_objects[i].top-=(map_objects[i].ascent_rate);
		  map_objects[i].ascent_rate-=gravity;
			map_objects[i].grounded = false;

			// Update their "right" and "bottom" properties.
			map_objects[i].right = map_objects[i].left + map_objects[i].width;
			map_objects[i].bottom = map_objects[i].top + map_objects[i].height;
		}
	}
}

function remember_previous_positions()
{
	var num_objects = map_objects.length;
	for (i = 0; i < num_objects; i++)
	{
		if (map_objects[i].moves)
		{
			// Remember the elements's last position.
			map_objects[i].previous_right = map_objects[i].right;
			map_objects[i].previous_left = map_objects[i].left;
			map_objects[i].previous_bottom = map_objects[i].bottom;
			map_objects[i].previous_top = map_objects[i].top;
		}
	}
}

function process_keyboard_controls()
{
	// if not jumping, they can run, jump, etc.
	if (sprite.grounded)
	{
		if (up_pressed) jump(sprite, jump_height);

		// Test for left/right keys pressed.
		if (left_pressed)
		{
			if (sprite.direction == 1) // going right, change direction
			{
				sprite.direction = -1;
				sprite.speed = 2;
			}
			else sprite.speed +=2; // Already going left, go faster
		}
		if (right_pressed)
		{
			if (sprite.direction == -1) // going left, change direction
			{
				sprite.direction = 1;
				sprite.speed = 2;
			}
			else sprite.speed +=2; // already going right, go faster
		}
	}

	// Now the second sprite.
	if (sprite2.grounded)
	{
		if (w_pressed) jump(sprite2, jump_height);

		// Test for left/right keys pressed.
		if (a_pressed)
		{
			if (sprite2.direction == 1) // going right, change direction
			{
				sprite2.direction = -1;
				sprite2.speed = 2;
			}
			else sprite2.speed +=2; // Already going left, go faster
		}
		if (d_pressed)
		{
			if (sprite2.direction == -1) // going left, change direction
			{
				sprite2.direction = 1;
				sprite2.speed = 2;
			}
			else sprite2.speed +=2; // already going right, go faster
		}
	}
}

function paint_frame()
{

	process_keyboard_controls();

	move_objects();

	// Handle object-collisions according to object-type
	check_map_object_collisions(sprite);

	remember_previous_positions();

	// Clear the image buffer and create a new frame
	clear_buffer();

	// Draw the blocks
	var num_objects = map_objects.length;
	for (var i=0; i < num_objects; i++)
		buffer_image(object_images[map_objects[i].image_type],
map_objects[i].left, map_objects[i].top);

	// draw the sprite
	//buffer_image(sprite.image, sprite.left, sprite.top);

	// Apply the drawing-buffer to the canvas


		// Nine arguments: the element, source (x,y) coordinates, source
width and
	// height (for cropping), destination (x,y) coordinates, and
destination width
	// and height (resize).
	// context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

	//output.value = sprite_x_distance + ", "+ sprite_y_distance;

	var sprite_x_distance = Math.abs(sprite.left-sprite2.left)
+sprite.width;
	var sprite_y_distance = Math.abs(sprite.top-sprite2.top)
+sprite.height;
	var min_sprite_x = Math.min(sprite.left, sprite2.left);
	var min_sprite_y = Math.min(sprite.top, sprite2.top);
	var sprites_x_mid_point = min_sprite_x + (sprite_x_distance/2);
	var sprites_y_mid_point = min_sprite_y + (sprite_y_distance/2);

	var frame_width = Math.max(canvas.width, sprite_x_distance
+200);						// Source width
	var frame_height = Math.max(canvas.height, sprite_y_distance+200);
						// source height

  var width_ratio = frame_width / canvas.width;
	var height_ratio = frame_height / canvas.height;

	if (width_ratio > height_ratio) frame_height =
Math.round(canvas.height * width_ratio);
	else frame_width = Math.round(height_ratio * canvas.width);

	var frame_x_zero = Math.max(0, (sprites_x_mid_point -
Math.max(display_x_offset, (frame_width/2))));  // source x
	var frame_y_zero = Math.max(0, (sprites_y_mid_point -
Math.max(display_y_offset, (frame_height/2))));  // source y


	//output.value = "height ratio: "+height_ratio + " and width ratio: "
+ width_ratio;
	//output.value = "frame_height: "+frame_height + " and frame_width: "
+ frame_width;

	clear_canvas();
	drawing_2d.drawImage(buffer,
											frame_x_zero,
											frame_y_zero,
											frame_width,
											frame_height,
											0,0, // destination x and y
											canvas.width, canvas.height); // destination size
	//put_image(buffer, -(sprites_x_mid_point-display_x_offset), -
(sprites_y_mid_point-display_y_offset));

	// Update the text boxes
	if (health <= 0)
	{
		alert("dead"); clearInterval(timer);
		start_level();
	}
	cash_box.value = cash;
	//points_box.value = points;
	health_box.value = health;

}

// Create a monster and put it on the map
function put_monster(x, y)
{
	var monster = new Object();
	monster.type = monster_object;
	monster.image_type = monster_object;
	monster.moves = true;
	monster.speed = 2;
	monster.direction = -1;
	monster.grounded = false;
	monster.ascent_rate = 0;
	monster.top = y;
	monster.manual = false;
	monster.left = x;
	monster.width = monster_width;
	monster.height = monster_height;
	monster.right = monster.left + monster.width;
	monster.bottom = monster.top + monster.height;
	monster.previous_left = monster.left;
	monster.previous_right = monster.right;
	monster.previous_top = monster.top;
	monster.previous_bottom = monster.bottom;
	map_objects.push(monster);
}

function put_treasure(x, y)
{
	var treasure = new Object();
	treasure.type = treasure_object;
	treasure.image_type = treasure_object;
	treasure.top = y;
	treasure.left = x;
	treasure.right = treasure.left + treasure_width;
	treasure.bottom = treasure.top + treasure_height;
	map_objects.push(treasure);
}

function put_block(x, y)
{
	var block = new Object();
	block.top = y;
	block.type = block_object;
	block.image_type = block_object;
	block.left = x;
	block.width = block_width;
	block.height = block_height;
	block.right = block.left + block_width;
	block.bottom = block.top + block_height;
	map_objects.push(block);
}

function put_wall(x, y)
{
 var wall = new Object();
 wall.type = wall_object;
 wall.image_type = wall_object;
	wall.top = y;
	wall.left = x;
	wall.width = 30;
	wall.height = 90;
	wall.right = wall.left + wall.width;
	wall.bottom = wall.top + wall.height;
	map_objects.push(wall);
}
function put_win(x, y)
{
 var win = new Object();
 win.type = win_object;
 win.image_type = win_object;
	win.top = y;
	win.left = x;
	win.width = 30;
	win.height = 30;
	win.right = win.left + win.width;
	win.bottom = win.top + win.height;
	map_objects.push(win);
}

function start_level()
{
	var map = levels[current_level].map;
	var cash_required = levels[current_level].cash_required;

	map_objects = new Array();

	var level_length = map.length;
	y = 0;
	x = 0;
	var block_pixels = 30;
	for (var i =0; i < level_length ; i++)
	{
		if (map[i] == "m")	put_monster(x, y);
		else if (map[i] == "=") put_block(x, y);
		else if (map[i] == "$") put_treasure(x, y);
		else if (map[i] == ":") put_wall(x, y);
		else if (map[i] == "!") put_win(x, y);
		else if (map[i] == "1") {sprite.left = x; sprite.top = y}
		else if (map[i] == "2") {sprite2.left = x; sprite2.top = y}
		if (map[i] == "\n")
		{
			x = 0;
			y+=30;
		}
		else x += block_pixels;
	}

	sprite.type = sprite_object; sprite.image_type = sprite_object;
	sprite.speed = 0; sprite.ascent_rate = 0;
	sprite2.speed = 0; sprite2.ascent_rate = 0;
	sprite2.type = sprite_object; sprite2.image_type = sprite_2_object;

	map_objects.push(sprite);
	map_objects.push(sprite2);
	buffer.width = x+200;
	buffer.height = y+200;

	// adjust the size of the buffer so it's the same
	// proportion of the canvas' height and width
	// this avoids errors when scaling.
	buffer_width_ratio = buffer.width / canvas.width;
	buffer_height_ratio = buffer.height / canvas.height;

	if (buffer_width_ratio > buffer_height_ratio)
		buffer.height = canvas.height * buffer_width_ratio;
	else buffer.width = canvas.width * buffer_height_ratio;

	requirement_box.value = levels[current_level].cash_required;
	health = 100;
  cash = level_start_cash;
	up_pressed = false; down_pressed = false; left_pressed = false;
right_pressed = false;
	a_pressed = false; s_pressed = false; d_pressed = false; w_pressed =
false;

	timer = setInterval(paint_frame, frame_interval);

}

// debug information
var output = get_element("output_box");

// The display canvas and drawing context
var canvas = get_element("game_canvas");
var drawing_2d = canvas.getContext("2d");

// The hidden buffer to create the scene piece by piece
var buffer = document.createElement("canvas");
buffer_drawing = buffer.getContext("2d");

// How often to render the scene
var frame_rate = 30;
var frame_interval = 1000/frame_rate;
var timer; // to update the image every x milliseconds.

// output boxes:
var requirement_box = get_element("requirement");
var cash_box = get_element("cash");
var health_box = get_element("health");

// Scores
var cash = 0;
var level_start_cash = 0;
var points = 0;
var health = 100;
var required_cash = 200

// collision types (which side of the player hit the object)
var collision_right = 1;
var collision_left = 2;
var collision_top = 3;
var collision_bottom = 4;

// Some things to handle running and jumping effect
var jump_height = 15;
var gravity = 1;
var ascent_rate = 0; // how much upward momentum do they have
var grounded = false; // are they on the ground?
var running_speed = 0; // how fast moving
var direction = 1; // Which direction moving? right is 1. Left is -1;

// Key state variables
var left_pressed = false
var up_pressed = false;
var right_pressed = false;
var down_pressed = false;

// keys for the second sprite
var w_pressed = false;
var a_pressed = false;
var s_pressed = false;
var d_pressed = false;

// Map object types
var destroyed_object = 0;
var block_object = 1;
var jump_enhancer_object = 2;
var treasure_object = 3;
var health_object = 4;
var damage_object = 5;
var win_object = 6;
var monster_object = 7;
var sprite_object = 8;
var monster_bitten_object = 9;
var wall_object = 10;
var sprite_2_object = 11;
var win_object = 12;

var level = "";

// Create some map objects
var map_objects = new Array();
var object_images = new Array();

// the background-blocks image.
var block_image = new Image(); block_image.src = "block.png";
var block_width = 90; var block_height = 30;

var wall_image = new Image(); wall_image.src = "wall.png";

var treasure_image = new Image(); treasure_image.src = "treasure.png";
var treasure_height = 30;
var treasure_width = 30;

var monster_image = new Image(); monster_image.src = "monster.png";
var monster_bitten_image = new Image(); monster_bitten_image.src =
"monster_bitten.png";
var monster_height = 30; var monster_width =30;

var win_image =new Image(); win_image.src = "win.png";

var sprite_image = new Image();
sprite_image.src = "sprite1.png";

var sprite_2_image = new Image();
sprite_2_image.src = "sprite2.png";


object_images[destroyed_object] = false;
object_images[block_object] = block_image;
object_images[treasure_object] = treasure_image;
object_images[monster_object] = monster_image;
object_images[sprite_object] = sprite_image;
object_images[monster_bitten_object] = monster_bitten_image;
object_images[wall_object] = wall_image;
object_images[sprite_2_object] = sprite_2_image;
object_images[win_object] = win_image;

// The character
var sprite = new Object();
sprite.type = sprite_object;
sprite.image_type = sprite_object;
sprite.width = 19;
sprite.height = 42;
sprite.left = 50;
sprite.top = 10;
sprite.right = 0;
sprite.bottom = 0;
sprite.ascent_rate = 0;
sprite.grounded = false;
sprite.moves = true;
sprite.manual = true;
sprite.speed = 0;
sprite.direction = 1;
// Remember the sprite's last position.
sprite.previous_right = sprite.right;
sprite.previous_left = sprite.left;
sprite.previous_bottom = sprite.bottom;
sprite.previous_top = sprite.top;
map_objects.push(sprite);

// The second character
var sprite2 = new Object();
sprite2.image_type = sprite_2_object;
sprite2.type = sprite_object;
sprite2.width = 19;
sprite2.height = 42;
sprite2.left = 50;
sprite2.top = 10;
sprite2.right = 0;
sprite2.bottom = 0;
sprite2.ascent_rate = 0;
sprite2.grounded = false;
sprite2.moves = true;
sprite2.manual = true;
sprite2.speed = 0;
sprite2.direction = 1;
// Remember the sprite's last position.
sprite2.previous_right = sprite2.right;
sprite2.previous_left = sprite2.left;
sprite2.previous_bottom = sprite2.bottom;
sprite2.previous_top = sprite2.top;
map_objects.push(sprite2);

// Figure out the display offsets based on the canvas and sprite
dimensions.
var display_y_offset = (canvas.height/2) - (sprite.height/2);
var display_x_offset = (canvas.width/2) - (sprite.width/2);

var current_level = 0;

var levels = new Array();
levels[0] = new Object();
levels[0].map = ""+
":mm       mm      :\n"+
"|                 |\n"+
"|=--=--=--=--=--  |\n"+
":        :        :\n"+
"|    2   |    1   |\n"+
"|        |        |\n"+
":  =--=--:  =--=--:\n"+
"|    $   |    $$  |\n"+
"|    $   |        |\n"+
":   $$$$ : $$$$   :\n"+
"|        |        |\n"+
"|        |        |\n"+
":=--=--  :=--=--  :\n"+
"| $$     |        |\n"+
"|   $$$  |     $$$|\n"+
":  =--=--:   =--=-:\n"+
"|    $$$ |    $$$ :\n"+
"|  $     |        |\n"+
":  $     |        |\n"+
"|  $          :   !\n"+
"|  $          |   !\n"+
"=--=--=--=--=--==--";
levels[0].cash_required = 200;

levels[1] = new Object();
levels[1].cash_required = 400;
levels[1].map = ""+
":=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--:\n"+
"|                             mmmmmmmmmmmm    |\n"+
"|   =--=--=--=--=--=--=--=--=--=--=--=--=--=--|\n"+
":       $                                     :\n"+
"|                                             |\n"+
"|         ==-- $                              |\n"+
":       =--=-- $                              :\n"+
"|     =--=-=-- $                       !      |\n"+
"|   =--=--==-- $    =--=--=--=--   =--=--=--  |\n"+
": 21           $                              :\n"+
"|              $          $$$$$$$$$$$$$$$$$$  |\n"+
"|=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--|";
start_level();

</script>

</body>

[toc] | [prev] | [next] | [standalone]

#12042

darwinist <darwinist@gmail.com> wrote in
news:5051959b-9f16-4be2-add7-a5fc35eb2c70@r9g2000pbo.googlegroups.com: 


> 
> You can test it at http://pagefabricator.com/gametest.html and see

The display is okay, but I cannot move anything with arrows nor /[wsad]/.


(Win7-32/FF 9.0.1)

-- 
http://pages.videotron.ca/duffym/index.htm

[toc] | [prev] | [next] | [standalone]

#12070

On Feb 23, 12:18 am, Mike Duffy <Use_guestbook_p...@website.in.sig>
wrote:
> darwinist <darwin...@gmail.com> wrote innews:5051959b-9f16-4be2-add7-a5fc35eb2c70@r9g2000pbo.googlegroups.com:
>
>
> > You can test it at http://pagefabricator.com/gametest.html and see
>
> The display is okay, but I cannot move anything with arrows nor /[wsad]/.
>
> (Win7-32/FF 9.0.1)
>
> --http://pages.videotron.ca/duffym/index.htm

Thanks for the feedback. If I get some time I'll set up firefox 9 to
test with. I guess there could be a bug in that version in which case
getting the latest version (10.something) would help. I originally
made the game with a much older firefox (maybe 3.something) and am
currently running it on 10.0.2 on win7-32.

On a related note, I've set it to standards mode by adding <!doctype
html> and this lets it work in ie9. Maybe it will help in your version
of firefox as well, but that's just wild speculation.

[toc] | [prev] | [next] | [standalone]

#12077

darwinist <darwinist@gmail.com> wrote in
news:1ba54e38-ee85-4f79-a958-9955364e05f3@pw4g2000pbc.googlegroups.com: 


>.. firefox 9 to test with. I guess there could be a bug ...
> getting the latest version (10.something) would help. 

FF 10.0.2 works okay. I did not realize that I was outdated.

> On a related note, .. adding <!doctype html>

> Maybe it will help in your version of firefox as well,
> but that's just wild speculation.

It did not. (I tried before updating.)

Good luck.

-- 
http://pages.videotron.ca/duffym/index.htm

[toc] | [prev] | [next] | [standalone]

#12086

On Wed, 22 Feb 2012 at 14:45:49, in comp.lang.javascript, darwinist
wrote:

  <snip>
>On a related note, I've set it to standards mode by adding <!doctype
>html> and this lets it work in ie9.
  <snip>

<!doctype html> is an HTML5 element. HTML5 is not a standard yet; it's
only a working draft, so it's meaning to browsers is not certain yet.

  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#12088

On Feb 23, 11:53 am, John G Harris <j...@nospam.demon.co.uk> wrote:
> On Wed, 22 Feb 2012 at 14:45:49, in comp.lang.javascript, darwinist
> wrote:
>
>   <snip>>On a related note, I've set it to standards mode by adding <!doctype
> >html> and this lets it work in ie9.
>
>   <snip>
>
> <!doctype html> is an HTML5 element. HTML5 is not a standard yet; it's
> only a working draft, so it's meaning to browsers is not certain yet.
"...its meaning to browsers..." See:
https://groups.google.com/group/alt.possessive.its.has.no.apostrophe

[toc] | [prev] | [next] | [standalone]

#12129

On Thu, 23 Feb 2012 at 04:50:50, in comp.lang.javascript, Captain
Paralytic wrote:
>On Feb 23, 11:53 am, John G Harris <j...@nospam.demon.co.uk> wrote:
>> On Wed, 22 Feb 2012 at 14:45:49, in comp.lang.javascript, darwinist
>> wrote:
>>
>>   <snip>>On a related note, I've set it to standards mode by adding <!doctype
>> >html> and this lets it work in ie9.
>>
>>   <snip>
>>
>> <!doctype html> is an HTML5 element. HTML5 is not a standard yet; it's
>> only a working draft, so it's meaning to browsers is not certain yet.
>"...its meaning to browsers..." See:
>https://groups.google.com/group/alt.possessive.its.has.no.apostrophe

Yup, it's a typo and I did know its usage.

Are you hoping to become Thomas mk2 ?

  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#12131

On Fri, 24 Feb 2012 11:02:30 +0000, John G Harris
<john@nospam.demon.co.uk> wrote:

>On Thu, 23 Feb 2012 at 04:50:50, in comp.lang.javascript, Captain
>Paralytic wrote:

[snip]

>>> <!doctype html> is an HTML5 element. HTML5 is not a standard yet; it's
>>> only a working draft, so it's meaning to browsers is not certain yet.
>>"...its meaning to browsers..." See:
>>https://groups.google.com/group/alt.possessive.its.has.no.apostrophe
>
>Yup, it's a typo and I did know its usage.
>
>Are you hoping to become Thomas mk2 ?

     He might do a better job of it.  At least, he is not
condescending.  But, just to be sure that we get the very best, I will
throw my hat into the ring:
          Shouldn't that be "Thomas Mark II"?
(not to be confused with "Thomas Mark, Jr.")

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12130

John G Harris wrote:

> <!doctype html> is an HTML5 element.

No, it is not.

-- 
PointedEars

[toc] | [prev] | [next] | [standalone]

#12160

On Fri, 24 Feb 2012 at 14:04:43, in comp.lang.javascript, Thomas 
'PointedEars' Lahn wrote:
>John G Harris wrote:
>
>> <!doctype html> is an HTML5 element.
>
>No, it is not.

In HTML 4
   <!doctype html>
would be a markup declaration, not an element.

In HTML5 (Draft) it is itself. It might as well be thought of as a sort 
of pseudo element as the word 'element' isn't defined in the HTML5 
current draft.

   John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#12164

John G Harris wrote:

> On Fri, 24 Feb 2012 at 14:04:43, in comp.lang.javascript, Thomas
> 'PointedEars' Lahn wrote:
>> John G Harris wrote:
>>> <!doctype html> is an HTML5 element.
>> No, it is not.
> 
> In HTML5 (Draft) it is itself.

In the HTML5 working drafts it is "the doctype".

> It might as well be thought of as a sort of pseudo element as the word
> 'element' isn't defined in the HTML5 current draft.

Wrong.

<http://www.w3.org/TR/html5/#auto-toc-4>

-- 
PointedEars

[toc] | [prev] | [next] | [standalone]

#12180

On Sat, 25 Feb 2012 at 13:30:21, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>John G Harris wrote:
>
>> On Fri, 24 Feb 2012 at 14:04:43, in comp.lang.javascript, Thomas
>> 'PointedEars' Lahn wrote:
>>> John G Harris wrote:
>>>> <!doctype html> is an HTML5 element.
>>> No, it is not.
>>
>> In HTML5 (Draft) it is itself.
>
>In the HTML5 working drafts it is "the doctype".

The doctype syntactic unit is called a doctype. In other words, it is
itself. What its value, HTML, is called no-one knows.


>> It might as well be thought of as a sort of pseudo element as the word
>> 'element' isn't defined in the HTML5 current draft.
>
>Wrong.

In the Latest Published Version 'element' is not defined. In any other
context  <!doctype html>  would be called a syntactic element.

FWIW the current editor's draft does say what an 'element' is.


><http://www.w3.org/TR/html5/#auto-toc-4>

Does not define 'element'. And the # doesn't take you anywhere useful.


  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#12040

Andrew Poulos wrote:

> You know this post wouldn't smell like some sort of scam if you didn't
> use a Gmail account, used a "real name", and there weren't lots of
> examples on Google already.

I do not think it matters for one's credibility whether one uses a GMail 
account.  I would be wary condemning people only because of that; if you 
have an Android-powered mobile phone, you have little choice but to have a 
GMail account.  Sites like StackOverflow even can use GMail accounts for 
SSO.

Using Google Groups *in combination* with the rest of what you mentioned 
does matter.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#12114

In comp.lang.javascript message <e65c9531-ca7a-44d7-8f7a-76c999f5a1df@kh
11g2000pbb.googlegroups.com>, Tue, 21 Feb 2012 17:24:00, darwinist
<darwinist@gmail.com> posted:

>The canvas tag has a lot of potential but mostly flash still rules and
>I wish it didn't.
>
>I am interested in clever examples or proofs of concept of what could
>be made with canvas and javascript. As a minor incentive, if this
>thread gets at least three responses (that meet the below
>requirements), then for each of my favourite three responses, I'll
>paypal $100(AUD) to its submitter. Hopefully I'll get at least $300
>dollars worth of education out of the whole ordeal.
>
>Conditions:
>- Any code/images used are expressly released into the public domain
>so everyone can benefit from your genius.
>- The example is submitted to this thread within 24.5 hours of now (or
>by 1300 on the 23rd Feb, Sydney time).

And what is Sydney time?  A thoughtful poster would have used GMT.

I began to read your article somewhat after 2012-02-23T19:00Z; this
reply will not be available outside this system until nearly 24:00Z.

My site can be searched by Google with   canvas javascript
site:www.merlyn.demon.co.uk   and one of the pages found lists all (I
think) of my HTML canvas-using pages.

At least one of my canvases shows a moving diagram.  Some of them accept
arguments which affect what is shown.

My code can be re-used, but my images are copyright-protected.

-- 
 (c) John Stockton, nr London UK  ?@merlyn.demon.co.uk  IE8 FF8 Op11 Sf5 Cr15
   news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
   <http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
   <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[toc] | [prev] | [next] | [standalone]

#12122

On Feb 24, 7:01 am, Dr J R Stockton <reply1...@merlyn.demon.co.uk>
wrote:
> In comp.lang.javascript message <e65c9531-ca7a-44d7-8f7a-76c999f5a1df@kh
> 11g2000pbb.googlegroups.com>, Tue, 21 Feb 2012 17:24:00, darwinist
> <darwin...@gmail.com> posted:
>
> >The canvas tag has a lot of potential but mostly flash still rules and
> >I wish it didn't.
>
> >I am interested in clever examples or proofs of concept of what could
> >be made with canvas and javascript. As a minor incentive, if this
> >thread gets at least three responses (that meet the below
> >requirements), then for each of my favourite three responses, I'll
> >paypal $100(AUD) to its submitter. Hopefully I'll get at least $300
> >dollars worth of education out of the whole ordeal.
>
> >Conditions:
> >- Any code/images used are expressly released into the public domain
> >so everyone can benefit from your genius.
> >- The example is submitted to this thread within 24.5 hours of now (or
> >by 1300 on the 23rd Feb, Sydney time).
>
> And what is Sydney time?  A thoughtful poster would have used GMT.

That would have been a good idea. It is, however, trivial to find for
anyone interested:
 http://www.google.com/search?q=what+time+is+it+in+sydney

> I began to read your article somewhat after 2012-02-23T19:00Z; this
> reply will not be available outside this system until nearly 24:00Z.

Yes, one day was clearly too little.

> My site can be searched by Google with   canvas javascript
> site:www.merlyn.demon.co.uk  and one of the pages found lists all (I
> think) of my HTML canvas-using pages.
>
> At least one of my canvases shows a moving diagram.  Some of them accept
> arguments which affect what is shown.
>
> My code can be re-used, but my images are copyright-protected.

Thanks I'll check it out.

> --
>  (c) John Stockton, nr London UK  ?...@merlyn.demon.co.uk  IE8 FF8 Op11 Sf5 Cr15
>    news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
>    <http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
>    <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[toc] | [prev] | [next] | [standalone]

#12187

In comp.lang.javascript message <7ec0e3e9-16f7-46c2-9dac-55376bed3171@b9
g2000pbo.googlegroups.com>, Thu, 23 Feb 2012 20:16:38, darwinist
<darwinist@gmail.com> posted:

>> >- The example is submitted to this thread within 24.5 hours of now (or
>> >by 1300 on the 23rd Feb, Sydney time).
>>
>> And what is Sydney time?  A thoughtful poster would have used GMT.
>
>That would have been a good idea. It is, however, trivial to find for
>anyone interested:
> http://www.google.com/search?q=what+time+is+it+in+sydney

For me, <http://www.merlyn.demon.co.uk/js-date5.htm#SLGD> is easier.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web