terminal

ハッカー演出

view source

JavaScript

document.title = 'terminal';
//ハッカー演出


const terminal = document.getElementById("terminal");

const scriptLines = [
  { command: "welcome.", response: "tekitou ni key wo utte kudasai ..." },
  { command: "init_connection --target 172.30.22.94 --protocol ssh", response: "[+] Handshake established\n[+] Attempting auth bypass..." },
  { command: "exploit --payload ./scripts/zero_day_bypass.py --mode silent", response: "[+] Exploit succeeded. Privilege escalated: USER -> ROOT" },
  { command: "whoami", response: "root" },
  { command: "cd /var/logs/", response: "" },
  { command: "ls -la | grep access", response: "-rw-r--r-- 1 root root   8233 Jun 20  access.log\n-rw-r--r-- 1 root root 124512 Jun 19  access.log.1" },
  { command: "rm -rf access.log*", response: "" },
  { command: "history -c", response: "" },
  { command: "logout", response: "Connection closed.\n[Session terminated: 03:41:58]" },
  { command: "cd /opt/secure/", response: "" },
  { command: "cat credentials.db | base64 -d", response: "[+] Decoding credentials...\nuser: admin\npass: H@ckM3Plz!23" },
  { command: "scp ./dump/data.tar.gz root@10.0.0.12:/tmp/exfil/", response: "[+] Transfer complete" },
  { command: "touch ~/.bash_logout && echo 'echo Goodbye.' >> ~/.bash_logout", response: "" },
  { command: "unset HISTFILE", response: "" },
  { command: "rm -rf /tmp/*", response: "[+] Temporary files purged" },
  { command: "cd / && umount /mnt/secure", response: "[+] Secure volume unmounted" },
  { command: "logout", response: "Connection closed.\n[Session terminated: 04:07:22]" }
];

let currentLine = 0;
let charIndex = 0;
let isTyping = false;
let autoTyping = false;
let commandBuffer = "";

const cursor = '<span class="cursor">&nbsp;</span>';

function updateTerminal() {
  terminal.innerHTML = commandBuffer + cursor;
  terminal.scrollTop = terminal.scrollHeight;
}

function typeNextChar() {
  if (currentLine >= scriptLines.length) return;

  const currentCommand = scriptLines[currentLine].command;

  if (charIndex < currentCommand.length) {
    commandBuffer += currentCommand[charIndex++];
    updateTerminal();
  } else if (!isTyping) {
    isTyping = true;
    setTimeout(() => {
      commandBuffer += "\n" + scriptLines[currentLine].response + "\n\n";
      currentLine++;
      charIndex = 0;
      isTyping = false;
      updateTerminal();
    }, 500);
  }
}

document.addEventListener("keydown", (e) => {
  typeNextChar();
});

// 初期表示
updateTerminal();



function autoTypeNext() {
  if (!autoTyping || currentLine >= scriptLines.length) return;

  const currentCommand = scriptLines[currentLine].command;

  if (charIndex < currentCommand.length) {
    commandBuffer += currentCommand[charIndex++];
    updateTerminal();
    setTimeout(autoTypeNext, 50); // タイピング速度(ms)
  } else if (!isTyping) {
    isTyping = true;
    setTimeout(() => {
      commandBuffer += "\n" + scriptLines[currentLine].response + "\n\n";
      currentLine++;
      charIndex = 0;
      isTyping = false;
      updateTerminal();
      setTimeout(autoTypeNext, 300); // 次のコマンドへの間隔
    }, 500);
  }
}


















const authModal = document.getElementById("authModal");
const authInput = document.getElementById("authInput");
const authStatus = document.getElementById("authStatus");
const authBox = document.getElementById("authBox");

document.addEventListener("keydown", (e) => {
  if (e.code === "Space" && authModal.style.display === "none") {
    e.preventDefault();
    authModal.style.display = "flex";
    authInput.value = "";
    authInput.focus();
    authStatus.textContent = "";
    authBox.classList.remove("failed");
  }
  // Ctrlキーを押すと自動タイピング開始
  if (e.key === "Control") {
    autoTyping = true;
    autoTypeNext();
  }


  if (authModal.style.display === "flex") {
    if (e.key === "Shift") {
      authStatus.textContent = "AUTH FAILED";
      authBox.classList.add("failed");
    } else if (e.key === "Enter") {
      authStatus.textContent = "SUCCESS";
      authStatus.classList.add("success");
      authBox.classList.add("success");
      authBox.classList.remove("failed");
      setTimeout(() => {
        authModal.style.display = "none";
        authStatus.textContent = "";
        authStatus.classList.remove("success");
        authBox.classList.remove("success");
      }, 3000);
    }
  }
});

// アスタリスクでマスク
authInput.addEventListener("input", (e) => {
  const val = e.target.value;
  e.target.setAttribute("data-real", val);
  e.target.value = "*".repeat(val.length);
});

CSS

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/hacker-terminal/

ABOUT

hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

仕様変更、API廃止等、実験途中で動かないページもあります。