<!DOCTYPE html>
<html>
<body onload="setInterval('mainfunc()', 10)">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var x = 0;
var y = 0;
function mainfunc(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var select =Math.floor(Math.random() * 4);
if (select == 0 && x <=500){
x+=Math.floor(Math.random() * 25);
}
if (select == 1 && x >=0){
x-=Math.floor(Math.random() * 25);
}
if (select == 2 && y <=500){
y+=Math.floor(Math.random() * 25);
}
if (select == 3 && y >=0){
y-=Math.floor(Math.random() * 25);
}
ctx.fillStyle = "red";
ctx.fillRect(x,y,1,1);
}
</script>
</body>
</html>
|