この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
【遊び】逃げるボタン [JavaScript]
◆【遊び】逃げるボタン
さて、たまには遊びましょう。
なかなか、ソネブロに JavaScript のプログラムを動く状態で記事ごとに実装する方法が見つからないので、別のページを用意しました。
リンク先のページを開くと、マウスカーソルから逃げ回るボタンが出てくるので、がんばって捕まえてポチっとしてください。
対応ブラウザは、Internet Explorer、Firefox、Opera、Safari、Google Chrome です。
そのページは、★こちらです★（←リンクをクリックしてくださいね）。
楽しんで頂けましたでしょうか、それともイラついたでしょうかｗ。
さて、今回のソースは、こちらです（長いです）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>逃げるボタン</title>
<!--
<style type="text/css">
#id_div_par { position:relative; width:350px; height:350px; border:Solid 1px Black; }
#id_div { position:absolute; padding:40px; border:Solid 1px Red; }
#id_btn_reset { z-index:2; }
</style>
-->
<script type="text/javascript">
//<![CDATA[
var intDistance = 15;
var bEscaping = false;
var strDirection = null;
var strDirectionArray = new Array('Up', 'Down', 'Left', 'Right');
function errorEnvironment() {
alert('ご使用の環境では、このスクリプトはご使用できません。');
}
function byId(id) { return document.getElementById(id); }
function addEvent(evt, func, cap) {
if (this.addEventListener)
this.addEventListener(evt, func, cap);
else if (this.attachEvent)
this.attachEvent('on' + evt, func);
else
errorEnvironment();
}
Object.prototype.addEvent = addEvent;
HTMLDocument.prototype.addEvent = addEvent;
Element.prototype.addEvent = addEvent;
function removeEvent(evt, func, cap) {
if (this.removeEventListener)
this.removeEventListener(evt, func, cap);
else if (this.detachEvent)
this.detachEvent('on' + evt, func);
else
errorEnvironment();
}
Object.prototype.removeEvent = removeEvent;
HTMLDocument.prototype.removeEvent = removeEvent;
Element.prototype.removeEvent = removeEvent;
function addTop(elm, intOffsetY) {
if (!elm.hasEscapeTop) { elm.hasEscapeTop = true; elm.escapeTop = 0; }
elm.escapeTop += intOffsetY;
elm.style.top = String(elm.escapeTop) + 'px';
}
function addLeft(elm, intOffsetX) {
if (!elm.hasEscapeLeft) { elm.hasEscapeLeft = true; elm.escapeLeft = 0; }
elm.escapeLeft += intOffsetX;
elm.style.left = String(elm.escapeLeft) + 'px';
}
function doEscapeCore(intTimes) {
if (!intTimes) { cancelEscape(); return; }
if (!window.strDirection) {
bEscaping = true;
var intDirection = Math.floor(Math.random() * 4);
window.strDirection = window.strDirectionArray[intDirection];
}
var elm = byId('id_div');
var intOffsetY = (window.strDirection == 'Up') ? (0 - window.intDistance) : (window.strDirection == 'Down') ? window.intDistance : 0;
var intOffsetX = (window.strDirection == 'Left') ? (0 - window.intDistance) : (window.strDirection == 'Right') ? window.intDistance : 0;
addTop(elm, intOffsetY);
addLeft(elm, intOffsetX);
window.setTimeout('doEscapeCore(' + String(intTimes - 1) + ');', 50);
}
function doEscape(intTimes) {
if (window.bEscaping) return;
window.bEscaping = true;
doEscapeCore(intTimes)
}
function cancelEscape() {
window.strDirection = null;
window.bEscaping = false;
byId('id_txt_dir').value = window.strDirection;
}
function resetEscape() {
window.strDirection = null;
window.bEscaping = false;
var elm = byId('id_div');
elm.hasEscapeTop = false;
elm.hasEscapeLeft = false;
addTop(elm, 0);
addLeft(elm, 0);
}
function doClick() {
alert('あら、捕まってしまったわ！')
}
function onWindowLoad() {
var par, elm;
par = byId('id_div_base');
elm = document.createElement('input')
elm.id = 'id_btn_reset'
elm.type = 'button';
elm.value = 'ボタン位置のリセット';
elm.addEvent('click', function () { resetEscape(); }, false);
par.appendChild(elm);
par = byId('id_div_base');
elm = document.createElement('div')
elm.id = 'id_div_par'
elm.style.position = 'relative';
elm.style.width = '350px';
elm.style.height = '500px';
elm.style.height = '200px';
elm.style.borderStyle = 'Solid';
elm.style.borderWidth = '1px';
elm.style.borderColor = 'Black';
par.appendChild(elm);
par = byId('id_div_par');
elm = document.createElement('div')
elm.id = 'id_div'
elm.style.position = 'absolute';
elm.style.padding = '40px';
elm.addEvent('click', function () { doEscape(8); }, false);
elm.addEvent('mouseover', function () { doEscape(4); }, false);
elm.addEvent('mousemove', function () { doEscape(4); }, false);
par.appendChild(elm);
par = byId('id_div');
elm = document.createElement('input')
elm.id = 'id_btn'
elm.type = 'button';
elm.value = 'わたしを捕まえて！';
elm.addEvent('click', function () { doClick(); }, false);
elm.addEvent('mouseover', function () { canselEscape(); doEscape(8); }, false);
par.appendChild(elm);
par = byId('id_div_base');
elm = document.createElement('input')
elm.id = 'id_btn_reset_2'
elm.type = 'button';
elm.value = 'ボタン位置のリセット';
elm.addEvent('click', function () { resetEscape(); }, false);
par.appendChild(elm);
}
window.addEvent('load', onWindowLoad, true);
//]]
</script>
</head>
<body>
<div id="id_div_base">
</div>
</body>
</html>
いままでエントリーにしてないテクニックをいくつか使ってます。
これらは、おいおいエントリーにしていきます。
みみちゃん さん
-
nice! 116
記事 47
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
画面の外に逃げて行ってしまいます。
「あら、捕まってしまったわ」がかわいいですね。
by いいだや (2010-12-11 23:47)
書き忘れてました･･････ボタンの位置を戻したいときは、[ボタン位置のリセット] ボタンを押せば、初期位置に戻ります。
[ボタン位置のリセット] ボタンは、上と下に２つあります。
上下どちらかが押せない状態もありえるので、どちらかが押せなくなったら、逆の方を押してみてくださいね。
by みみちゃん (2010-12-12 13:46)
<title>逃げるボタン</title>
elm
出席番号＃1（結構バックれますが）、パラメータ設定の雰囲気は感じます
by One-for-you (2010-12-19 00:35)
そういう部分を感じでもらえると、書き手としてはうれしいです。
by みみちゃん (2010-12-19 11:21)