Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

ランダムイベントジェネレータその２2017/07/02

こちらの改良版。

新しいデータをグラフの左側に表示するように変更。
スクロールをする手間がなくなった。


グラフ位置 =

0の個数 =

1の個数 =

乱数履歴 ->

reg-2.js 
const H = 500;

var d = 0;
var result = document.getElementById("result");
var log = document.getElementById("log");
var cnt = 1;
var cnt0 = document.getElementById("cnt0");
var cnt1 = document.getElementById("cnt1");
var c0, c1;
var point = [];

point[0] = 0;
c0 = c1 = 0;

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");

drawLine();

setInterval(function(){
  canvas.setAttribute("width", cnt);
  drawLine();
  var r = 2 * (Math.floor(Math.random()*2)) - 1;
  if(r == 1){
    c1++;
    cnt1.innerHTML = c1;
  }else {
    c0++;
    cnt0.innerHTML = c0;
  }
  d = d + r;
  point.unshift(d);
  result.innerHTML = d;
  log.innerHTML = (r==1?1:0) + log.innerHTML;
  drawGrapha();
  cnt += 1;
}, 1000);

function drawLine(){
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(0, 0, 0)';
  ctx.strokeRect(0, 0, cnt, H);

  ctx.beginPath();
  ctx.moveTo(0, H/2);
  ctx.lineTo(cnt, H/2);
  ctx.stroke();
}

function drawGrapha(){
  ctx.beginPath();
  ctx.moveTo(0, (H/2) -1*point[0]);
  ctx.strokeStyle = 'rgb(192, 80, 77)';
  for(var i=1; i<point.length;i++)
    ctx.lineTo(i, -1*point[i]+(H/2));
  ctx.stroke();
}