0 votes
by (1.1k points)

OK... so I have come a long way on this code from where it was. Thanks to HiEv.

What my goal was (and is) is to make a character move around the screen, and... So far that is actually fully and completely done.

My setup is this: I have a jpg image-map and transparent png icons. I overlay the icons on the clickable map. I can then use the mouse and click Navigation links to make the icon visibly move around the map.

Basics: covered.

My goal now is to abstract that movement out a tiny bit to use WASD keystrokes instead of Nav clicks. 

To that end, I have some of the code in place in the Story JavaScriptand already... which means I can already capture keypresses and determine what key was pressed. I can also then use that keypress to click a link programmatically and do something else with it (thanks Greyelf).

What I need now is the last bit of code, (I think). I tried tying the JS to the Nav link with an ID. but it seems to be not working yet.

Here is the code and it all works as is. If you paste it into a passage and set the story format to "Sugarcube from the future (AKA 2.27)" you will have a little guy walking around. I didn't give you the image map in the code because it is just excess and would only muddy the code for what I need. But it does all work. 

Except for the keypress.

<<set _picPos = "left: 550px; top: 343px;">>
<<set _lpos = "550">>
<<set _tpos = "343">>


<<nobr>>
<<link "[<]">><<set _lpos-->><<run $("#pirate").css( { top: "343px;", left: _lpos } )>><<replace "#pirate">><<print $piratePic>><</replace>><</link>> <b>|</b> 
<<link "[^]">><<set _tpos-->><<run $("#pirate").css( { top: _tpos, left: "550px;" } )>><<replace "#pirate">><<print $piratePic>><</replace>><</link>> <b>|</b> <<link "[>]">><<set _lpos++>><<run $("#pirate").css( { top: "343px;", left: _lpos } )>><<replace "#pirate">><<print $piratePic>><</replace>><</link>><br>

       <<link "[v]">><<set _tpos++>><<run $("#pirate").css( { top: _tpos, left: "550px;" } )>><<replace "#pirate">><<print $piratePic>><</replace>><</link>>
<</nobr>>



<<set $piratePic to '<img @style="_picPos +\' width: 125px; height: 125px; position: absolute;\'"  id="pirate" alt="Private Pirate, reporting for duty, sir." src="data:image/jpg;base64,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">'>>

<<print $piratePic>>

 

Any thoughts?

3 Answers

0 votes
by (38.6k points)
selected by
 
Best answer

I think this does what you want:

<<script>>
$(document).on("keypress", function (ev) {
	var step = 5; // controls movement speed
	if (ev.shiftKey) {
		step = 10;  // go faster when SHIFT key is down
	}
	var lowKey = ev.key.toLowerCase();
	switch(lowKey) {
		case "w":
			$("#pirate").css({ top: (parseInt($("#pirate").css("top")) - step) + "px" });
			break;
		case "s":
			$("#pirate").css({ top: (parseInt($("#pirate").css("top")) + step) + "px" });
			break;
		case "a":
			$("#pirate").css({ left: (parseInt($("#pirate").css("left")) - step) + "px" });
			break;
		case "d":
			$("#pirate").css({ left: (parseInt($("#pirate").css("left")) + step) + "px" });
			break;
	}
});
<</script>>

Just put that at the bottom of your passage and it will work.  Also, if you hold down the SHIFT key, and then hit WASD, it will go faster.

That just adds a keypress event handler, and inside the handler it modifies the pirate's top and left position based on which keys are pressed.

Obviously, it's not perfect, since it only checks one key at a time, so no going diagonally or hitting SHIFT after you've started moving, and it depends on the key repeat, so it stops for a moment on the new keypress, but it at least shows you the kind of thing you'd need to do.  Monitoring keydown and keyup events to start and stop movement would probably be better, but obviously a bit more complicated.

Also, if you want to smooth the animation out a bit you can add this to your stylesheet:

#pirate {
	-webkit-transition: top 100ms, left 100ms;
	transition: top 100ms, left 100ms;
}

Anyways, hope that helps!  :-)

by (1.1k points)
How would I even know which person's to choose :D

good problem to have, I guess! Thank you both!
by (1.1k points)
OK! Sorry... have had no internet! This works perfectly! We are on the way to having something really cool get done here.
0 votes
by (61.7k points)
There are no ids here that I can see on the links. And what code are you using for the key events?
by (1.1k points)
edited by
That just shows you that I do not understand that part of it. I thought that id=pirate was  how you do that.  I have it in the image.

 Is there a way that I do not understand? Well Obviously there is but, you know what I mean.

 As for the JavaScript code I was just doing the a #  where it clicks a link that has a related ID.  

Ahh!! Wait.  So are you saying the id should have been in the link itself and that is why you didnt see it? So in other words if I had put the id=pirate in the > ^ v < then I would have it working?
0 votes
by (154k points)

There are a number of ways you can uniquely identify each of the 'direction links in your example.

note: I will be using <<link>> macros, each containing a <<run>> macro, to demostrate how to used the CSS selectors in my examples. You obviously would be using the equivelent CSS selectors within your keyboard monitoring JavaScript code instead.

1. Using a link's anchor element's relative position to it's parent element in the HTML structure.

If you wrap only the links in an ID'ed element then you could use the :nth-of-type(n) CSS pseudo-class to match each of the related anchor elements in turn, you could then use the jquery click() function to similate clicking that link,

eg. If your links were changed to looked something like the following.

<<nobr>>
<span id="map-links">
	<<link "[<]">> ... <</link>> <b>|</b> 
	<<link "[^]">> ... <</link>> <b>|</b> 
	<<link "[>]">> ... <</link>><br> 
	<<link "[v]">> ... <</link>>
</span>
<</nobr>>

... then the related CSS selectors used to 'click' each one of them would look something like the following..

<<link "Click Left">>
	<<run $('#map-links a:nth-of-type(1)').click()>>
<</link>>
<<link "Click Up">>
	<<run $('#map-links a:nth-of-type(2)').click()>>
<</link>>
<<link "Click Right">>
	<<run $('#map-links a:nth-of-type(3)').click()>>
<</link>>
<<link "Click Down">>
	<<run $('#map-links a:nth-of-type(4)').click()>>
<</link>>


2. Wrapping each link's anchor element within an uniquely ID'ed parent element.

This is similar to point 1 except that multiple IDed wrapping elements are used, so if your example was changed to look something like this..

<<nobr>>
<span id="map-left"><<link "[<]">> ... <</link>></span> <b>|</b> 
<span id="map-up"><<link "[^]">> ... <</link>></span> <b>|</b> 
<span id="map-right"><<link "[>]">> ... <</link>></span> <br>
<span id="map-down"><<link "[v]">> ... <</link>></span>
<</nobr>>

... then the related CSS select used to 'click' each one of them would look somthing like the following..

<<link "Click Left">>
	<<run $('#map-left a').click()>>
<</link>>
<<link "Click Up">>
	<<run $('#map-up a').click()>>
<</link>>
<<link "Click Right">>
	<<run $('#map-right a').click()>>
<</link>>
<<link "Click Down">>
	<<run $('#map-down a').click()>>
<</link>>

 

by (1.1k points)
Wow. This is deep. Probably amazing. I have to see if it goes.

Thank you so much.

Frankly I am surprised this is not already in the cookbook (meaning the ability to move an icon around with a click).

I was able to easily do it with the dungeon crawl that is in there.

Anyway thank you immensely. I will check it out and vote this up.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...