Character movement (No Engine)

[hudwol]

I am getting lost in this whole endeavor of HTML/JS game development because every tutorial I go through seems to do things completely differently or uses a completely different engine. So I decided to take a break and try to figure some things out on my own.

 

I wrote this code for my character movement. I have not had the chance to try it yet because the rest of my world is not set up. I just wanted to drop it here and see if you guys think it would work or not. Basically, it's just an event listner (for a key press) with a switch in the function to determine direction.

window.addEventListener("keyDown", function(k) {	switch(k.keyCode) {	case 87: // Up with W key.		hero.src = "assets/faceUp.png";		if (hero.y >= 320) {			break;		} else {			hero.y = hero.y + 32;			break;		};		console.log("Up");	case 83: // Down with S key.		hero.src = "assets/faceDown.png";		if (hero.y <= 0) {			break;		} else {			hero.y = hero.y - 32;			break;		};		console.log("Down");	case 65: //Left with A key.		hero.src = "assets/faceLeft.png";		if (hero.x <= 0) {			break;		} else {			hero.x = hero.x - 32;			break;		};		console.log("Left");	case 68: //Right with D key.		hero.src = "assets/faceRight.png";		if (hero.x >= 320) {			break;		} else {			hero.x = hero.x + 32;			break;		};		console.log("Right");	});

[mattstyles]

Well, yeah, it'll work, nothing much wrong with it.

 

You'll never reach your console logs though.  You'll want to preload those images so that they cache otherwise you'll have to wait for them to load when your game first fires up, it looks like `hero` references an image element and you're changing source, if that is the case then you'll need to manipulate the element style to move it, either use transforms or apply your x and y values to `style.top` and `style.left` to update the DOM. Of course if you've created your own canvas renderer then update however you update!

 

If it is DOM then by using `background-image` you can create a spritesheet and change the background position to grab each frame from the spritesheet.

 

You will have the repeating button problem though, the 2nd keydown event will be delayed, after that it picks up speed and is consistent. This is often acceptable (still weird) for games where you move a square at a time but it looks like you want smooth movement. I think `Phaser` keyboard code solves this problem (I'd be surprised if it didnt), otherwise I've written a small library that converts keypresses into event streams so you'll get consistent results from keypresses.

 

 

 

I am getting lost in this whole endeavor of HTML/JS game development because every tutorial I go through seems to do things completely differently or uses a completely different engine. So I decided to take a break and try to figure some things out on my own.

 

Ha ha, welcome to JS! If you think the JS gaming ecosystem is complicated wait until you see the web-app world! It's part of what is making JS great so embrace it, try to get good at reading library documentation, that should be up-to-date and reflective of the library. The JS world changes very very quickly and people dont always update their tutorials to match, although the principles usually work, its just the implementation. As a very general rule of thumb, if a developer (or team) have worked hard to create good documentation (including maybe dedicated forum space and definitely replying to issue trackers) then they care about their users—this means they care about their product and usually results in a far better result over time, if you find good documentation for a library/service (and the feature-set matches your requirements) you'll probably be on to a winner.

[GBeebe]

Here's my keyboard snippet:

var autoKeyUpCheck = true;function keyDown(e){		e.preventDefault();				//console.log(e.keyCode);		//show key code	if (key[e.keyCode] == false || key[e.keyCode] == undefined) {		key[e.keyCode] = true;		key[kAny] = true;	}				}function keyUp(e){	e.preventDefault();	if (autoKeyUpCheck == true) {			key[e.keyCode] = false;		key[kAny] = false;	}	}					window.addEventListener('keydown', keyDown, true);window.addEventListener('keyup', keyUp, true);var key = [];var kUp = 38; var kDown = 40;var kLeft = 37;	var kRight = 39;var kA = 65;var kD = 68;var kS = 83;var kW = 87;var kX = 88;var kY = 89;var kZ = 90;var kAny = 0;

Anywhere in your game you can check if (key[kUp] == true) to see if the player's pressing the up key. (more keys can be added of course).  If you want to restrict a player from rapidly tapping a key for shooting at a constant speed or restrict double jumping, you can set autoKeyUpCheck = false; and then set the key value to false when you're ready for another keypress.