Jump to content

View more

Image of the Day

Boxes as reward for our ranking mode. ヾ(☆▽☆)
#indiedev #gamedev #gameart #screenshotsaturday https://t.co/ALF1InmM7K
IOTD | Top Screenshots

The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.


Sign up now

Can anyone work out what is wrong with this code?

4: Adsense

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   

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.


#2 ApochPiQ   Moderators   

22538
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.
Wielder of the Sacred Wands
[Work - ArenaNet] [Epoch Language] [Scribblings]

#3 JackBid   Members   

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   Members   

595
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   

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.