<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="700" height="600"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var n = 10, m = 20;
var state = [];
for (var i = 0; i <= m; i++){
state[i] = [];
for (var j = 0; j <= n; j++){
state[i][j] = 0;
}
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
setInterval(function () {
var ind1 = Math.floor(Math.random() * 20)+1;
var ind2 = Math.floor(Math.random() * 10)+1;
ctx.clearRect(0,0,700,600);
var randomcolor = Math.floor(Math.random() *5);
if (randomcolor == 0) state[ind1-1][ind2-1] = 0;
if (randomcolor == 1) state[ind1-1][ind2-1] = 1;
if (randomcolor == 2) state[ind1-1][ind2-1] = 2;
if (randomcolor == 3) state[ind1-1][ind2-1] = 3;
if (randomcolor == 4) state[ind1-1][ind2-1] = 4;
for (var index1 = 0; index1 < 20;index1++){
for (var index2 = 0; index2 < 10;index2++){
if (state[index1][index2] == 0){
ctx.fillStyle = "black";
ctx.fillText("9",index1*25,index2*35);
}
if (state[index1][index2] == 1){
ctx.fillStyle = "red";
ctx.fillText("9",index1*25,index2*35);
}
if (state[index1][index2] == 2){
ctx.fillStyle = "green";
ctx.fillText("9",index1*25,index2*35);
}
if (state[index1][index2] == 3){
ctx.fillStyle = "gray";
ctx.fillText("9",index1*25,index2*35);
}
if (state[index1][index2] == 4){
ctx.fillStyle = "blue";
ctx.fillText("9",index1*25,index2*35);
}
}
}
},1);
</script>
</body>
</html>
| 