<!DOCTYPE html>
<html>
<body onload="setInterval('myfunc1()', 10)">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var xObj = 0;
var yObj = 0;
var speedX = 1;
var speedY = 1;
var state = 0;
function findspeed()
{
var myselect = Math.floor(Math.random() * 2);
if (myselect == 0){
speedX = speedX + 1;
}
if (myselect == 1){
speedY = speedY + 1;
}
if (speedX > 10) speedX = 1;
if (speedY > 10) speedY = 1;
}
function myfunc1(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
for (let i = 0; i < 100;i++){
if (i%50 == 0){
ctx.fillStyle='#' + Math.floor(Math.random()*16777215).toString(16);
}
ctx.fillRect(5*i*10+Math.floor(Math.random() * speedX), yObj, 10, 10);
ctx.fillRect( yObj,5*i*10+Math.floor(Math.random() * speedY), 10, 10);
}
xObj+=speedX;
yObj+=speedY;
findspeed();
}
</script>
</body>
</html>
|