Этот код позволяет ставить блоки и делать из них массив.
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "640" height = "480"></canvas>
<style type="text/css">
#canvas{
border: 1px solid black;
}
</style>
<textarea id = "input"></textarea>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
mousex = 0;
mousey = 0;
map = [];
blocks = [];
for(i=0;i<300;i++){
blocks.push(0);
}
document.addEventListener("mousemove", function(e){
mousex = e.pageX-32;
mousey = e.pageY-32;
});
document.addEventListener("mousedown", function(e){
map.push({x:32*Math.round(mousex/32),y:32*Math.round(mousey/32)})
});
document.addEventListener("keydown", function(e){
blocks = [];
for(i=0;i<300;i++){
blocks.push(0);
}
for(i in map){
blocks[(map[i].x/32) + (map[i].y/32)*20] = 1;
}
document.getElementById("input").value = blocks;
});
document.getElementById("input").value = blocks;
function draw(){
ctx.clearRect(0,0,640,480);
ctx.strokeStyle = "yellow";
ctx.strokeRect(32*Math.round(mousex/32),32*Math.round(mousey/32),32,32);
for(i in map){
ctx.fillRect(map[i].x,map[i].y,32,32);
}
}
setInterval(draw,20);
</script>
</body>
</html>
А этот код должен его отобразить но что бы я ни делал ничего не выходит.Массив вставляется в blocks.
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "640" height = "480"></canvas>
<style type="text/css">
#canvas{
border: 1px solid black;
}
</style>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = 0;
y = 0;
up = 0;
left = 0;
right = 0;
down = 0;
radius = 500;
color = 1;
map = [];
blocks = [];
function draw(){
x = 0;
y = 0;
ctx.clearRect(0,0,640,480);
radius = 500;
color = 1;
for(i=0;i<5;i++){
ctx.fillStyle = "rgb(202,"+color+",250)";
ctx.beginPath();
ctx.arc(320,240,radius,0,2*Math.PI);
ctx.fill();
ctx.closePath();
radius-=100;
color+=50;
}
for(i in blocks){
if(blocks[i] == 1){
ctx.fillRect(x,y,32,32);
}
x+=32;
if(x >= 640){
y+=32;
}
}
}
setInterval(draw,20);
</script>
</body>
</html>
