sprite movement pauses on initial keydown ?

vmars316 · April 20, 2016

Hello & Thanks ,

In my game , I check for leftArrow and rightArrow down to move sprite (Thrower) ,

and also for keyup , to stop movement .

But I am getting sprite movement pauses on all keydown ?

Is there a way to speed things up ?

See/run game (so far) :

http://liesandcowpies.com/javascript/BenghaziGame-starter-04-ThrowerONLY.html

Thanks

Edited April 20, 2016 by vmars316

vmars316 · April 20, 2016

Oops , <> not working , here's the code:

 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>move pieThrower</title>
 
<!--  [url=http://liesandcowpies.com/javascript/]http://liesandcowpies.com/javascript/[/url]  -->
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
#assets {
       visibility: hidden;
}
</style>
</head>
<body onload="startGame()">
 
    fromWhere= <span id="fromWhere">fromWhere</span><br>  
    idTag= <span id="idTag">idTag</span><br>  
    this.idTag= <span id="thisIdTag">this.idTag</span><br>  
    this.visible= <span id="this.visible"> this.visible</span><br>  
    this.tripsMax= <span id="this.tripsMax"> this.tripsMax</span><br>  
    this.tripsCnt= <span id="this.tripsCnt"> this.tripsCnt</span><br>  
    this.directionX= <span id="this.directionX"> this.directionX</span><br>  
    this.x= <span id="this.x"> this.x</span><br>  
thrower x,y,w,h= <span id="thrower.xywh">thrower.x,y,w,h</span><br>
 
    <div align="center">
<table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width:70%";><p id="traceMsg">traceLog goes here:</p>
 </td>
      <td style="width:30%";> <canvas id="canvas" width="300" height="300"></canvas>
</td>
    </tr>
  </tbody>
</table>
    </div>
<div id="assets">
<img id="truth01" src="sprites/truth01.png" width="64" height="64" />
<img id="truth02" src="sprites/truth02.png" width="64" height="64" />
<img id="lies01" src="sprites/lies01.png" width="64" height="64" />
<img id="lies02" src="sprites/lies02.png" width="64" height="64" />
<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />
<img id="thrower" src="sprites/thrower.png" width="64" height="64" />
 
     <audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>
    </div> 
 
<script type='text/javascript'>
//
var oneTraceLine = ""; var traceYESorNO = false; var updateFor1stTime = 0;
var fromWhere = "fromWhere"; var  timesInTripsCk=0; var visible = true; 
var thisx=0; var tripsMax=0; priorTripsMax = 0; 
var thisIdTag; var holdThrower_x = 0;
var  idTag = "truth01"; var idTagTh = "thrower";
var  tripsCnt=0; var  directionX=1 ; var addit = 0; 
//
    canvas = document.getElementById("canvas"); // get the canvas
    ctx = canvas.getContext('2d'); // create canvas Context;
var targetImgsCnt = 0; var idTag = "truth01"; var totalTrips = 0;
 
var targetImgs = [document.getElementById("truth01"), 
                            document.getElementById("lies01"), //,
                            document.getElementById("truth02"),
                            document.getElementById("lies02"),
document.getElementById("thrower")
] ;  
//
 
//
function startGame() { 
 
var Thrower = function () {
         var self = this;
         this.idTag = 'thrower';
         this.x = (canvas.width / 2);
         this.y = canvas.height - 64;
         this.width= 64;
         this.height = 64;
         this.speedX = 1;
         this.speedY = 0;
this.visible = true;
         this.directionX = 5;
this.moveMe = false ; 
         this.update = function() { 
                self.x = self.x + (self.speedX * self.directionX);   // always either +1 or -1 } 
                self.moveMe = false ; 
}
    }
//
    thrower = new Thrower();
        thrower.idTag ; // = 'thrower';
        thrower.x ;  // = 0; 
        thrower.y ; // = canvas.height - 64;
        thrower.width ; // = 64;
        thrower.height ; // = 64;
        thrower.speedX ; // = 1;
        thrower.speedY ; // = 0;
thrower.visible ; // = true ;
        thrower.directionX ; // = 1;
        thrower.moveMe ; // = true ; 
//
 
    myGameArea.start();
}
 
//
function updateGameArea() { 
    myGameArea.clear();
   targetImgsCnt = 4;
        if(thrower.visible) { 
     if(thrower.moveMe) {thrower.update();}
        ctx.drawImage(targetImgs[targetImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);
/*120*/ document.getElementById("thrower.xywh").innerHTML = thrower.x;  
 
}
}
//
var myGameArea = {
    start : function() {
   thrower.moveMe = false ; 
        interval = setInterval(updateGameArea, 5); 
//           updateGameArea();
        },
    clear : function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}
//
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("mousemove", mouseMoveHandler, false);
   
   function keyDownHandler(e) {
        if(e.keyCode == 39 || event.keyCode == 68) {
//            rightPressed = true;
//    alert("keyDownHandler: rightPressed");
thrower.directionX = 7;
thrower.moveMe = true;
        }
        else if(e.keyCode == 37 || event.keyCode == 65) {
//            leftPressed = true;
//    alert("keyDownHandler: leftPressed");
thrower.directionX = -7;
thrower.moveMe = true;
}
    }
    function keyUpHandler(e) {
        if(e.keyCode == 38 || event.keyCode == 87) {
            rightPressed = false;
        }
        else if(e.keyCode == 40 || event.keyCode == 83) {
            leftPressed = false;
        }
    }
    function mouseMoveHandler(e) {
        var relativeX = e.clientX - canvas.offsetLeft;
// alert("function mouseMoveHandler(e)"); 
    }
//
 
//
</script>
</body>
</html>

justsomeguy · April 20, 2016

After updating the position you set moveme to false, so it does not move the next update. Instead it only ever moves when a keydown event fires which sets moveme back to true. You shouldn't reset moveme after it moves if the key is still down. Only the key handlers should determine where and how it's moving. The main loop should just figure out if anything needs to move at that time, not change the other state of the game as far as key presses.

Sign In

sprite movement pauses on initial keydown ?

Recommended Posts

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity