トグルボタンで、"マウスストーカー"とマウスポイントを追従，もしくは分離させるコードの書き方
下記のコードは、トグルボタンで"マウスストーカー"とマウスポイントを追従，もしくは分離させようと試みた失敗作です。これを成功させるには、どのように書き換えればいいでしょうか。
うまく行っていたのですが、コードを誤って消してしまい、書き方を忘れてしまいました。
分かる方は、教えていただけないでしょうか。コードと、問題箇所は、下記の通りです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
.Face {
position: absolute;
height: 10;
widdth: 10;
text-align: center;
font-size: 1em;
color: #0000ff;
}
.Hours {
position: absolute;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 16px;
color: #000000;
text-align: center;
font-weight: bold;
}
.Minutes {
position: absolute;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 16px;
color: #000000;
text-align: center;
font-weight: bold;
}
.Seconds {
position: absolute;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 16px;
color: #ff0000;
text-align: center;
font-weight: bold;
}
.Date {
position: absolute;
height: 10;
width: 10;
font-size: 1em;
color: #00ff00;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div id="clock">
<div id="Od" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Of" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Oh" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Om" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Os" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
</div>
<script type="text/javascript">
"use strict";
function $(sel) {
return document.getElementById(sel);
}
function $$(sel) {
return document.getElementsByClassName(sel);
}
function setPosition(element, y, x) {
element.style.top = y + 'px';
element.style.left = x + 'px';
}
var CLOCK_HEIGHT = 55,
CLOCK_WIDTH = 55,
CLOCK_FROM_MOUSE_Y = -200,
CLOCK_FROM_MOUSE_X = 0;
var H = '✴✴✴',
H = H.split('');
var M = '✴✴✴✴',
M = M.split('');
var S = '・・・・・',
S = S.split('');
var SPEED = 0.4,
FACES ='✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴',
FACES = FACES.split(' ');
var HAND_HEIGHT = CLOCK_HEIGHT / 4.5;
var HAND_WIDTH = CLOCK_WIDTH / 4.5;
var HAND_Y = -7,
HAND_X = -2.5,
STEP = 0.03;
var ymouse = 180,
xmouse = 520;
var currStep = 0;
var lastBasePositions = [];
function initialize() {
for (var i = 0; i < FACES.length; ++i) {
lastBasePositions[i] = {x:0, y:0};
}
var html = '';
// Face wrapper
html = '';
for (var i = 0; i < FACES.length; ++i) {
html += '<div class="Face">' + FACES[i] + '</div>';
}
$('Of').children[0].innerHTML = html;
// Hours wrapper
html = '';
for (var i = 0; i < H.length; ++i) {
html += '<div class="Hours">' + H[i] + '</div>';
}
$('Oh').children[0].innerHTML = html;
// Minute wrapper
html = '';
for (var i = 0; i < M.length; ++i) {
html += '<div class="Minutes">' + M[i] + '</div>';
}
$('Om').children[0].innerHTML = html;
// Seconds wrapper
html = '';
for (var i = 0; i < S.length; ++i) {
html += '<div class="Seconds">' + S[i] + '</div>';
}
$('Os').children[0].innerHTML = html;
// Mouse move event handler
function Mouse(evnt)
{
if (typeof evnt === 'undefined')
{
ymouse = event.Y + CLOCK_FROM_MOUSE_Y;
xmouse = event.X + CLOCK_FROM_MOUSE_X;
}
else
{
ymouse = evnt.clientY + CLOCK_FROM_MOUSE_Y;
xmouse = evnt.clientX + CLOCK_FROM_MOUSE_X;
}
};
document.onmousemove = null;
requestAnimationFrame(ClockAndAssign);
}
var lastYearPositions = [{x:0, y:0}];
var lastYearString = ' ';
var lastYearMonthDateDay = '';
function updateYear(currentDate, scrll) {
var yearString = lastYearString;
if (currentDate.getHours() < 12) {
if (lastYearMonthDateDay != 'wa1')
yearString = currentDate.toLocaleDateString("ja-JP-u-ca-japanese", { era: "long", year: "numeric", month: "numeric", day: "numeric", weekday: "long" }).
replace(/\u200e/g, "").replace(" ", "");
lastYearMonthDateDay = 'wa1';
} else {
if (lastYearMonthDateDay != 'wa2')
yearString = currentDate.toLocaleDateString("ja-JP-u-ca-japanese", { era: "long", year: "numeric", month: "numeric", day: "numeric", weekday: "long" }).
replace(/\u200e/g, "").replace(" ", "");
lastYearMonthDateDay = 'wa2';
}
var yearLength = lastYearPositions.length;
if (yearString != lastYearString) {
lastYearString = yearString;
var yearCharacters = yearString.split('');
yearLength = yearCharacters.length;
// Date wrapper
var html = '';
for (var i = 0; i < yearLength; ++i) {
html += '<div class="Date">' + yearCharacters[i] + '</div>';
}
$('Od').children[0].innerHTML = html;
}
var positions = [{}];
var lastPosition = lastYearPositions[0];
positions[0].y = lastPosition.y + ((ymouse) - lastPosition.y) * SPEED;
positions[0].x = lastPosition.x + ((xmouse) - lastPosition.x) * SPEED;
for (var i = 1; i < yearLength; ++i) {
lastPosition = i < lastYearPositions.length ?
lastYearPositions[i] :
lastYearPositions[lastYearPositions.length - 1];
positions[i] = {};
positions[i].y = lastPosition.y + (positions[i-1].y - lastPosition.y) * SPEED;
positions[i].x = lastPosition.x + (positions[i-1].x - lastPosition.x) * SPEED;
}
for (var i = 0; i < yearLength; ++i) {
var radian = currStep + i * (360 / yearLength) * Math.PI / 180;
setPosition($$('Date')[i],
Math.round(positions[i].y) + CLOCK_HEIGHT * 1.5 * Math.sin(radian) + scrll,
Math.round(positions[i].x) + CLOCK_WIDTH * 1.5 * Math.cos(radian));
}
lastYearPositions = positions;
currStep -= STEP;
}
function ClockAndAssign() {
var date = new Date();
var secs = date.getSeconds();
var sec = -1.57 + Math.PI * secs / 30;
var mins = date.getMinutes();
var min = -1.57 + Math.PI * mins / 30;
var hr = date.getHours();
var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(date.getMinutes(), 10) / 360;
$('Od').style.top = window.document.body.scrollTop;
$('Of').style.top = window.document.body.scrollTop;
$('Oh').style.top = window.document.body.scrollTop;
$('Om').style.top = window.document.body.scrollTop;
$('Os').style.top = window.document.body.scrollTop;
var scrll = 0;
var positions = [{}];
var lastPosition = lastBasePositions[0];
positions[0].y = (lastPosition.y + (ymouse - lastPosition.y) * SPEED);
positions[0].x = (lastPosition.x + (xmouse - lastPosition.x) * SPEED);
for (var i = 1; i < FACES.length; ++i) {
lastPosition = lastBasePositions[i];
positions[i] = {};
positions[i].y = (lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
positions[i].x = (lastPosition.x + (positions[i - 1].x - lastPosition.x) * SPEED);
}
lastBasePositions = positions;
var split = 360 / FACES.length;
for (var i = 0; i < FACES.length; ++i) {
var radian = -1.0471 + i * split * Math.PI / 180;
setPosition($$('Face')[i],
positions[i].y + CLOCK_HEIGHT * Math.sin(radian) + scrll,
positions[i].x + CLOCK_WIDTH * Math.cos(radian));
}
for (var i = 0; i < H.length; ++i) {
setPosition($$('Hours')[i],
positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(hrs) + scrll,
positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(hrs));
}
for (var i = 0; i < M.length; ++i) {
setPosition($$('Minutes')[i],
positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(min) + scrll,
positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(min));
}
for (var i = 0; i < S.length; ++i) {
setPosition($$('Seconds')[i],
positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(sec) + scrll,
positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(sec));
}
updateYear(date, scrll);
requestAnimationFrame(ClockAndAssign);
}
var vis=true;
function toggle(){
vis=!vis;
document.getElementById("tog").value=vis?"STALK":"breakOFF";
if(vis){
ymouse = 180,
xmouse = 520;
document.onousemove=Mouse;
}
else{
document.onmousemove=null;
}
}
initialize();
</script>
<div style="position:absolute; bottom:15%; width:100%; text-align:center;">
<input id="tog" type="button" value="STALK" onclick="toggle();">
</div>
</body>
</html>
問題箇所です。
// Mouse move event handler
function Mouse(evnt)
{
if (typeof evnt === 'undefined')
{
ymouse = event.Y + CLOCK_FROM_MOUSE_Y;
xmouse = event.X + CLOCK_FROM_MOUSE_X;
}
else
{
ymouse = evnt.clientY + CLOCK_FROM_MOUSE_Y;
xmouse = evnt.clientX + CLOCK_FROM_MOUSE_X;
}
};
document.onmousemove = null;
requestAnimationFrame(ClockAndAssign);
そして、もう１箇所です。
var vis=true;
function toggle(){
vis=!vis;
document.getElementById("tog").value=vis?"STALK":"breakOFF";
if(vis){
ymouse = 180,
xmouse = 520;
document.onousemove=Mouse;
}
else{
document.onmousemove=null;
}
}