
previous

page 6
next
Let's deal with one gotcha straightaway - the canvas doesn't resize when we we resize the browser window. Surprisingly easy to fix:
<body onResize='setup();'>
I imagine the robot as being on an 8x8 grid always starting at the circled position.
I also imagine the robot having a compass heading ranging from 0 to 360.
Which leads to the follow additions to my JavaScript:

function home() {
g_ctx.clearRect(0,0,g_side,g_side);
g_x=g_x0; g_y=g_y0; g_h=0;
}
function setup() {
g_side=45*vmin();
var canvas=document.getElementById('c');
canvas.width=g_side; canvas.height=g_side;
g_ctx=canvas.getContext('2d');
g_x0=g_side/2; g_y0=g_side*.75;
g_step=g_side/8;
home();
}
g_ctx.clearRect(0,0,g_side,g_side);
g_x=g_x0; g_y=g_y0; g_h=0;
}
function setup() {
g_side=45*vmin();
var canvas=document.getElementById('c');
canvas.width=g_side; canvas.height=g_side;
g_ctx=canvas.getContext('2d');
g_x0=g_side/2; g_y0=g_side*.75;
g_step=g_side/8;
home();
}
Note the clearRect command which is the simplest way to clear rhe canvas - rather like wiping down a whiteboard.
previous
next