Sign in to follow this  

Drawing map(filled rectangles) faster(javascript)?

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;
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;
// 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");

function keyThing(event) {
switch (event.keyCode) {
case 37:
scroll = scroll + speed;
case 39:
scroll = scroll - speed;
window.addEventListener("keydown", keyThing, true);
setInterval(drawTile, 1);
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>

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this