Jump to content

  • Log In with Google      Sign In   
  • Create Account

We're offering banner ads on our site from just $5!

1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


#ActualPatriarch K

Posted 18 February 2013 - 11:37 AM

I have a stupid problem at the moment when learning JavaScript. I just want to move this simple image, but it doesn't work at all. Can someone see the problem? I will remove all the not so important code. I need some kind of repaint method or somethin I think. How shall I solve this?

 

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
     
   var paddle;
   var score;
   var timer;
   var dx = 0;
   var dy = 0;
   var paddleX = 300;
   var paddleY = 50;
   var s1x = -1;
   var s1y = 0;
   var star1X = 0;
   var star1Y = 0;
var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

   
function init(){
   paddle = document.getElementById('paddle');
   document.onkeydown = keyListener; 
   document.onkeyup = keyListener;
   timer = setTimeout('init()',50);
   move();
   keyMoving();
}

function keyListener(e){

}

imageObj.onload = function() {
        context.drawImage(imageObj, paddleX, paddleY);
      };
        imageObj.src = 'ball.PNG';  



function keyMoving(){
  
 document.onkeydown = function(event) {
 event = event || window.event;

 var e = event.keyCode;

// Left
   if(e==37){
      dx = -4;    
   }
  
//Up
 if(e==38){
      dy = -4;  
   }
// Right
   if(e==39){
      dx = 4;
   }
 
// Down
   if(e==40){
     dy = 4;   
   }
}
}

function move(){
paddleX += dx;
paddleY += dy;
}

</script>
  </body>
</html>

#1Patriarch K

Posted 18 February 2013 - 11:36 AM

I have a stupid problem at the moment when learning JavaScript. I just want to move this simple image, but it doesn't work at all. Can someone see the problem? I will remove all the not so important code. I need some kind of repaint method or somethin I think. How shall I solve this?

 

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
     
   var paddle;
   var score;
   var timer;
   var dx = 0;
   var dy = 0;
   var paddleX = 300;
   var paddleY = 50;
   var s1x = -1;
   var s1y = 0;
   var star1X = 0;
   var star1Y = 0;
var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

   
function init(){
   paddle = document.getElementById('paddle');
   document.onkeydown = keyListener; 
   document.onkeyup = keyListener;
   timer = setTimeout('init()',50);
   move();
   keyMoving();
}

function keyListener(e){

}

imageObj.onload = function() {
        context.drawImage(imageObj, paddleX, paddleY);
      };
        imageObj.src = 'ball.PNG';  



function keyMoving(){
  
 document.onkeydown = function(event) {
 event = event || window.event;

 var e = event.keyCode;

// Left
   if(e==37){
      dx = -4;    
   }
  
//Up
 if(e==38){
      dy = -4;  
   }
// Right
   if(e==39){
      dx = 4;
   }
 
// Down
   if(e==40){
     dy = 4;   
   }
}
/////////////////////////

 document.onkeyup = function(event) {
 event = event || window.event;

 var e = event.keyCode;

// Left
   if(e==37){
      dx = 0;        
   }
  
//Up
 if(e==38){
      dy = 0;   
   }
// Right
   if(e==39){
      dx = 0;
   }
 
// Down
   if(e==40){
     dy = 0;   
   }
}
}

function move(){
paddleX += dx;
paddleY += dy;
}

</script>
  </body>
</html>

 

 


PARTNERS