<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
create_table();
let object_x_1 = 0;
let object_y_1 = 0;
let object_x_2 = 450;
let object_y_2 = 450;
function create_table(){
for (let x = 0; x < 10; x++){
for (let y = 0; y < 10; y++){
ctx.strokeRect(x*50, y*50,50,50);
}
}
}
setInterval(function () {
ctx.clearRect(0,0,500,500);
create_table();
ctx.fillRect(object_x_1, object_y_1,50, 50);
ctx.fillRect(object_x_2, object_y_2,50, 50);
object_x_1 = object_x_1 + 50;
object_x_2 = object_x_2 - 50;
if (object_x_1 == 500)
{
object_x_1 = 0;
object_y_1 = object_y_1 + 50;
}
if (object_x_2 < 0)
{
object_x_2 = 450;
object_y_2 = object_y_2 - 50;
}
}, 1000);
</script>
</body>
</html>
| 