hudwol

Character movement (No Engine)

Recommended Posts

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");	});

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

It is best if you use a flag and have the character movement done in the game loop. So when you press a key, a command turns true and therefore rendered by the game loop as long as it remains true. This will avoid movement delays, and the command remains general where you can add another command for the same flag. In a bigger architecture, you may need observer pattern to handle this so it can work across multiple user inputs (touch, keyboards, controller, etc)

Example:

var isMovingUp = false;window.addEventListener("keyDown, function(k) {    switch(k.keyCode) {        case 87:        isMovingUp = true;        ...    }});window.addEventListener("keyUp, function(k) {    switch(k.keyCode) {        case 87:        isMovingUp = false;        ...    }});// called by game loopfunction update(dt) {    if (isMovingUp) {        hero.y = hero.y + 32;    }}

This is a general issue in any game development with any language/framework where everyone may have their own implementation based on their needs, so every tutorial may have their own examples to show it.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.