three实现摄像头捕获头部运动穿过洋娃娃到达终点的鱿鱼游戏
代码语言:html
所属分类:游戏
代码描述:three实现一个红灯绿灯鱿鱼游戏,通过摄像头捕获你的头部运动,当玩偶不在看你的时候,移动你的头向前移动,使左上角的计数器达到100米。但是当洋娃娃看着你的时候,注意不要移动。如果移动传感器达到右下角的100%,您将失败。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <style> @font-face { font-family: "Digital"; src: url("//repo.bfw.wiki/bfwrepo/images/squidgame/digital-7+%28mono%29.ttf") format("truetype"); } .timer { font-family: Digital, monospace; font-size: min(max(14px, 7vw), 46px); color: #d7213c; border: 5px outset #8b8b8b; background: black; text-align: center; padding: 0 20px; position: absolute; bottom: 1.5vw; left: 1.5vw; } .distance { font-family: Digital, monospace; font-size: min(max(14px, 7vw), 46px); color: #d7213c; border: 5px outset #8b8b8b; background: black; text-align: center; padding: 0 20px; position: absolute; top: 1.5vw; left: 1.5vw; } .movement { font-family: Digital, monospace; font-size: min(max(14px, 7vw), 46px); color: #d7213c; border: 5px outset #8b8b8b; background: black; text-align: center; padding: 0 20px; position: absolute; bottom: 1.5vw; right: 1.5vw; } .container { height: 100vh; display: grid; place-items: center; background: linear-gradient(#58abc2 50%, #d7327a 50%); filter: brightness(0.7); transition: 0.4s ease-out; } .container.is-playing { filter: brightness(1); } .info { font-size: 30px; position: fixed; top: 0; left: 0; padding: 10px; background: white; z-index: 19; } body { margin: 0; } .game { background: url(//repo.bfw.wiki/bfwrepo/images/squidgame/Squid_Game_Doll_bg.jpg); background-size: cover; background-position: center; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); font-size: 0; border-radius: 10px; } .webcam { position: absolute; top: 1.5vw; right: 1.5vw; width: 25%; } .ui { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 620px; width: 90%; background: black; color: white; z-index: 50; text-align: center; font-family: "Quicksand", sans-serif; font-weight: 400; border-radius: 20px; box-shadow: 0 0 20px 2px #00000059; padding: 20px 60px; max-height: 90vh; overflow: auto; box-sizing: border-box; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); transition: 0.3s ease-out; } .ui.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .ui svg { position: absolute; top: 10%; left: 10%; opacity: 0.15; width: 80%; height: 80%; pointer-events: none; } .ui h1 { font-size: 600; font-size: 26px; } .ui .note { font-size: 0.8em; } .ui p { font-size: 18px; margin-bottom: 0; } .ui p + p { margin-top: 10px; } .cta { pointer-events: none; background: white; border-radius: 0; border: none; font: inherit; font-size: 24px; font-weight: 600; margin-top: 30px; cursor: pointer; padding: 10px 20px; } .cta::before { content: "Loading..."; } .cta.is-ready { pointer-events: unset; } .cta.is-ready::before { content: "Start"; } .win .cta::before, .dead .cta::before { content: none; } </style> </head> <body > <!-- "Squid Game - Giant Doll" (https://skfb.ly/o7OMD) by Rzyas is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). --> <!-- Doll audio from https://www.youtube.com/watch?v=Nk8V30AIuP4 --> <!-- Shotgun Audio from https://soundbible.com/1919-Shotgun-Blast.html --> <!-- Sigh audio from https://soundbible.com/773-Sigh.html --> <div class="container"> <div class="game"> <canvas class="webcam" width=640 height=480></canvas> <div class="timer"><span class="time">01:00</span></div> <div class="distance"><span class="total">000</span> /<span>100</span></div> <div class="movement"><span class="total">00%</span></div> </div> </div> <div class="howto ui is-visible"> <svg viewBox="0 0 191.99 60.82"> <path d="M28.3,10.23A22.3,22.3,0,1,1,6,32.53a22.29,22.29,0,0,1,22.3-22.3m0-6a28.3,28.3,0,1,0,28.29,28.3A28.33,28.33,0,0,0,28.3,4.23Z" fill="#fff"/> <path d="M186,10.57V54.49H142.06V10.57H186m6-6H136.06V60.49H192V4.57Z" fill="#fff"/> <path d="M93.18,12l23.7,41.05H69.48l23.7-41m0-12L88,9,64.28,50.05l-5.19,9h68.19l-5.2-9L98.38,9l-5.2-9Z" fill="#fff"/> </svg> <h1>红灯,绿灯</h1> <p> 你有60秒的时间到达终点。 </p> <p> 当玩偶不在观看时,移动你的头向前移动,使左上角的计数器达到100米。 </p> <p> 但是当洋娃娃看着你的时候,注意不要移动。如果移动传感器达到右下角的100%,则您将被排除。 </p> <p class="note">需要使用摄像头识别你的头部运动<br>不支持iOs Safari浏览器运行</p> <button class="cta start"></button> </div> <div class="dead ui"> <svg viewBox="0 0 191.99 60.82"> <path d="M28.3,10.23A22.3,22.3,0,1,1,6,32.53a22.29,22.29,0,0,1,22.3-22.3m0-6a28.3,28.3,0,1,0,28.29,28.3A28.33,28.33,0,0,0,28.3,4.23Z" fill="#fff"/> <path d="M186,10.57V54.49H142.06V10.57H186m6-6H136.06V60.49H192V4.57Z" fill="#fff"/> <path d="M93.18,12l23.7,41.05H69.48l23.7-41m0-12L88,9,64.28,50.05l-5.19,9h68.19l-5.2-9L98.38,9l-5.2-9Z" fill="#fff"/> </svg> <h1>失败!</h1> <p> 哎呀,看起来你移动太多了,或者你的电脑已经超时了。。。 </p> <button class="cta replay replay1 is-ready">Replay</button> </div> <div class="win ui"> <svg viewBox="0 0 191.99 60.82"> <path d="M28.3,10.23A22.3,22.3,0,1,1,6,32.53a22.29,22.29,0,0,1,22.3-22.3m0-6a28.3,28.3,0,1,0,28.29,28.3A28.33,28.33,0,0,0,28.3,4.23Z" fill="#fff"/> <path d="M186,10.57V54.49H142.06V10.57H186m6-6H136.06V60.49H192V4.57Z" fill="#fff"/> <path d="M93.18,12l23.7,41.05H69.48l23.7-41m0-12L88,9,64.28,50.05l-5.19,9h68.19l-5.2-9L98.38,9l-5.2-9Z" fill="#fff"/> </svg> <h1>你赢了!</h1> <p> 干得好,你活下来了。。。现在。 </p> <button class="cta replay replay2 is-ready">重玩</button> </div> <script src='//repo.bfw.wiki/bfwrepo/images/squidgame/camvas.js'></script> <script src='//repo.bfw.wiki/bfwrepo/images/squidgame/pico.js'></script> <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.133.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script> <script > /* Face recognition from : https://nenadmarkus.com/p/picojs-intro/demo/ */ console.clear(); let distance = 0; let isWatching = true; let pos = { x: -1, y: -1 }; let prev_pos = { x: 0, y: 0 }; let distanceSinceWatching = 0; const elDistance = document.querySelector('.distance .total'); const elStart = document.querySelector('.start'); const elHowTo = document.querySelector('.howto'); const elGame = document.querySelector('.game'); const elContainer = document.querySelector('.container'); const elTime = document.querySelector('.timer .time'); const elMovement = document.querySelector('.movement'); const elReplay1 = document.querySelector('.replay1'); const elReplay2 = document.querySelector('.replay2'); const elDead = document.querySelector('.dead'); const elWin = document.querySelector('.win'); const audioDoll = new Audio('//repo.bfw.wiki/bfwrepo/images/squidgame/squid-game-sound.mp3'); const audioDollDuration = 5.433469; const shotGun = new Audio('//repo.bfw.wiki/bfwrepo/images/squidgame/shotgun.mp3'); shotGun.volume = 0.2; const sigh = new Audio('//repo.bfw.wiki/bfwrepo/images/squidgame/sigh.mp3'); const MAX_TIME = 60; const FINISH_DISTANCE = 100; const IN_GAME_MAX_DISTANCE = 4000; const MAX_MOVEMENT = 180; let playing = false; var mycamvas; function init () { var initialized = false; if (initialized) return; /* (1) prepare the pico.js face detector */ var update_memory = pico.instantiate_detection_memory(5); // we will use the detecions of the last 5 frames var facefinder_classify_region = function (r, c, s, pixels, ldim) { return -1.0; }; var cascadeurl = "//repo.bfw.wiki/bfwrepo/images/squidgame/facefinder"; fetch(cascadeurl).then(function (response) { response.arrayBuffer().then(function (buffer) { var bytes = new Int8Array(buffer); facefinder_classify_region = pico.unpack_cascade(bytes); console.........完整代码请登录后点击上方下载按钮下载查看
网友评论0