プレインズウォーク間近になると視界がモノクロになる〜.js
code:s.js
const clickRandomJumpButton = () => {
const button = document.querySelector('.random-jump-button.tool-btn.link-btn');
// ボタンが存在する場合はクリック
if (button) {
button.click();
}
};
// 初回実行
clickRandomJumpButton();
// 25秒間で徐々にモノクロに変化する処理
const startTime = Date.now();
const duration = 25000; // 25秒
const initialGrayscale = 0; // 初期のモノクロ度(0から1の範囲)
const targetGrayscale = 1; // 目標のモノクロ度
function changeGrayscale() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 進行度を計算
const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress < 1) {
requestAnimationFrame(changeGrayscale); // アニメーションを続行
}
}
// ページ遷移後、アニメーションを開始
setTimeout(changeGrayscale, 0); // すぐに実行
// 30秒ごとにボタンをクリック
setInterval(clickRandomJumpButton, 30 * 1000);
課題
クリック後にカラーをデフォルトに戻す
遷移後、アニメーションを開始するのはもうすこし後で良い
15秒くらい?
50%で開始、95%時点で完了している、としたい
code:s2.js
const clickRandomJumpButton = () => {
const button = document.querySelector('.random-jump-button.tool-btn.link-btn');
// ボタンが存在する場合はクリック
if (button) {
button.click();
const randomInterval = Math.random() * (60 - 10) + 10; // 10秒から60秒の間でランダムな間隔を生成
setTimeout(() => {
resetColor();
}, randomInterval * 1000);
}
};
// 初回実行
clickRandomJumpButton();
// モノクロにするアニメーション
const duration = 25000; // 25秒
const initialGrayscale = 0; // 初期のモノクロ度
const targetGrayscale = 1; // 目標のモノクロ度
function changeGrayscale() {
const startTime = Date.now();
function animate() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress < 1) {
requestAnimationFrame(animate);
}
}
animate();
}
// カラーに戻す処理
function resetColor() {
document.body.style.filter = "grayscale(0%)";
}
// ページ遷移後、アニメーションを開始
setTimeout(changeGrayscale, 0);
// 最初のボタンクリックの後に最初のランダムな間隔でカラーに戻る
setTimeout(resetColor, Math.random() * (60 - 10) + 10 * 1000);
// ボタンクリック間隔をランダムに設定
function scheduleRandomButtonClick() {
const randomInterval = Math.random() * (60 - 10) + 10; // 10秒から60秒の間でランダムな間隔を生成
setTimeout(() => {
clickRandomJumpButton();
scheduleRandomButtonClick();
}, randomInterval * 1000);
}
scheduleRandomButtonClick();
ちょっとズレてるなcFQ2f7LRuLYP.icon
setTimeout(changeGrayscale, 0)は素直に読むと0ミリ秒後にchangeGrayscaleを実行するという処理
code:eg.js
setTimeout(() => console.log("2nd"), 0);
console.log("1nd");
これを実行すると、コンソールには1nd→2ndの順で表示される
ちなみに、このように実行順序がコードの流れと一致しない処理は非同期処理に属する 今回は実行順序を変える必要がなさそうなので、外して問題ない
将来レベルアップして帰ってきたcFQ2f7LRuLYP.iconさん用に書いといたtakker.icon
帰ってこれるかな〜?cFQ2f7LRuLYP.icon
あざますあざますcFQ2f7LRuLYP.icon
コード可読能力すげ〜
cFQ2f7LRuLYP.iconがくずし字読んでるときは逆にこう見えてるのかもしれない
構造は同じだと思いますtakker.icon
あれ、もしかしてimport "/api/code/issac-37765679/プレインズウォーク間近になると視界がモノクロになる〜.js/s.js"でコードを実行してますか。それはまずいtakker.icon
コードブロック名をクリックしてソースコードを開くとわかる
別の名前にすれば解決する
おっとこの状態で井戸端にいくとまずい。シークレットウインドウで開いてください
動かしてないです!cFQ2f7LRuLYP.icon
(私のユーザーページに細工されていない限りは)井戸端に行ったときだけ発動する仕組み
井戸端を何だと思ってるんだ…?
とはいえ、これを読みやすく直すにはまだ使ってない技術が必要……
なのでツッコミづらいなと思っている
いや、settimeoutもgpt先生が教授してくれたことだろうし、ほかの技術を使ったとしてもgpt先生に聞けばissacさんなら理解できるだろう。
ということで書く(天下無双)
code:t.js
const sleep = (miliseconds) => new Promise((resolve) => setTimeout(resolve, miliseconds));
// 10秒から60秒の間でランダムな間隔で待つ
const randomSleep = () => {
const randomInterval = (Math.random() * (60 - 10) + 10) * 1000;
return sleep(randomInterval);
};
// モノクロにするアニメーション
const duration = 25000; // 25秒
const initialGrayscale = 0; // 初期のモノクロ度
const targetGrayscale = 1; // 目標のモノクロ度
// カラーに戻す処理
function resetColor() {
document.body.style.filter = "grayscale(0%)";
}
const scheduleRandomButtonClick = async () => {
// ランダムな間隔でボタンを押す
while (true) {
await randomSleep();
const button = document.querySelector('.random-jump-button.tool-btn.link-btn');
if (!button) continue;
button.click();
// ボタンクリックの後にランダムな間隔でカラーを戻す
await randomSleep();
resetColor();
// ページ遷移後、アニメーションを開始
const startTime = Date.now();
while (true) {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress >= 1) break;
await new Promise(
(resolve) => requestAnimationFrame(resolve),
);
}
}
};
scheduleRandomButtonClick();
できた。今スマホしかないので動作確認はしかねるtakker.icon
スマホでこれほどの技を…cFQ2f7LRuLYP.icon
短い!
とりあえずこれを先生に流し込めば、教えてくれるはず
実話寓話
「先生、漢文ってどうやったら読めるようになりますか!?」
『そうですね…読みたい漢文を持ってきて、わからないところがあれば辞書を引くと良いですね』
「ぎゃあ〜」
一連の処理を考えていたが、別々のScriptとして独立させても良い気がしてきた