その他　面白７■　自動でランダムにブロック消し

ブロックの画像（または色）や大きさ（数）、
消える速さの指定ができます。

●2017/06/16：即時関数で囲んで、グローバル変数を消しました。
ブロック（タイル）が自動で、ランダムに次々に消えていくJavaScriptです。
原本は教えて！goo の「回答者：kata_kori」さんの分を、上からではなくランダムに変更しました。

消えるブロック（タイル）を画像ではなく色にすることも可能です。ブロックの画像を指定する下記の部分で色を指定します。
var bc="#●";　//★ブロックの色
マウスオンでブロック落としで色を指定しているので、参考にして下さい。

■同じJavaScriptのソースで、色のブロックはこちら → 面白７-２■自動でランダムにブロック消し・色
■自動で上からブロック消しのJavaScriptはこちら → 面白７-１■自動で上からブロック消し

■2017/06/12：ランダムで消える速度が最後はゆっくりだったのが、均等に修正。
■2017/06/15：ブロック同士の隙間を、自由に指定できるように修正。原本は1px。
■2017/06/16：var もれ修正

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　面白７■　自動でランダムにブロック消し</title>

<!--★背景画像指定。不要なら削除。この指定内容はJavaScriptとは無関係です-->
<style type="text/css"><!--
body{
background:url(gat201.jpg) fixed  no-repeat #000;/*★背景画像の固定位置指定。繰り返し無し。背景色　黒色*/
background-size:100% auto;/*★背景画像の横幅100%指定。蓮池の背景画像実寸は横763px縦500px*/
}
--></style>

</head>
<body>

<!--■記述参考例：JavaScriptの上に記述すれば、全部ブロックの下の表示になります。JavaScriptよりも下に記述した文章や画像の位置指定に、position:absolute;指定があると、ブロックの上に表示されてしまうので注意して下さい。-->

<p style="margin-left:2em; color:#ff0;">ブロックの画像（または色）や大きさ（数）、<br>消える速さの指定ができます。</p><!--■文章の記述参考例-->

<!--★ここからコピー。位置はbodyの中ですが、ブロックを一番上に表示するためにbodyの一番下に記述して下さい。-->
<script type="text/javascript"><!--
/*===========================================================================
自動でランダムブロック消し By　http://oshiete.goo.ne.jp/qa/799579.html(回答者：kata_kori) 2017/06/16 
ランダム参考：getElementsByTagName("div")を配列に置き換える：By(inamenaiの日記) http://d.hatena.ne.jp/inamenai/20090204/p1
==============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var bc="url(gat107.jpg)"; //★ブロック用の背景画像。画像ではなく色を指定する時は、var bc="#●";で指定
var wb=227;    //★ブロックの横幅。単位px
var hb=150;    //★ブロックの縦幅。単位px
var spd=200    //★ブロックの落下速度。小さいほど速い
var stt=2000;  //★ページを開いてからブロック消しが自動開始するまでの時間。1000=1秒
var sp=1;      //★ブロック同士の隙間。単位px
//★CSSでブロックの内側にボカシの影。不要ならvar Bcss="";で。見本は灰色のボカシ
var Bcss="box-shadow:0 0 10px 10px #888 inset;"; 

//指定ここまで------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var n=0,i=0,j=0,a=0; 
var len,r;
var ww=window.innerWidth, hh=window.innerHeight;
var w=Math.floor(ww/wb), h=Math.floor(hh/hb);
function setTile() { 
var wTag="";
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag +="<div id='block"+n+"' style='position:absolute; top:"+j*hb+"px; left:"+i*wb+"px; width:"+(wb-sp)+"px; height:"+(hb-sp)+"px; background:"+bc+";"+Bcss+"'></div>";
n++;
}}
$("tile").innerHTML=wTag;
$("tile").style.visibility="visible";
setTimeout(setBlock,stt);//■ブロック消しの開始時間
}
document.write("<div id='tile' style='position:fixed;top:0;left:0;'></div>");//■原本のhtml記述をこちらへ変更。absoluteをfixedへ変更
setTile();
var dv=$("tile").getElementsByTagName("div");
var arr=new Array(dv.length);// 取得したdvを配列に詰め替える
for (a=0; a<dv.length; a++){arr[a]=dv[a];}
function setBlock() {
len=arr.length;
r=Math.floor(Math.random()*len);//ランダム用
if (typeof arr[r] !=='undefined') {arr[r].style.visibility='hidden';}//Firefoxのコンソールのヒントより
arr.splice(r,1);//ランダム用。表示済みは重複させない
setTimeout(setBlock,spd);
} 
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白７ 自動でランダムにブロック消し 最終修正日 : 2017/06/16

　面白７　自動でランダムにブロック消し　　　　最終修正日 : 2017/06/16