i need help with this peace of code

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.

i need help with this peace of code

Postby drag0natt3r » Sun Jul 02, 2017 2:16 am

i have this code
Code: Select all
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
var ctx = null;
var gameMap = [
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0,
   0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0,
   0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0,
   0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0,
   0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0,
   0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
var tileW = 40, tileH = 40;
var mapW = 20, mapH = 20;
var currentSecond = 0, frameCount = 0, framesLastSecond = 0, lastFrameTime = 0;

var keysDown = {
   37 : false,
   38 : false,
   39 : false,
   40 : false
};

var viewport = {
   screen      : [0,0],
   startTile   : [0,0],
   endTile      : [0,0],
   offset      : [0,0],
   update      : function(px, py) {
      this.offset[0] = Math.floor((this.screen[0]/2) - px);
      this.offset[1] = Math.floor((this.screen[1]/2) - py);

      var tile = [ Math.floor(px/tileW), Math.floor(py/tileH) ];

      this.startTile[0] = tile[0] - 1 - Math.ceil((this.screen[0]/2) / tileW);
      this.startTile[1] = tile[1] - 1 - Math.ceil((this.screen[1]/2) / tileH);

      if(this.startTile[0] < 0) { this.startTile[0] = 0; }
      if(this.startTile[1] < 0) { this.startTile[1] = 0; }

      this.endTile[0] = tile[0] + 1 + Math.ceil((this.screen[0]/2) / tileW);
      this.endTile[1] = tile[1] + 1 + Math.ceil((this.screen[1]/2) / tileH);

      if(this.endTile[0] >= mapW) { this.endTile[0] = mapW-1; }
      if(this.endTile[1] >= mapH) { this.endTile[1] = mapH-1; }
   }
};

var player = new Character();

function Character()
{
   this.tileFrom   = [1,1];
   this.tileTo      = [1,1];
   this.timeMoved   = 0;
   this.dimensions   = [30,30];
   this.position   = [45,45];
   this.delayMove   = 700;
}
Character.prototype.placeAt = function(x, y)
{
   this.tileFrom   = [x,y];
   this.tileTo      = [x,y];
   this.position   = [((tileW*x)+((tileW-this.dimensions[0])/2)),
      ((tileH*y)+((tileH-this.dimensions[1])/2))];
};
Character.prototype.processMovement = function(t)
{
   if(this.tileFrom[0]==this.tileTo[0] && this.tileFrom[1]==this.tileTo[1]) { return false; }

   if((t-this.timeMoved)>=this.delayMove)
   {
      this.placeAt(this.tileTo[0], this.tileTo[1]);
   }
   else
   {
      this.position[0] = (this.tileFrom[0] * tileW) + ((tileW-this.dimensions[0])/2);
      this.position[1] = (this.tileFrom[1] * tileH) + ((tileH-this.dimensions[1])/2);

      if(this.tileTo[0] != this.tileFrom[0])
      {
         var diff = (tileW / this.delayMove) * (t-this.timeMoved);
         this.position[0]+= (this.tileTo[0]<this.tileFrom[0] ? 0 - diff : diff);
      }
      if(this.tileTo[1] != this.tileFrom[1])
      {
         var diff = (tileH / this.delayMove) * (t-this.timeMoved);
         this.position[1]+= (this.tileTo[1]<this.tileFrom[1] ? 0 - diff : diff);
      }

      this.position[0] = Math.round(this.position[0]);
      this.position[1] = Math.round(this.position[1]);
   }

   return true;
}

function toIndex(x, y)
{
   return((y * mapW) + x);
}

window.onload = function()
{
   ctx = document.getElementById('game').getContext("2d");
   requestAnimationFrame(drawGame);
   ctx.font = "bold 10pt sans-serif";

   window.addEventListener("keydown", function(e) {
      if(e.keyCode>=37 && e.keyCode<=40) { keysDown[e.keyCode] = true; }
   });
   window.addEventListener("keyup", function(e) {
      if(e.keyCode>=37 && e.keyCode<=40) { keysDown[e.keyCode] = false; }
   });

   viewport.screen = [document.getElementById('game').width,
      document.getElementById('game').height];
};

function drawGame()
{
   if(ctx==null) { return; }

   var currentFrameTime = Date.now();
   var timeElapsed = currentFrameTime - lastFrameTime;

   var sec = Math.floor(Date.now()/1000);
   if(sec!=currentSecond)
   {
      currentSecond = sec;
      framesLastSecond = frameCount;
      frameCount = 1;
   }
   else { frameCount++; }

   if(!player.processMovement(currentFrameTime))
   {
      if(keysDown[38] && player.tileFrom[1]>0 && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]-1)]==1) { player.tileTo[1]-= 1; }
      else if(keysDown[40] && player.tileFrom[1]<(mapH-1) && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]+1)]==1) { player.tileTo[1]+= 1; }
      else if(keysDown[37] && player.tileFrom[0]>0 && gameMap[toIndex(player.tileFrom[0]-1, player.tileFrom[1])]==1) { player.tileTo[0]-= 1; }
      else if(keysDown[39] && player.tileFrom[0]<(mapW-1) && gameMap[toIndex(player.tileFrom[0]+1, player.tileFrom[1])]==1) { player.tileTo[0]+= 1; }

      if(player.tileFrom[0]!=player.tileTo[0] || player.tileFrom[1]!=player.tileTo[1])
      { player.timeMoved = currentFrameTime; }
   }

   viewport.update(player.position[0] + (player.dimensions[0]/2),
      player.position[1] + (player.dimensions[1]/2));

   ctx.fillStyle = "#000000";
   ctx.fillRect(0, 0, viewport.screen[0], viewport.screen[1]);

   for(var y = viewport.startTile[1]; y <= viewport.endTile[1]; ++y)
   {
      for(var x = viewport.startTile[0]; x <= viewport.endTile[0]; ++x)
      {
         switch(gameMap[((y*mapW)+x)])
         {
            case 0:
               ctx.fillStyle = "#685b48";
               break;
            default:
               ctx.fillStyle = "#5aa457";
         }

         ctx.fillRect( viewport.offset[0] + (x*tileW), viewport.offset[1] + (y*tileH),
            tileW, tileH);
      }
   }

   ctx.fillStyle = "#0000ff";
   ctx.fillRect(viewport.offset[0] + player.position[0], viewport.offset[1] + player.position[1],
      player.dimensions[0], player.dimensions[1]);

   ctx.fillStyle = "#ff0000";
   ctx.fillText("FPS: " + framesLastSecond, 10, 20);

   lastFrameTime = currentFrameTime;
   requestAnimationFrame(drawGame);
}
</script>

</head>
<body>

<canvas id="game" width="400" height="400"></canvas>

</body>
</html>

i've changed the last par useing ctx.drawImage instead of ctx.fillRect so the page will display images instead of colored squares. it works but when i actually move the player,it flasheh,it goes in and out of sight,showing itself when i press a key and going invisible right afterwards. i suppose it has something to do with the fact that by pressing a key,the player will automaticlly move a tile in that certain dirrection,regardless if a keep pressing the key or not. So basiclly the iamge shows when i press and then does the movement invisible. hope i make any sense and that there is someone there who can help me out.
Code: Select all
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
var ctx = null;
var gameMap = [
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0,
   0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0,
   0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0,
   0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
   0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0,
   0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0,
   0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0,
   0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
var tileW = 40, tileH = 40;
var mapW = 20, mapH = 20;
var currentSecond = 0, frameCount = 0, framesLastSecond = 0, lastFrameTime = 0;
var grass = new Image();
var heroe = new Image();
var sand = new Image();

heroe.src='player.png';
grass.src='grass.png';
sand.src='sand.png';

var keysDown = {
   37 : false,
   38 : false,
   39 : false,
   40 : false
};

var viewport = {
   screen      : [0,0],
   startTile   : [0,0],
   endTile      : [0,0],
   offset      : [0,0],
   update      : function(px, py) {
      this.offset[0] = Math.floor((this.screen[0]/2) - px);
      this.offset[1] = Math.floor((this.screen[1]/2) - py);

      var tile = [ Math.floor(px/tileW), Math.floor(py/tileH) ];

      this.startTile[0] = tile[0] - 1 - Math.ceil((this.screen[0]/2) / tileW);
      this.startTile[1] = tile[1] - 1 - Math.ceil((this.screen[1]/2) / tileH);

      if(this.startTile[0] < 0) { this.startTile[0] = 0; }
      if(this.startTile[1] < 0) { this.startTile[1] = 0; }

      this.endTile[0] = tile[0] + 1 + Math.ceil((this.screen[0]/2) / tileW);
      this.endTile[1] = tile[1] + 1 + Math.ceil((this.screen[1]/2) / tileH);

      if(this.endTile[0] >= mapW) { this.endTile[0] = mapW-1; }
      if(this.endTile[1] >= mapH) { this.endTile[1] = mapH-1; }
   }
};

var player = new Character();

function Character()
{
   this.tileFrom   = [1,1];
   this.tileTo      = [1,1];
   this.timeMoved   = 0;
   this.dimensions   = [30,30];
   this.position   = [45,45];
   this.delayMove   = 700;
}
Character.prototype.placeAt = function(x, y)
{
   this.tileFrom   = [x,y];
   this.tileTo      = [x,y];
   this.position   = [((tileW*x)+((tileW-this.dimensions[0])/2)),
      ((tileH*y)+((tileH-this.dimensions[1])/2))];
};
Character.prototype.processMovement = function(t)
{
   if(this.tileFrom[0]==this.tileTo[0] && this.tileFrom[1]==this.tileTo[1]) { return false; }

   if((t-this.timeMoved)>=this.delayMove)
   {
      this.placeAt(this.tileTo[0], this.tileTo[1]);
   }
   else
   {
      this.position[0] = (this.tileFrom[0] * tileW) + ((tileW-this.dimensions[0])/2);
      this.position[1] = (this.tileFrom[1] * tileH) + ((tileH-this.dimensions[1])/2);

      if(this.tileTo[0] != this.tileFrom[0])
      {
         var diff = (tileW / this.delayMove) * (t-this.timeMoved);
         this.position[0]+= (this.tileTo[0]<this.tileFrom[0] ? 0 - diff : diff);
      }
      if(this.tileTo[1] != this.tileFrom[1])
      {
         var diff = (tileH / this.delayMove) * (t-this.timeMoved);
         this.position[1]+= (this.tileTo[1]<this.tileFrom[1] ? 0 - diff : diff);
      }

      this.position[0] = Math.round(this.position[0]);
      this.position[1] = Math.round(this.position[1]);
   }

   return true;
}

function toIndex(x, y)
{
   return((y * mapW) + x);
}

window.onload = function()
{
   ctx = document.getElementById('game').getContext("2d");
   requestAnimationFrame(drawGame);
   ctx.font = "bold 10pt sans-serif";

   window.addEventListener("keydown", function(e) {
      if(e.keyCode>=37 && e.keyCode<=40) { keysDown[e.keyCode] = true; this.spriteAnimCounter += 0.2; }
   });
   window.addEventListener("keyup", function(e) {
      if(e.keyCode>=37 && e.keyCode<=40) { keysDown[e.keyCode] = false; this.spriteAnimCounter += 0;}
   });

   viewport.screen = [document.getElementById('game').width,
      document.getElementById('game').height];
};

function drawGame()
{
   if(ctx==null) { return; }

   var currentFrameTime = Date.now();
   var timeElapsed = currentFrameTime - lastFrameTime;

   var sec = Math.floor(Date.now()/1000);
   if(sec!=currentSecond)
   {
      currentSecond = sec;
      framesLastSecond = frameCount;
      frameCount = 1;
   }
   else { frameCount++; }

   if(!player.processMovement(currentFrameTime))
   {
      if(keysDown[38] && player.tileFrom[1]>0 && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]-1)]==1) { player.tileTo[1]-= 1; sprite = 0; }
      else if(keysDown[40] && player.tileFrom[1]<(mapH-1) && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]+1)]==1) { player.tileTo[1]+= 1; sprite = 32; }
      else if(keysDown[37] && player.tileFrom[0]>0 && gameMap[toIndex(player.tileFrom[0]-1, player.tileFrom[1])]==1) { player.tileTo[0]-= 1; sprite = 64;}
      else if(keysDown[39] && player.tileFrom[0]<(mapW-1) && gameMap[toIndex(player.tileFrom[0]+1, player.tileFrom[1])]==1) { player.tileTo[0]+= 1; sprite = 96; }

      if(player.tileFrom[0]!=player.tileTo[0] || player.tileFrom[1]!=player.tileTo[1])
      { player.timeMoved = currentFrameTime; }
   }

   viewport.update(player.position[0] + (player.dimensions[0]/2),
      player.position[1] + (player.dimensions[1]/2));

   ctx.fillStyle = "#000000";
   ctx.fillRect(0, 0, viewport.screen[0], viewport.screen[1]);

   for(var y = viewport.startTile[1]; y <= viewport.endTile[1]; ++y)
   {
      for(var x = viewport.startTile[0]; x <= viewport.endTile[0]; ++x)
      {
         switch(gameMap[((y*mapW)+x)])
         {
            case 0:
         ctx.drawImage( sand,viewport.offset[0] + (x*tileW), viewport.offset[1] + (y*tileH),
            tileW, tileH);
               break;
            default:
         ctx.drawImage( grass,viewport.offset[0] + (x*tileW), viewport.offset[1] + (y*tileH),
            tileW, tileH);
         }
      }
   }
        var sprite = sprite;
   var walkingMod = Math.floor(this.spriteAnimCounter) % 3;
   ctx.drawImage(heroe,24,sprite,24,32,viewport.offset[0] + player.position[0], viewport.offset[1] + player.position[1],
      player.dimensions[0],player.dimensions[1]);

   ctx.fillStyle = "#ff0000";
   ctx.fillText("FPS: " + framesLastSecond, 10, 20);

   lastFrameTime = currentFrameTime;
   requestAnimationFrame(drawGame);
}
</script>

</head>
<body>

<canvas id="game" width="400" height="400"></canvas>

</body>
</html>
Last edited by drag0natt3r on Sun Jul 02, 2017 5:59 am, edited 1 time in total.
drag0natt3r
 
Posts: 5
Joined: Sun Jul 02, 2017 1:54 am
Has thanked: 0 time
Been thanked: 0 time

Re: i need help with this peace of code

Postby a_bertrand » Sun Jul 02, 2017 2:54 am

Can you please put it live somewhere such that we can see it running with the images and all?
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
a_bertrand
New Worlds Engine creator
 
Posts: 1535
Joined: Mon Feb 25, 2013 8:46 am
Has thanked: 15 times
Been thanked: 23 times

Re: i need help with this peace of code

Postby drag0natt3r » Sun Jul 02, 2017 5:58 am

drag0natt3r
 
Posts: 5
Joined: Sun Jul 02, 2017 1:54 am
Has thanked: 0 time
Been thanked: 0 time

Re: i need help with this peace of code

Postby drag0natt3r » Sun Jul 02, 2017 11:35 am

the player moves with the keyboard arrows
drag0natt3r
 
Posts: 5
Joined: Sun Jul 02, 2017 1:54 am
Has thanked: 0 time
Been thanked: 0 time

Re: i need help with this peace of code

Postby a_bertrand » Sun Jul 02, 2017 10:07 pm

Your issue is simply that your variable this.spriteAnimCounter contains NaN most of the time (Not A Number) which means the player will not be drawn. BTW Use the embedded chrome debugger to help you solve such issues ;)
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
a_bertrand
New Worlds Engine creator
 
Posts: 1535
Joined: Mon Feb 25, 2013 8:46 am
Has thanked: 15 times
Been thanked: 23 times

Re: i need help with this peace of code

Postby drag0natt3r » Mon Jul 03, 2017 2:39 pm

i thought it'd be something like that. but how do i solve it? i did this
Code: Select all
   if(keysDown[38]) {sprite = 0; }
else if (keysDown[40]) {sprite = 1; }
else if (keysDown[37]) {sprite = 3; }
else if (keysDown[37]) {sprite = 2; }
var sprite= sprite;

now the player its shown only when i press a key,else it gows invisible again.
and if i do this
Code: Select all
[u]var sprite = 0;[/u]
   if(keysDown[38]) {sprite = 0; }
else if (keysDown[40]) {sprite = 1; }
else if (keysDown[37]) {sprite = 3; }
else if (keysDown[37]) {sprite = 2; }
var sprite= sprite;

when i dont press anything it shows the default sprite with the player looking upwords. how do i save the last used player position so that it displays corectlly the last used position
drag0natt3r
 
Posts: 5
Joined: Sun Jul 02, 2017 1:54 am
Has thanked: 0 time
Been thanked: 0 time

Re: i need help with this peace of code

Postby drag0natt3r » Tue Jul 04, 2017 3:41 pm

i have updated the link. file:///C:/Users/RB/Desktop/maze/maze.html
take a pic and tell me whats rong
drag0natt3r
 
Posts: 5
Joined: Sun Jul 02, 2017 1:54 am
Has thanked: 0 time
Been thanked: 0 time

Re: i need help with this peace of code

Postby a_bertrand » Tue Jul 04, 2017 10:09 pm

Mmmm... local link? Sorry but that's not an upload ;)
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
a_bertrand
New Worlds Engine creator
 
Posts: 1535
Joined: Mon Feb 25, 2013 8:46 am
Has thanked: 15 times
Been thanked: 23 times


Return to Beginner Help and Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron

x