その他　面白６■マウスオンでブロック落とし

ブロックの色や大きさ（数）、
落ちる速さの
指定ができます。

●2017/06/15：即時関数で囲んで、グローバル変数を消しました。
ブロック（タイル）をマウスオンすると、次々にブロック（タイル）が落下していくJavaScriptです。
ブラウザIE専用の原本を、全ブラウザ動作可能に改造しました。
原本はOpenSpace から。

bodyの背景色指定を白色にして、JavaScriptのソースの中の指定部分を下記に変更すると、別の仕様になります。↓↓
var bc="#008000";　　//★ブロックの色。緑色
var wb=120;　　　　　//★ブロックの横幅。単位px
var hb=120;　　　　　//★ブロックの縦幅。単位px
var spd=130　　　　　//★ブロックの落下速度
var sp=1;　　　　　　//★ブロック同士の隙間。単位px
//★↓CSSでブロックの内側にボカシの影指定。不要ならvar Bcss="";で。
var Bcss="";

落ちるブロック（タイル）を画像にすることも可能です。ブロックの色を指定する部分で背景画像を指定します。
var bc="url(画像名)";　//★ブロックの背景画像
自動でランダムにブロック消しで画像を指定しているので、参考にして下さい。

■落ちるのではなく消えるJavaScriptはこちら → 面白６-１■マウスドラッグで文章が出る

■2017/06/15：ブロック同士の隙間を、自由に指定できるように修正。原本は1px。

<!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>

<!--★背景色と少女の画像指定。不要なら削除-->
<style type="text/css"><!--
body{background:#000;}/*★背景色　黒色*/
.ga{position:absolute;top:100px;bottom:0;left:0;right:0;margin:auto;}/*★少女の画像の上下左右中央の位置指定。不要なら削除*/
--></style>

</head>
<body>

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

<p style="margin-left:2em; color:#0c0;">ブロックの色や大きさ（数）、<br>落ちる速さの<br>指定ができます。</p><!--■文章の記述参考例-->
<img src="gat106.jpg" class="ga"><!--■少女の画像の記述参考例-->



<!--★ここからコピー。位置はbodyの中ですが、ブロックを一番上に表示するためにbodyの一番下に記述して下さい。-->
<script type="text/javascript"><!--
/*===========================================================================
マウスオンでブロック落とし By OpenSpace：http://www.openspc2.org/HTML_JS_CSS/image/020/
★ブラウザIE専用を全ブラウザ対応へ改造　　2017/06/15
==============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var bc="#b95"; //★ブロックの背景色。薄茶色。背景画像を指定する時はvar bc="url(画像名)";で
var wb=150;    //★ブロックの横幅。単位px
var hb=100;    //★ブロックの縦幅。単位px
var spd=100    //★ブロックの落下速度。原本130。小さいほど速い
var sp=1;      //★ブロック同士の隙間。単位px
//★↓CSSでブロックの内側にボカシの影指定。不要ならvar Bcss="";で。見本は茶色のボカシ
var Bcss="box-shadow:0 0 10px 10px #960 inset;"; 

//指定ここまで--------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var bList=[0];
var count=0;
var ww=window.innerWidth, hh=window.innerHeight;
function setTile(){
var w=Math.floor(ww/wb), h=Math.floor(hh/hb);
var wTag="";
var n=1;
for (var j=0; j<=h; j++){
for (var i=0; i<=w; i++){
wTag += "<div id='block"+n+"' style='position:absolute; width:"+(wb-sp)+"px; top:"+j*hb+"px; left:"+i*wb+"px;height:"+(hb-sp)+"px; background:"+bc+";"+Bcss+"'></div>";/*■即時関数にするためonmouseover='setBlock(this.id)'を削除*/
n++;
}}
$("tile").innerHTML=wTag;
$("tile").style.visibility="visible";
//■下記２行追加
var suu=(w+1)*(h+1);
for (n=1; n<=suu; n++) {$("block"+n).onmouseover=function (){setBlock(this.id)}}
}
document.write("<div id='tile' style='position:fixed;top:0;left:0;'></div>");//■原本のhtml記述をこちらへ変更。absoluteをfixedへ変更

function setBlock(srcID){ bList[count++]=srcID; }
function fall(){
for (i=0; i<count; i++){
var bID = bList[i];//■var 追加
if (bID){
var y= parseInt($(bID).style.top);
if (y < hh){ $(bID).style.top= y+20+"px";} else{ bList[i]=0;}
}
}}
setInterval(fall,spd); setTile();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白６■ マウスオンでブロック落とし 最終修正日 : 2017/06/15

　面白６■　マウスオンでブロック落とし　　　　最終修正日 : 2017/06/15