Jump to content

  • Log In with Google      Sign In   
  • Create Account

Can anyone work out what is wrong with this code?


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
4 replies to this topic

#1 JackBid   Members   -  Reputation: 453

Like
0Likes
Like

Posted 11 January 2013 - 02:12 PM

Hi, I am working on and html5 javascript game, and I recently just added keyboard input. The concept is that whenever and arrow key is pressed, it updates the position of the shape in the html5 canvas. I thought it was working fine, however after testing, the shapes seem to have some velocity to them, when you hold down the arrow key they seem to pick up speed. I am still new to game development, so it may just be a stupid mistake on my part. Here is the code:

 

 

<!DOCTYPE html>
 
<html>
<head>
<title>Making things move</title>
<meta charset="utf-8">
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<style type="text/css">
canvas
{
border: 2px solid gray;
background-color: black;
}
</style>
 
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
 
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
 
var x = 0;
var y = 0;
 
var xWidth = 30;
var yHeight = 30;
 
function MoveLeft(){
x -= 1;
};
function MoveUp(){
y -= 1;
};
function MoveRight(){
x += 1;
};
function MoveDown(){
y += 1;
};
 
 
function GameLoop(){
 
window.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
 
  case 37: 
  MoveLeft();
  break;
 
    case 38: 
      MoveUp();
    break;
 
    case 39: 
    MoveRight();
    break;
 
    case 40: 
      MoveDown();
    break;
  }
}, false);
 
if(x + xWidth >= canvasWidth){
x = canvasWidth - xWidth;
}else if(x <= 0){
x = 0;
}
 
if(y + yHeight >= canvasHeight){
y = canvasHeight - yHeight;
}else if(y <= 0){
y = 0;
}
 
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle="rgb(238, 64, 0)";
context.fillRect(x, y, xWidth, yHeight);
 
setTimeout(GameLoop, 33);
};
 
GameLoop();
 
 
 
});
</script>
</head>
 
<body>
<canvas id="myCanvas" width="800" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
 
Just to further explain what is going on, the game loop is running every 33 milliseconds and when it does that it clears the entire canvas and then draws a new one based on the x and y variables which increase or decrease based on the keyboard input.


Sponsor:

#2 ApochPiQ   Moderators   -  Reputation: 15698

Like
2Likes
Like

Posted 11 January 2013 - 04:06 PM

If I read this correctly, you add a new key handler every frame. This means that after 3 frames, you'll handle every key press 3 times.

#3 JackBid   Members   -  Reputation: 453

Like
0Likes
Like

Posted 11 January 2013 - 04:59 PM

If I read this correctly, you add a new key handler every frame. This means that after 3 frames, you'll handle every key press 3 times.

I think this was the problem, thank you very much!



#4 Poigahn   Crossbones+   -  Reputation: 519

Like
0Likes
Like

Posted 11 January 2013 - 06:10 PM

You could further simplify your code by making a simple line change

 

  Case 37 : X-=1; // MoveLeft

 

So on and So Forth


Your Brain contains the Best Program Ever Written : Manage Your Data Wisely !!


#5 JinixVomitorium   Members   -  Reputation: 151

Like
0Likes
Like

Posted 12 January 2013 - 09:59 AM

you can also do your boundaries inside your movement functions with if statements. 

EX:

moveDown()

if (y+1 < canvasHeight()  {y+=1;}

 

It will take out several unnecessary lines of code. :P


add me on skype, i need some new associates for coding.

skype: daniel.lamonds

c++, Visual basic, fortran, html/5, css, php,java script, sql, others......





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS