Keyboard events not working with images...

Page 1 of 1

12 Replies - 1261 Views - Last Post: 20 December 2012 - 10:42 AM

#1 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Keyboard events not working with images...

Posted 18 December 2012 - 12:20 PM

Basically, the red sq image immediately starts moving up once the website loads, once i press the s key it stops, but it is then no longer able to move. This does not happen with the black square, which moves up and down as intended.

I cant seem to point to a specific problem as no errors appear when using the developer tools.

The html file only has a <body onload="on_load();"> function, as well as div id image tags, and the javascript src.


var x = 0
var player1y = 0;
var player2y = 0;
var elem;
var elem2;
var UP=38, DOWN=40, UP2=87, DOWN2=83;
var up_pressed = down_pressed  = false;
var up2_pressed = down2_pressed = false;
var MOVE_INC = 4;


function key_down(key_code) {
	 if (key_code == DOWN) {
		down_pressed = true;
	} else if (key_code == UP) {
		up_pressed = true;
	}
	}
	{
	 if (key_code = DOWN2) {
	 down2_pressed = true;
	 } else if (key_code == UP2) {
	 up2_pressed = true;
	 }
	 }
	 {
	console.debug("::"+key_code);
}


function key_up(key_code) {
	 if (key_code == DOWN) {
		down_pressed = false;
	} else if (key_code == UP) {
		up_pressed = false;
	}
	 if (key_code == DOWN2) {
	 down2_pressed = false;
	 } else if (key_code == UP2) {
	 up2_pressed = false;
	 }
}

function loop() 
{	
{	var elem = document.getElementById("sq1");
	elem.style.position="absolute";
	elem.style.left = x+"px";
	elem.style.top = player1y+"px";
	if (down_pressed) {
		player1y+=MOVE_INC;
	}
	if (up_pressed) {
		player1y-=MOVE_INC;
	}
}

{	var elem2 = document.getElementById("sq2");
	elem2.style.position="absolute";
	elem2.style.left = x+"px";
	elem2.style.top = player2y+"px";
	if (down2_pressed) {
		player2y-=MOVE_INC;
	}
	if (up2_pressed) {
		player2y+=MOVE_INC;
	}
}
	
	window.setTimeout("loop()", 50);
}
	

function on_load() {
	window.addEventListener('keydown', function(evt) {
			key_down(evt.keyCode);
		},true);
	window.addEventListener('keyup', function(evt) {
			key_up(evt.keyCode);
		},true);
    loop();	
}

This post has been edited by modi123_1: 18 December 2012 - 12:24 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Keyboard events not working with images...

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 6438
  • View blog
  • Posts: 23,430
  • Joined: 12-June 08

Re: Keyboard events not working with images...

Posted 18 December 2012 - 12:23 PM

*sigh* Try and get a better topic title ("Image gone AWOL") next time.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:15 PM

you are aware that the key_down() function ends on line #18?

can I safely assume that sq2 is the red square?

This post has been edited by Dormilich: 18 December 2012 - 01:18 PM

Was This Post Helpful? 0
  • +
  • -

#4 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:23 PM

Yes, you can.

Thanks - didn't realise, silly error >.<, still isn't fixed but at least i can stop pulling my hair out now and try and get back to figuring it out.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,323
  • Joined: 12-December 12

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:25 PM

On line 20 key_code = DOWN2 is an assignment; testing for equality requires == (or even ===).
Was This Post Helpful? 1
  • +
  • -

#6 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:33 PM

haha thats so frustrating!, thanks that part is all done now.

the next step is to fix a boundary around a image so that the squares move up and down in a fixed area...

am i right in thinking that it has something to do with setting border variables?, such as:

var bottomborder=500
var topborder=-28
var leftborder=10
var rightborder=600
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:38 PM

why not going for <canvas>? this way you don’t have to concern yourself with boundaries.
Was This Post Helpful? 0
  • +
  • -

#8 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:46 PM

With any luck, the finished product will be an image of a ball with a randomly generated motion path, once it collides with either one of the squares they disappear, basically i am trying a game similar to the board game hungry hippos. Ideally there would be multiple balls with a score system in place, but im thinking small for the moment. I've been told by my tutor that i should not use a canvas, and should focus on using purely javascript, as apparantly it will just overcomplicate things.
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: Keyboard events not working with images...

Posted 18 December 2012 - 01:49 PM

can’t follow on that. whether I draw a path on a window or a canvas is IMO no different. it’s just the display method that differs.
Was This Post Helpful? 0
  • +
  • -

#10 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Re: Keyboard events not working with images...

Posted 19 December 2012 - 10:35 AM

Still struggling with setting the boundary.

Think i have some of it figured out, however i am unsure what to set the variable names for PB_TOP, PB_WIDTH, PB_LEFT etc.

i thought it would be something like

var PB_HEIGHT=<div id="PB"<IMG STYLE="Height:300px" SRC = "Images/playboard.png"></div>


however, that isn't working.
The whole application now is not working, which i assume because of editing the code, below is the part i am adding to in order to create the boundary.

{	var elem = document.getElementById("sq2");
	elem.style.position="absolute";
	elem.style.left = x+"px";
	elem.style.top = player1y+"px";
	if (down_pressed) {
	if(player1y+MOVE_INC <= PB_HEIGHT)
		player1y+=MOVE_INC;
	}
	if (up_pressed) {
	if(player1y-MOVE_INC <= PB_TOP)
		player1y-=MOVE_INC;
	}
}


anyone know where im going wrong?
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,323
  • Joined: 12-December 12

Re: Keyboard events not working with images...

Posted 19 December 2012 - 11:37 AM 

var PB_HEIGHT=<div id="PB"<IMG STYLE="Height:300px" SRC = "Images/playboard.png"></div>

What should PB_HEIGHT be? A string..? In which case you have to escape the (nested) quotes or, preferably, switch to apostrophes. But the opening div is missing ">". But I'm suspicious as to what it should be as your are naming it HEIGHT(?).

var PB_HEIGHT = "<div id='PB'><img style='height:300px' src='Images/playboard.png'></div>";

But img-tags have height and width attributes which you should use in preference to css:
<img height='300px' width='whateverpx' src='Images/playboard.png' alt='alternative text'>

Was This Post Helpful? 0
  • +
  • -

#12 Fatt101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-December 12

Re: Keyboard events not working with images...

Posted 19 December 2012 - 12:09 PM

<div id="PB"><IMG STYLE="position:absolute; TOP:150px; LEFT:400px; WIDTH:400px; HEIGHT:300px" SRC="Images/playboard.png"></div>

That is what i am trying to refer to, which is located within the <body> tag.

I am trying to move the image of the square between two fixed points, the top and bottom of the image 'playboard'.
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,323
  • Joined: 12-December 12

Re: Keyboard events not working with images...

Posted 20 December 2012 - 10:42 AM

Quote

That is what i am trying to refer to

If you want to refer to the element then:

var theDiv = document.getElementById("PB");
theDiv.style.whatever = "value";

or, if you then want to refer to the contained image:
var theImage = theDiv.getElementsByTagName("IMG")[0]; // the first image
theImage.src = "someotherimage.gif"; // etc..

..but I may have misunderstood your requirement :dontgetit:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1