その他　面白７-１■自動で上からブロック消し

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

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

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

■自動でランダムにブロック消しのJavaScriptはこちら → 面白７■自動でランダムにブロック消し

■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(gh6.jpg) fixed  no-repeat #000;/*★背景画像の固定位置指定。繰り返し無し。背景色　黒色*/
background-size:100% auto;/*★背景画像の横幅100%指定。宇宙の背景画像実寸は横900px縦506px*/
}
/*★タイトル文字指定。不要なら削除*/
.title{
color: #ccc;
font-size: 50px;
font-weight: bold;
text-shadow: 5px 5px 1px #999;
text-align:center;
}
--></style>

</head>
<body>

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

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

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

var bc="url(at_js.png)"; //★ブロック用の背景画像。画像ではなく色を指定する時は、var bc="#●";で指定
var wb=150;    //★ブロックの横幅。単位px
var hb=80;     //★ブロックの縦幅。単位px
var spd=100    //★ブロックの落下速度。小さいほど速い
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");
function setBlock() {
if (typeof dv[a] !=='undefined') {dv[a].style.visibility='hidden';}//Firefoxのコンソールのヒントより
a++;
setTimeout(setBlock,spd);
} 
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白７-１■ 自動で上からブロック消し 最終修正日 : 2017/06/16

　面白７-１■　自動で上からブロック消し　　　　最終修正日 : 2017/06/16