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.


Drawing map(filled rectangles) faster(javascript)?


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
No replies to this topic

#1 bellis   Members   -  Reputation: 106

Like
0Likes
Like

Posted 30 September 2012 - 01:06 PM

Hi people!!! :-D
Here I am for the first time and it seems to me that this is the best place for
asking about game developing.
As newbie I wasted my time for chosing programing language. I don't know where I can find
a lot of source code of games. I chosed javascript, just because I can view
others code. After some short learnig about javascript I encouraged myself to
write something myself, so I decide to make simple 2D map(rectangles). Problem
is I can't make it faster to move,only if I increase step It will move for
10px, but i want to move it by 1px faster. Here is my code

[source lang="jscript"]var canvas;var ctx;var wCanvas;var hCanvas;var row;var speed =10;/** r = red* b = blue* o = empty*/var map =["b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "b", "o", "r", "r", "o", "o", "o", "o", "o", "o", "o", "b", "b", "b", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "r", "r", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "b", "b", "r", "r", "o", "o", "o", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "r", "o", "o", "o", "o", "o", "o", "o", "o", "r", "o", "o", "o", "o", "b", "b", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "o", "o", "o", "o", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "r", "o", "o", "o", "b", "b", "o", "r", "o", "o", "o", "o", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "o", "o", "o", "o", "b", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "r", "o", "o", "b", "b", "o", "o", "r", "o", "o", "o", "o", "o", "o", "o", "b", "b", "b", "b", "o", "o", "o", "o", "o", "o", "o", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "r", "o", "b", "b", "o", "o", "o", "r", "o", "o", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "o", "o", "o", "o", "o", "b", "o", "o", "o", "o", "o", "b", "b", "b", "o", "o", "o", "o", "o", "o", "o", "r", "b", "b", "o", "o", "o", "o", "r", "o", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "b", "o", "o", "o", "o", "o", "r", "o", "o", "o", "o", "b", "o", "o", "b", "o", "o", "r", "r", "r", "r", "r", "r", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "b", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b"];var scroll = - 10;function clearCanvas() { ctx.fillStyle = "white"; ctx.fillRect(0, 0, wCanvas, hCanvas);}function drawTile() { var x = -41; var y = 0; clearCanvas(); row = 1; for (var i = 0; i < map.length; i++) { x = x+ 41; if (map[i] == "b") ctx.fillStyle = "blue"; else if (map[i] == "r") ctx.fillStyle = "red"; else if (map[i] == "o") continue; if (i == row * 40) { y = y + 41; x = 0; row++; } // painting rectangle ctx.fillRect(scroll + x, y, 40, 40); ctx.strokeStyle = "Black"; // painting border of rectangle ctx.lineWidth = 4; ctx.strokeRect(scroll + x, y, 40, 40); } // painting red border of canvas ctx.strokeStyle = "red"; ctx.strokeRect(0, 0, wCanvas, hCanvas);}function init() { canvas = document.getElementById("canvas"); wCanvas = canvas.width; hCanvas = canvas.height; ctx = canvas.getContext("2d"); drawTile();}function keyThing(event) { switch (event.keyCode) { case 37: //left scroll = scroll + speed; break; case 39: //right scroll = scroll - speed; break; }}init();window.addEventListener("keydown", keyThing, true);setInterval(drawTile, 1);[/source]
And html

[source lang="plain"]<html><title>Drawing map</title><canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript" src="dMap.js"></script></html>[/source]

Sponsor:



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