Having problems with keyboard inputs for my game

sora · April 30, 2016

I'm working on a game and I'm trying to get the main character to move left and right while playing an animation. The animation plays and the character moves in the correct direction, when I press the arrow keys however the character teleports across the screen really fast, you can just about see the running animation play.

I can get the animation to go smoothly and even the character moving in any direction I want, its only when I try to apply the keyboard events I get this problem.

I'm still a beginner so I have no clue why this is happening, I have been stuck on this for a solid month now.

Its not much so I'll post all the code here and a zip file containing my game. Thanks for any help.

 
	&lt;html&gt;
	 &lt;head&gt;
	  &lt;script type="application/javascript"&gt;
	  
	  //Image 
	//var   sx = count;
	var sy=64;
	var sw=32;
	var sh=32;
	var  dx=0;
	var ypos=353;
	var  dw=32;
	var dh=32;
	  xpos=50;
	  var count=0;
	  var count1=0;
	  var bulletxpos= xpos+27;
	  var bulletypos= ypos+23;
	  
	  
	     var bullets = new Image ();
	   var shot = new Image ();
	   bullets.src="Img/bullet.png";
	shot.src="Img/shot.png"
	 
	function draw() {
	//Create Canvas
	 
	 var canvas = document.getElementById("canvas");
	     
	   var ctx = canvas.getContext("2d");
	 
	  //Draw images on canvas
	  
	     var pic= new Image ();
	     var bullet=new Image ();
	   var deku= new Image ();
	     var img= new Image ();
	     dekub= new Image ();
	     
	     
	 
	  
	pic.src="Img/Background.png";
	deku.src="Img/deku.png";
	img.src="Img/Spritesheet1.png";
	;
	//LOAD BACKGROUND  
	pic.addEventListener("load", function () {ctx.drawImage (pic,0,0) }, false);
	             //LOAD MAIN CHARACTER
	            img.addEventListener ("load", function stand () {ctx.drawImage (img, count, sy, sw, sh, xpos, ypos, dw, dh) }, false);
	
	//BUTTONS
	window.addEventListener("keydown", checkkey, false);
	window.addEventListener("keydown", checkkeypress,  false);
	window.addEventListener("keyup", checkup, false);
	window.addEventListener ("keyup", checkkeyup, false);
	
	//RIGHT KEY PRESS
	function checkkey (key) {
	if (key.keyCode==39) {
	xpos=xpos+3;
	sy=0;
	if (count ==768) 
	count=0
	else count=count+32;
	}
	}
	//LEFT KEY PRESS
	function checkkeypress (key) {
	if (key.keyCode==37) {
	xpos=xpos-3;
	sy=32;
	if (count ==736) 
	count=0
	else count=count+32;  
	}
	}
	//RIGHT KEY RELEASE
	function checkup (key) {
	if (key.keyCode==39) {
	  sy=64;
	   if (count==480)
	    count=0; 
	    
	    else count=count+32;
	    }
	    }
	//LEFT KEY RELEASE
	function checkkeyup (key) {
	if (key.keyCode==37) {
	  sy=96;
	   if (count==480)
	    count=0; 
	    
	    else count=count+32;
	    }
	    }
	
	//ANIMATION SPEED
	setTimeout(draw, 30);
	  
	           
	    //STAND AMIMATION
	     if (count==480)
	    count=0; 
	    
	    else count=count+32;
	    
	       
	  
	     }//END OF DRAW FUNCTION
	   
	 
	      
	            
	 
	    &lt;/script&gt;
	 &lt;/head&gt;
	 &lt;body onload="draw ()"&gt;
	   &lt;canvas id="canvas" width="640" height="400"&gt;&lt;/canvas&gt;
	   &lt;canvas id="toy" width="18" height="32"&gt;&lt;/canvas&gt;
	 &lt;/body&gt;
	&lt;/html&gt;

Deku Blaster(0).zip

mattstyles · May 4, 2016

The key listener triggers pretty fast, the initial one is slow but after that its pretty quick, by adding 3 each time it won't take long to trigger 200 times which is almost the total width of your canvas.

Either move less per keypress, or create a wrapper that emits events less often. It's often handy to use a wrapper to standardise keypresses for games, the standard behaviour of slow first event then consistent works fine for most applications but is generally terrible for gaming. I've created my own called quay, but there are lots of other ones.

An even better approach is to work out how far your objects should move based on stuff like frame rate etc etc but thats a more involved solution.

lightest · May 6, 2016

To be honest - don't know why you having your issue. But I wrote an article quite some time ago to sort of try myself in it. It is about very basic stuff aimed to help those who start in JS gamedev. If you're interested specifically about keyboard input in games scroll down to Controls section. The article: http://codepen.io/lightest/post/jumpy

Sign In

Having problems with keyboard inputs for my game

Recommended Posts

sora

Link to comment

Share on other sites

mattstyles

Link to comment

Share on other sites

lightest

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity