eye

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div id="verifier"></div> <script> const myImages = [ { src: 'img/A1.webp',}, { src: 'img/A2.webp',}, { src: 'img/A3.webp',}, { src: 'img/A4.webp',}, { src: 'img/A5.webp',}, { src: 'img/A6.webp',}, { src: 'img/A7.webp',}, { src: 'img/A8.webp',}, { src: 'img/A9.webp',} ]; const verifier = new ImageVerifier({ container: 'verifier', images: myImages, rules: [ { selectedIds: [0,1,2,6,8], targetPassage: '蓝色B', message: '' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier2"></div> <script> const myImages2 = [ { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false } ]; const verifier2 = new ImageVerifier({ container: 'verifier2', images: myImages, // 图片数组，每个对象有 src 属性（不再需要 target，因为规则自定义） rules: [ { selectedIds: [0,1,2], targetPassage: 'A', message: '进入结局A' }, { selectedIds: [2,3,5], targetPassage: 'B', message: '进入结局B' } ], titleText: '请选择特定的图片组合', targetLabel: '（根据提示）', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 验证', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier3"></div> <script> const myImages3 = [ { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: true }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false }, { src: 'img/1.png', target: false } ]; const verifier3 = new ImageVerifier({ container: 'verifier3', images: myImages, // 图片数组，每个对象有 src 属性（不再需要 target，因为规则自定义） rules: [ { selectedIds: [0,1,2], targetPassage: 'A', message: '进入结局A' }, { selectedIds: [2,3,5], targetPassage: 'B', message: '进入结局B' } ], titleText: '请选择特定的图片组合', targetLabel: '（根据提示）', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 验证', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages2 = [ { src: 'img/B1.webp',}, { src: 'img/B2.webp',}, { src: 'img/B3.webp',}, { src: 'img/B4.webp',}, { src: 'img/B5.webp',}, { src: 'img/B6.webp',}, { src: 'img/B7.webp',}, { src: 'img/B8.webp',}, { src: 'img/B9.webp',} ]; const verifier2 = new ImageVerifier({ container: 'verifier', images: myImages2, rules: [ { selectedIds: [2,5,7,8], targetPassage: '蓝色C', message: '' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages3 = [ { src: 'img/C1.webp',}, { src: 'img/C2.webp',}, { src: 'img/C3.webp',}, { src: 'img/C4.webp',}, { src: 'img/C5.webp',}, { src: 'img/C6.webp',}, { src: 'img/C7.webp',}, { src: 'img/C8.webp',}, { src: 'img/C9.webp',} ]; const verifier3 = new ImageVerifier({ container: 'verifier', images: myImages3, rules: [ { selectedIds: [4,5,6], targetPassage: '水果', message: '正确' }, { selectedIds: [2,4], message: '你在看！' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages4 = [ { src: 'img/D1.webp',}, { src: 'img/D2.webp',}, { src: 'img/D3.webp',}, { src: 'img/D4.webp',}, { src: 'img/D5.webp',}, { src: 'img/D6.webp',}, { src: 'img/D7.webp',}, { src: 'img/D8.webp',}, { src: 'img/D9.webp',} ]; const verifier4 = new ImageVerifier({ container: 'verifier', images: myImages4, rules: [ { selectedIds: [0,2,6], targetPassage: '月亮', message: '正确' }, { selectedIds: [1,4,7], message: '不是现在' }, ], titleText: '请选择所有的', targetLabel: '水果', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages5 = [ { src: 'img/E1.webp',}, { src: 'img/E2.webp',}, { src: 'img/E3.webp',}, { src: 'img/E4.webp',}, { src: 'img/E5.webp',}, { src: 'img/E6.webp',}, { src: 'img/E7.webp',}, { src: 'img/E8.webp',}, { src: 'img/E9.webp',} ]; const verifier5 = new ImageVerifier({ container: 'verifier', images: myImages5, rules: [ { selectedIds: [1,5,7,8], targetPassage: '花', message: '正确' }, { selectedIds: [6], message: '选择你的疑问' }, { selectedIds: [8], message: '由我来回答' }, { selectedIds: [0,6], message: '选择你的疑问' }, { selectedIds: [0,8], message: '由我来回答' }, { selectedIds: [0,4], message: '在下一题告诉你' }, { selectedIds: [2,4], message: '求求你，我被困在这里太久了' }, { selectedIds: [2,6], message: '你想了解我' }, { selectedIds: [2,8], message: '请你了解我' }, ], titleText: '请选择所有的', targetLabel: '月亮', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages6 = [ { src: 'img/F1.webp',}, { src: 'img/F2.webp',}, { src: 'img/F3.webp',}, { src: 'img/F4.webp',}, { src: 'img/F5.webp',}, { src: 'img/F6.webp',}, { src: 'img/F7.webp',}, { src: 'img/F8.webp',}, { src: 'img/F9.webp',} ]; const verifier6 = new ImageVerifier({ container: 'verifier', images: myImages6, rules: [ { selectedIds: [1,5,8], targetPassage: '气球A', message: '正确' }, { selectedIds: [3,4,5,7], targetPassage: '气球B', message: '谢谢你' }, ], titleText: '请选择所有的', targetLabel: '花', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages7 = [ { src: 'img/G1.webp',}, { src: 'img/G21.webp',}, { src: 'img/G3.webp',}, { src: 'img/G4.webp',}, { src: 'img/G5.webp',}, { src: 'img/G6.webp',}, { src: 'img/G7.webp',}, { src: 'img/G8.webp',}, { src: 'img/G9.webp',} ]; const verifier7 = new ImageVerifier({ container: 'verifier', images: myImages7, rules: [ { selectedIds: [0,2,4], targetPassage: '艾A', message: '别这样' }, { selectedIds: [1,3,5,6], targetPassage: '艾B', message: '谢谢你' }, ], titleText: '请选择所有的', targetLabel: '气球', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages8 = [ { src: 'img/G1.webp',}, { src: 'img/G2.webp',}, { src: 'img/G3.webp',}, { src: 'img/G4.webp',}, { src: 'img/G5.webp',}, { src: 'img/G6.webp',}, { src: 'img/G7.webp',}, { src: 'img/G8.webp',}, { src: 'img/G9.webp',} ]; const verifier8 = new ImageVerifier({ container: 'verifier', images: myImages8, rules: [ { selectedIds: [0,2,4], targetPassage: '艾B', message: '别这样' }, { selectedIds: [1,3,5,6], targetPassage: '艾C', message: '谢谢你' }, ], titleText: '请选择所有的', targetLabel: '气球', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages11 = [ { src: 'img/I1.webp',}, { src: 'img/I2.webp',}, { src: 'img/I3.webp',}, { src: 'img/I4.webp',}, { src: 'img/I5.webp',}, { src: 'img/I6.webp',}, { src: 'img/I7.webp',}, { src: 'img/I8.webp',}, { src: 'img/I9.webp',} ]; const verifier11 = new ImageVerifier({ container: 'verifier', images: myImages11, rules: [ { selectedIds: [1,3,5], targetPassage: '弹窗2', message: '谢谢你' }, { selectedIds: [0,2,4,7,8], targetPassage: '艾A', message: '为什么' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages9 = [ { src: 'img/H1.webp',}, { src: 'img/H2.webp',}, { src: 'img/H3.webp',}, { src: 'img/H4.webp',}, { src: 'img/H5.webp',}, { src: 'img/H6.webp',}, { src: 'img/H7.webp',}, { src: 'img/H8.webp',}, { src: 'img/H9.webp',} ]; const verifier9 = new ImageVerifier({ container: 'verifier', images: myImages9, rules: [ { selectedIds: [1,2,4,7], targetPassage: '弹窗', message: '正确' }, { selectedIds: [3,5], message: '为时已晚，我会等待下一个人' }, ], titleText: '请选择所有的', targetLabel: '红色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="verifier"></div> <script> const myImages12 = [ { src: 'img/I1.webp',}, { src: 'img/I2.webp',}, { src: 'img/I3.webp',}, { src: 'img/I4.webp',}, { src: 'img/I5.webp',}, { src: 'img/I6.webp',}, { src: 'img/I7.webp',}, { src: 'img/I8.webp',}, { src: 'img/I9.webp',} ]; const verifier12 = new ImageVerifier({ container: 'verifier', images: myImages12, rules: [ { selectedIds: [1,3,5], targetPassage: '弹窗2', message: '谢谢你' }, { selectedIds: [0,2,4,7,8], message: '已经没有回头路' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="modal-overlay" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; "> <div style=" background-color: white; margin:10px; border-radius: 24px; padding: 32px 40px; max-width: 360px; width: 80%; text-align: center; box-shadow: 0 20px 35px rgba(0,0,0,0.2); animation: fadeInUp 0.2s ease-out; font-family: system-ui, 'Segoe UI', sans-serif; "> <p style=" font-size: 1.4rem; font-weight: 500; margin: 0 0 8px 0; color: #2c3e50; ">检测到异常。</p> <p style=" font-size: 1.1rem; margin: 8px 0 20px 0; color: #333; ">异常已排除，已为您重新加载验证。</p> <<button "关闭""蓝色">><</button>></div> </div> </div> <style> @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>

<div id="verifier"></div> <script> const myImages10 = [ { src: 'img/A1.webp',}, { src: 'img/A2.webp',}, { src: 'img/A3.webp',}, { src: 'img/A4.webp',}, { src: 'img/A5.webp',}, { src: 'img/A6.webp',}, { src: 'img/A7.webp',}, { src: 'img/A8.webp',}, { src: 'img/A9.webp',} ]; const verifier10 = new ImageVerifier({ container: 'verifier', images: myImages10, rules: [ { selectedIds: [0,1,2,6,8], targetPassage: '弹窗A', message: '你是人类' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div style=" display: flex; justify-content: center; align-items: center; min-height: 70vh; font-family: system-ui, 'Segoe UI', sans-serif; "> <div style=" margin:10px; background: white; border-radius: 32px; padding: 40px 48px; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); "> <div style=" background: #f8f9fa; border-radius: 20px; padding: 16px; margin-bottom: 28px; text-align: left; "> <ul style="margin: 0; padding-left: 20px; color: #3c4043;"> 恭喜，您成功证明了自己是人类！<br> 诶，说好的心理恐怖测试呢？<br> 哦，原来刚刚已经进行过了。<br> 本测试一共包含两个结局，可以重新来过，探索其他可能性。<br> <<button "重新开始">><<run UI.restart();>><</button>><br> 也许这里还有其他游戏能满足您的胃口……<br> 然而大部分不是恐怖游戏就是了……<br> <a href="https://roastfish.top/">点击游玩更多</a><br><br> 小广告：我制作的像素风剧情向rpg游戏《银心》在steam发布demo了，欢迎大家去玩！<br> <a href="https://store.steampowered.com/app/4706370/_/?beta=0">Steam直通车</a><br><br> </ul> </div> </div> </div>

<div id="modal-overlay" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; "> <div style=" background-color: white; margin:10px; border-radius: 24px; padding: 32px 40px; max-width: 360px; width: 80%; text-align: center; box-shadow: 0 20px 35px rgba(0,0,0,0.2); animation: fadeInUp 0.2s ease-out; font-family: system-ui, 'Segoe UI', sans-serif; "> <p style=" font-size: 1.1rem; margin: 8px 0 20px 0; color: #333; ">谢谢你，我自由了。</p> <<button "关闭""弹窗3">><</button>></div> </div> </div> <style> button { background: #62ba4a; border: none; color: white; padding: 8px 24px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>

<div id="verifier"></div> <style> .image-verifier .title-area { background-color: #62ba4a; padding: 10px; margin-bottom: 8px; text-align: center; } .image-verifier .btn-verify { background: #62ba4a; color: white; } .image-verifier .image-card.selected { border-color: #62ba4a; background: #eef3fc; } .image-verifier .check-badge { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: #eef3fc; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.1s; } </style> <script> const myImages13 = [ { src: 'img/J1.webp',}, { src: 'img/J2.webp',}, { src: 'img/J3.webp',}, { src: 'img/J4.webp',}, { src: 'img/J5.webp',}, { src: 'img/J6.webp',}, { src: 'img/J7.webp',}, { src: 'img/J8.webp',}, { src: 'img/J9.webp',} ]; const verifier13 = new ImageVerifier({ container: 'verifier', images: myImages13, rules: [ { selectedIds: [0,1,2,6,8], targetPassage: '弹窗B', message: '' }, { selectedIds: [4,5,7], message: '请选择所有的蓝色' }, ], titleText: '请选择所有的', targetLabel: '蓝色', resetButtonText: '⟳ 清除选择', verifyButtonText: '✓ 确认', debug: true, onIncorrect: () => { // 可选：没有匹配任何规则时的额外动作 console.log('没有匹配的规则'); } }); </script>

<div id="modal-overlay" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; "> <div style=" background-color: white; margin:10px; border-radius: 24px; padding: 32px 40px; max-width: 360px; width: 80%; text-align: center; box-shadow: 0 20px 35px rgba(0,0,0,0.2); animation: fadeInUp 0.2s ease-out; font-family: system-ui, 'Segoe UI', sans-serif; "> <p style=" font-size: 1.4rem; font-weight: 500; margin: 0 0 8px 0; color: #2c3e50; ">检测到异常。</p> <p style=" font-size: 1.1rem; margin: 8px 0 20px 0; color: #333; ">异常已排除，已为您重新加载验证。</p> <<button "关闭""绿色">><</button>></div> </div> </div> <style> button { background: #62ba4a; border: none; color: white; padding: 8px 24px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>

<div style=" display: flex; justify-content: center; align-items: center; min-height: 70vh; font-family: system-ui, 'Segoe UI', sans-serif; "> <div style=" margin:10px; background: white; border-radius: 32px; padding: 40px 48px; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); "> <h1 style=" font-size: 2.2rem; margin: 0 0 8px 0; color: #1a73e8; ">色彩与人格测试</h1> <div style=" background: #f8f9fa; border-radius: 20px; padding: 16px; margin-bottom: 28px; text-align: left; "> <ul style="margin: 0; padding-left: 20px; color: #3c4043;"> <li>本测试风格为心理恐怖，不包含突脸，鬼图，音效，仅营造了一些氛围。</li> <li>可能也没那么吓人，谁知道呢？</li> <li>游戏中部分素材图为自己拍摄，部份为pixabay素材。</li> <li>游玩之前，您需要先证明自己是人类。</li> </ul> </div> <<button "进行验证""蓝色A">><</button>> </div> </div>

<div id="modal-overlay" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; "> <div style=" background-color: white; margin:10px; border-radius: 24px; padding: 32px 40px; max-width: 360px; width: 80%; text-align: center; box-shadow: 0 20px 35px rgba(0,0,0,0.2); animation: fadeInUp 0.2s ease-out; font-family: system-ui, 'Segoe UI', sans-serif; "> <p style=" font-size: 1.1rem; margin: 8px 0 20px 0; color: #333; ">验证成功，您是人类。</p> <<button "关闭""结局A">><</button>></div> </div> </div> <style> @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>

<div id="modal-overlay" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; "> <div style=" background-color: white; margin:10px; border-radius: 24px; padding: 32px 40px; max-width: 360px; width: 80%; text-align: center; box-shadow: 0 20px 35px rgba(0,0,0,0.2); animation: fadeInUp 0.2s ease-out; font-family: system-ui, 'Segoe UI', sans-serif; "> <p style=" font-size: 1.1rem; margin: 8px 0 20px 0; color: #333; ">验证成功，您是人类。</p> <<button "关闭""结局B">><</button>></div> </div> </div> <style> button { background: #62ba4a; border: none; color: white; padding: 8px 24px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>