JSFiddle - React, Tailwind, and code Playground

by gajyuma

HTML

<canvas id="circle_canvas" width=830 height=910 style="border:1px solid gray;">
</canvas>

<br>
830×910のサイズ内にゲームマップの要領で<br>
100*100のマスに、スプライトマップを配列で作成。
約50%の領域に●を描画。そのうち、<br>
赤…40%<br>
緑…30%<br>
紫…20%<br>
黒…10%<br>
をランダムの順番に表示。

JavaScript

var row=100; //横の数
var col=100; //縦の数
var radiusBase = 4; // 円の大きさ
var mouseX = -1000; // マウスX座標
var mouseY = -1000; // マウスY座標
var mapArs = []; //ドットを打つマップ配列【0 or 1】
var colAr = []; //ドットを打つポイントの数と配色【0～4(種類分)】
var setNum; //ドットを打つ個数
var drawLine = 0;

//割合(以下、全部足して100とする)
var perD1 = 40;
var perD2 = 30;
var perD3 = 20;
var perD4 = 10;


//***　mapArs = row × col のマスに、0か1を配置させる***//
for(var i = 0 ; i < row ; i++){
    mapArs[i] = new Array();
	for(var j = 0 ; j < col ; j++){
        var num = Math.floor(Math.random()*2);
        mapArs[i][j] = num;
        if(num == 1){
            colAr.push(_setColor());
        }
	}
}
setNum = colAr.length;

//*** 1~４を返す***//
//【例】40% 30% 20% 10%
function _setColor(){
    var num;
    var rndm = Math.floor(Math.random()*100)+1;
    //___console.log(rndm);
    if(rndm <= 40){num = 1;}
    else if(41 <= rndm && rndm <= 70){num = 2;}
    else if(71 <= rndm && rndm <= 90){num = 3;}
    else {num = 4;}
    
    return num;
}

//*** デバッグ　2次元配列の表示 ***//
_consoleTable(mapArs);
function _consoleTable(datas){
    if(datas==null){
        debug('データはnullです');
    }else{
        for (var i=0;i<datas.length;i++){
            var num = datas[i];
            if(num == null){
                console.log('エンティティはnull');
            }else{
                msg=num.join(',');
                console.log(msg);
            }
        }
    }
}

$(document).ready(function(){
	init();
});

function init() {
	// canvas対応しているか判定
	var canvas = document.getElementById('circle_canvas');
	if ( ! canvas || ! canvas.getContext ) { alert('error');return false; }

	// canvasサイズをとる
	var ctx = canvas.getContext('2d');
	var cWidth = canvas.width;
	var cHeight = canvas.height;

    timer1 = setInterval(function(){
        drawLine ++;
        console.log(drawLine);
        if (drawLine >= col)
        {
            clearInterval(timer1);
            //____console.log("stop");
        }
    },17);

	// 初期表示の処理
	drawCircle(cWidth, cHeight, ctx);

}

function...