• Advertisement
Sign in to follow this  

Drawing map(filled rectangles) faster(javascript)?

This topic is 1940 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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 == "b") ctx.fillStyle = "blue";
else if (map == "r") ctx.fillStyle = "red";
else if (map == "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]

Share this post


Link to post
Share on other sites
Advertisement
Sign in to follow this  

  • Advertisement