记录一个跳跃的小游戏
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" > < meta http- equiv= "X-UA-Compatible" content= "IE=edge" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 跳跳弹< / title> < style> div, body { margin: 0 ; padding: 0 ; } body { width: 100 vw; height: 100 vh; overflow: hidden; user- select: none; } #downup { position: absolute; left: 50 % ; transition: top .3 s; display: inline- flex; align- items: end; justify- content: flex- end; } #line { position: absolute; left: 0 ; padding: 0 ; margin: 0 ; font- size: 10 px; letter- spacing: 2 px; white- space: nowrap; } . bool { width: 10 px; height: 10 px; display: inline- flex; align- items: center; justify- content: flex- start; vertical- align: bottom; } . total { width: 300 px; margin: 10 px auto; display: flex; justify- content: space- between; } . game- over { position: absolute; top: 26 % ; width: 100 % ; text- align: center; font- weight: bold; color: rgb ( 85 , 87 , 88 ) ; display: none; } . over- big- text { font- size: 46 px; animation: flash .6 s; } . agin span { display: inline- flex; align- items: center; cursor: pointer; background: #a4d7f1; padding: 4 px 6 px; border- radius: 4 px; } @keyframes flash { 0 % { font- size: 46 px; } 50 % { font- size: 120 px; } 100 % { font- size: 46 px; } } . game- rule { margin: 20 px; position: absolute; bottom: 40 px; left: 30 px; } . game- rule small { display: block; } < / style>
< / head> < body> < div class = "total" > < label> 等级:< span id= "level" > < / span> < / label> < label> 分数:< span id= "total" > < / span> < / label> < / div> < div class = "game-over" id= "gameOver" > < h2 class = "over-big-text" > 游戏结束< / h2> < p class = "agin" > < span id= "agin" > < svg t= "1673232307463" class = "icon" viewBox= "0 0 1024 1024" version= "1.1" xmlns= "http://www.w3.org/2000/svg" p- id= "2707" xmlns: xlink= "http://www.w3.org/1999/xlink" width= "22" height= "22" > < pathd= "M674.133333 878.933333l-98.133333-102.4c128-17.066667 230.4-123.733333 230.4-251.733333 0-123.733333-93.866667-230.4-217.6-251.733333l-89.6-89.6h38.4c196.266667 0 354.133333 153.6 354.133333 341.333333 0 128-76.8 243.2-183.466666 298.666667v85.333333l-34.133334-29.866667z m-93.866666-17.066666c-12.8 0-29.866667 4.266667-46.933334 4.266666-196.266667 0-354.133333-153.6-354.133333-341.333333 0-128 76.8-243.2 183.466667-298.666667V128l55.466666 55.466667 85.333334 85.333333c-132.266667 12.8-234.666667 123.733333-234.666667 256 0 128 98.133333 234.666667 226.133333 251.733333l85.333334 85.333334z" fill= "#444444" p- id= "2708" > < / path> < / svg> 重新开始< / span> < / p> < / div> < div id= "downup" > < svg xmlns= "http://www.w3.org/2000/svg" xmlns: xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "0 0 154 184" fill= "none" > < g opacity= "1" transform= "translate(-0.000007010795002315717 0.00299835205078125) rotate(0 76.58378378378384 91.5)" > < path id= "路径 2" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(65.64324324324326 136) rotate(0 10.94054054054054 12.5)" opacity= "1" d= "M0,25L21.88,25L21.88,0L0,0L0,25Z " / > < path id= "分组 1" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(61.66486486486491 132) rotate(0 15.913513513513514 16)" opacity= "1" d= "M0 32L0 0L31.83 0L31.83 32L0 32ZM8.49 8.4L23.34 8.4L23.34 23.59L8.49 23.59L8.49 8.4Z" / > < path id= "路径 5" fill- rule= "evenodd" style= "fill:#CBB8FF" transform= "translate(122.33513513513515 51) rotate(0 7.956756756756757 8)" opacity= "1" d= "M7.96,16C12.35,16 15.91,12.42 15.91,8C15.91,3.58 12.35,0 7.96,0C3.57,0 0,3.58 0,8C0,12.42 3.57,16 7.96,16Z " / > < path id= "分组 2" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(118.3567567567568 48) rotate(0 10.94054054054054 11.5)" opacity= "1" d= "M0 11.5C0 5.16 4.91 0 10.94 0C16.97 0 21.88 5.16 21.88 11.5C21.88 17.85 16.99 23 10.94 23C4.91 23 0 17.84 0 11.5ZM15.92 11.5C15.92 14.38 13.68 16.73 10.94 16.73C8.19 16.73 5.97 14.38 5.97 11.5C5.97 8.61 8.19 6.27 10.94 6.27C13.69 6.27 15.92 8.61 15.92 11.5Z" / > < path id= "路径 8" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(133.27567567567564 51) rotate(0 7.956756756756757 31.5)" opacity= "1" d= "M13.95,62.95C15.03,62.95 15.91,62.07 15.91,60.98L15.91,15.93C15.91,7.13 8.79,0 0,0L0,61.04C0,62.12 0.88,63 1.96,63L13.94,63L13.95,62.95Z " / > < path id= "分组 3" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(129.2972972972974 46) rotate(0 11.935135135135136 36)" opacity= "1" d= "M4.15 0C15.05 0 23.87 9.09 23.87 20.32L23.87 65.75C23.87 69.2 21.15 72.01 17.8 72.01L6.07 72.01C2.72 72.01 0 69.2 0 65.75L0 0L4.15 0ZM15.57 20.31L15.57 63.45L8.3 63.45L8.3 9.36C12.69 11.11 15.57 15.46 15.57 20.31Z" / > < path id= "路径 11" fill- rule= "evenodd" style= "fill:#CBB8FF" transform= "translate(14.918918918918962 56) rotate(0 7.956756756756757 8)" opacity= "1" d= "M7.96,16C12.35,16 15.91,12.42 15.91,8C15.91,3.58 12.35,0 7.96,0C3.57,0 0,3.58 0,8C0,12.42 3.57,16 7.96,16Z " / > < path id= "分组 4" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(10.940540540540553 51) rotate(0 10.94054054054054 11.5)" opacity= "1" d= "M0 11.5C0 5.14 4.89 0 10.94 0C16.99 0 21.88 5.14 21.88 11.5C21.88 17.85 16.99 23 10.94 23C4.89 23 0 17.85 0 11.5ZM15.92 11.5C15.92 14.39 13.69 16.73 10.94 16.73C8.19 16.73 5.97 14.39 5.97 11.5C5.97 8.61 8.19 6.27 10.94 6.27C13.69 6.27 15.92 8.61 15.92 11.5Z" / > < path id= "路径 14" fill- rule= "evenodd" style= "fill:#CBB8FF" transform= "translate(49.7297297297298 119) rotate(0 27.351351351351354 8.5)" opacity= "1" d= "M47.99,12.82L54.7,0L0,0L7.04,12.93C8.38,15.42 11.07,16.99 14,17L40.98,17C43.96,16.99 46.67,15.37 47.99,12.82Z " / > < path id= "分组 5" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(44.75675675675677 115) rotate(0 31.82702702702703 12.5)" opacity= "1" d= "M9.25 18.85L0 0L63.65 0L54.84 18.68C53.03 22.57 49.28 25.02 45.19 25.01L18.83 25.01C14.8 25.01 11.11 22.63 9.25 18.85ZM53.54 6.65L10.3 6.65L14.8 15.82C15.58 17.42 17.13 18.42 18.83 18.42L45.19 18.42C46.91 18.42 48.49 17.39 49.26 15.76L53.54 6.65Z" / > < path id= "路径 17" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(46.745945945946005 160) rotate(0 31.32972972972973 10)" opacity= "1" d= "M62.49,15.87L57.18,2.66C56.55,1.11 54.06,0 51.18,0L11.42,0C8.57,0 6.04,1.1 5.41,2.66L0.15,15.87C-0.7,17.99 2.22,20 6.16,20L56.55,20C60.47,20 63.4,18 62.49,15.87Z " / > < path id= "分组 6" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(35.80540540540545 57) rotate(0 41.27567567567568 63)" opacity= "1" d= "M82.56 0L0 0L0 8.44L82.56 8.44L82.56 0ZM76.59 116.19C77.39 118.08 77.18 120.23 76.04 121.92C74.42 124.48 70.94 125.99 66.8 125.99L16.55 125.99C12.36 125.99 8.92 124.48 7.24 121.92C6.1 120.23 5.9 118.08 6.69 116.21L12 103.65C13.31 100.54 17.16 98.55 21.85 98.55L61.49 98.55C66.16 98.55 70.03 100.54 71.34 103.64L76.59 116.19ZM19.51 107.41C20.26 107.11 21.04 106.98 21.85 106.99L61.53 106.99C62.33 106.98 63.12 107.11 63.85 107.41L68.06 117.45C67.64 117.51 67.22 117.56 66.81 117.56L16.55 117.56C16.12 117.56 15.71 117.53 15.29 117.45L19.51 107.41Z" / > < path id= "路径 21" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(33.816216216216276 10) rotate(0 44.259459459459464 57.5)" opacity= "1" d= "M22.74,0C8.7,7.84 0,22.7 0,38.83L0,109.71C0,112.63 2.36,115 5.27,115L83.25,115C86.16,115 88.52,112.63 88.52,109.71L88.52,38.83C88.51,22.85 79.96,8.11 66.13,0.21C65.22,11.56 55.78,20.31 44.44,20.31C33.01,20.31 23.54,11.44 22.74,0Z " / > < path id= "分组 7" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(27.84864864864869 4) rotate(0 48.73513513513514 63)" opacity= "1" d= "M66.49 6.8L67.02 0.13L72.81 3.43C88.04 12.08 97.44 28.21 97.47 45.69L97.47 116.47C97.48 119 96.48 121.42 94.69 123.21C92.9 124.99 90.47 126.01 87.93 126.01L9.53 126.01C4.26 126.01 0 121.74 0 116.5L0 45.7C0.02 28.08 9.6 11.83 25.03 3.25L30.86 0L31.32 6.63C31.97 15.83 39.6 22.97 48.83 23C58.07 23.04 65.77 15.98 66.49 6.8ZM24.21 13.87C14.28 21.46 8.45 33.23 8.45 45.72L8.45 116.5C8.45 117.09 8.93 117.55 9.52 117.55L87.92 117.55C88.5 117.55 88.97 117.09 88.97 116.5L88.97 45.72C88.95 33.37 83.25 21.72 73.5 14.1C69.81 24.55 59.88 31.51 48.77 31.47C37.68 31.41 27.81 24.35 24.21 13.87Z" / > < path id= "路径 24" fill- rule= "evenodd" style= "fill:#E3DEFF" transform= "translate(55.697297297297325 5) rotate(0 21.383783783783784 13)" opacity= "1" d= "M42.77,5.83C36.2,2 28.77,-0.01 21.21,0C13.79,-0.01 6.48,1.93 0,5.63C0.79,17.1 10.13,26 21.39,26C32.57,26 41.87,17.22 42.77,5.83Z " / > < path id= "分组 8" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(50.72432432432436 0) rotate(0 25.859459459459462 17.5)" opacity= "1" d= "M2.32 6.26L0 7.59L0.19 10.32C1.17 24.19 12.36 34.96 25.85 35C39.25 34.93 50.38 24.33 51.52 10.56L51.72 7.83L49.42 6.47C34.82 -2.08 16.97 -2.17 2.32 6.26ZM42.75 12.62C40.87 20.71 33.84 26.4 25.78 26.37C17.7 26.32 10.71 20.57 8.91 12.45C19.65 7.29 32.07 7.35 42.75 12.62Z" / > < path id= "路径 27" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(3.978378378378409 53) rotate(0 7.956756756756757 31.5)" opacity= "1" d= "M0,15.93L0,61.04C0,62.12 0.88,63 1.96,63L13.95,63C15.03,63 15.91,62.12 15.91,61.04L15.91,0C7.12,0 0,7.13 0,15.93Z " / > < path id= "分组 9" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(0 48) rotate(0 11.935135135135136 36)" opacity= "1" d= "M19.73 0L23.87 0L23.87 65.75C23.86 69.2 21.15 71.99 17.8 72.01L6.07 72.01C2.72 72.01 0 69.2 0 65.75L0 20.32C0 9.09 8.83 0 19.73 0ZM15.57 9.36L15.57 63.45L8.3 63.45L8.3 20.31C8.3 15.46 11.19 11.11 15.57 9.36Z" / > < path id= "路径 30" fill- rule= "evenodd" style= "fill:#E3DEFF" transform= "translate(36.80000000000001 17) rotate(0 40.28108108108108 52)" opacity= "1" d= "M80.56,30.06C80.56,30.06 79.68,9.73 64.67,0L64.67,35.39C64.67,60.46 46.97,82.02 22.42,86.86L0.04,91.24L0.04,102.65C0.04,102.65 -0.43,103.98 1.91,103.98L79.08,103.98C79.17,103.98 80.56,104.3 80.56,102.55L80.56,30.06Z " / > < path id= "路径 31" fill- rule= "evenodd" style= "fill:#CBB8FF" transform= "translate(45.75135135135139 33) rotate(0 30.832432432432434 10)" opacity= "1" d= "M61.66,0L30.57,6.67L0,0L0,13.33L30.93,20L61.66,13.33L61.66,0Z " / > < path id= "分组 10" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(41.77297297297298 30) rotate(0 33.81621621621622 13)" opacity= "1" d= "M0 0L0 19.05L33.92 26.01L67.63 19.05L67.63 0.01L33.56 6.96L0 0ZM6.29 13.91L6.29 7.74L33.55 13.38L61.35 7.72L61.35 13.92L33.91 19.57L6.29 13.91Z" / > < path id= "路径 34" fill- rule= "evenodd" style= "fill:#FFFFFF" transform= "translate(33.816216216216276 63) rotate(0 44.259459459459464 8)" opacity= "1" d= "M0,16L88.52,16L88.52,0L0,0L0,16Z " / > < path id= "分组 11" fill- rule= "evenodd" style= "fill:#404951" transform= "translate(29.837837837837867 61) rotate(0 47.24324324324325 11.5)" opacity= "1" d= "M0 23L0 0L94.48 0L94.48 23L0 23ZM6.31 6.35L88.18 6.35L88.18 16.65L6.31 16.65L6.31 6.35Z" / > < path id= "分组 12" fill- rule= "evenodd" style= "fill:#E3DEFF" transform= "translate(8.951351351351377 58) rotate(0 68.62702702702703 58)" opacity= "1" d= "M129.73 38.57L129.73 51.38L137.25 51.38L137.25 7.79C136.96 4.87 135.71 2.13 133.7 0L133.7 34.62C133.7 36.81 131.91 38.57 129.73 38.57ZM7.54 0.63L7.54 54.28L0 54.28L0 32.75C2.55 32.75 4.63 30.68 4.63 28.14L4.63 2.34C4.63 2.34 6.34 0.63 7.54 0.63ZM109.36 8.32L109.36 18.49L82.45 18.49L84.56 8.32L109.36 8.32ZM68.42 18.67L70.53 8.5L76.27 8.5L74.14 18.67L68.42 18.67ZM85.44 31.97L85.44 24.84L28.34 24.84L28.34 31.97L85.44 31.97ZM66.67 116L96.02 116L91 105.17L61.79 105.29L66.67 116Z" / > < / g> < / svg> < / div> < div id= "line" > < / div> < div class = "game-rule" > < p> 游戏规则< / p> < small> 1. 用单机鼠标左键向上跳来避开障碍物< / small> < small> 2. 双击或快速点击左键可以实现多次连跳< / small> < / div>
< / body>
< script> let topd = 390 let downHeight = 50 let robotW = 30 let boolW = 20 let time = 6 let level = 1 let total = 0 let updateGrade = 50 let timer = null let dobble = false let type = 'up' let open = true let timeInterval = null let body = document. querySelector ( 'body' ) let robot = document. querySelector ( '#downup' ) let line = document. querySelector ( '#line' ) let gameOverDom = document. querySelector ( '#gameOver' ) let aginDom = document. querySelector ( '#agin' ) let boolIndex = 0 let checkIndex = 0 let bool = { bool1: ` <svg t="1673234637796" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18607" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><path d="M651 220.16a30.176 30.176 0 0 0-30.16-30.16h-183.68a30.176 30.176 0 0 0-30.16 30.16v675.68a30.176 30.176 0 0 0 30.16 30.16h183.68a30.176 30.176 0 0 0 30.16-30.16V220.16z" fill="#E7004C" p-id="18608"></path><path d="M387.16 926c-16.644 0-30.16-12.624-30.16-28.172V218.172c0-15.548 13.516-28.172 30.16-28.172h111.68c16.644 0 30.16 12.624 30.16 28.172v679.656c0 15.548-13.516 28.172-30.16 28.172H387.16z" fill="#D0003F" p-id="18609"></path><path d="M407 310h244v96h-244zM407 729.028h244v96h-244z" fill="#2E436C" p-id="18610"></path><path d="M615 74c-67.332 0-122 54.668-122 122s54.668 122 122 122 122-54.668 122-122-54.668-122-122-122z m0 35.748c47.604 0 86.252 38.648 86.252 86.252 0 47.604-38.648 86.252-86.252 86.252-47.604 0-86.252-38.648-86.252-86.252 0-47.604 38.648-86.252 86.252-86.252z" fill="#2D456D" p-id="18611"></path><path d="M682.12 141.852a69.936 69.936 0 0 0 18.712-32.516c-22.048-21.84-52.376-35.336-85.832-35.336-18.476 0-36 4.116-51.7 11.48-0.2 2.148-0.3 4.32-0.3 6.52 0 10.908 2.5 21.24 6.96 30.444a85.84 85.84 0 0 1 45.04-12.696c27.104 0 51.304 12.528 67.12 32.104z" fill="#FFCE71" p-id="18612"></path><path d="M415 74c67.332 0 122 54.668 122 122s-54.668 122-122 122-122-54.668-122-122 54.668-122 122-122z m0 35.748c-47.604 0-86.252 38.648-86.252 86.252 0 47.604 38.648 86.252 86.252 86.252 47.604 0 86.252-38.648 86.252-86.252 0-47.604-38.648-86.252-86.252-86.252z" fill="#FFBA5A" p-id="18613"></path><path d="M347.88 141.852a69.936 69.936 0 0 1-18.712-32.516c22.048-21.84 52.376-35.336 85.832-35.336 18.476 0 36 4.116 51.7 11.48 0.2 2.148 0.3 4.32 0.3 6.52 0 10.908-2.5 21.24-6.96 30.444a85.84 85.84 0 0 0-45.04-12.696c-27.104 0-51.304 12.528-67.12 32.104z" fill="#FFCE71" p-id="18614"></path><path d="M815 220.16a30.176 30.176 0 0 0-30.16-30.16h-183.68a30.176 30.176 0 0 0-30.16 30.16v675.68a30.176 30.176 0 0 0 30.16 30.16h183.68a30.176 30.176 0 0 0 30.16-30.16V220.16z" fill="#E7004C" p-id="18615"></path><path d="M551.16 926c-16.644 0-30.16-12.624-30.16-28.172V218.172c0-15.548 13.516-28.172 30.16-28.172h111.68c16.644 0 30.16 12.624 30.16 28.172v679.656c0 15.548-13.516 28.172-30.16 28.172h-111.68z" fill="#D0003F" p-id="18616"></path><path d="M571 310h244v96h-244zM571 729.028h244v96h-244z" fill="#2E436C" p-id="18617"></path><path d="M209 220.16a30.176 30.176 0 0 1 30.16-30.16h183.68a30.176 30.176 0 0 1 30.16 30.16v675.68a30.176 30.176 0 0 1-30.16 30.16H239.16a30.176 30.176 0 0 1-30.16-30.16V220.16z" fill="#EB004B" p-id="18618"></path><path d="M472.84 926c16.644 0 30.16-12.624 30.16-28.172V218.172c0-15.548-13.516-28.172-30.16-28.172H361.16c-16.644 0-30.16 12.624-30.16 28.172v679.656c0 15.548 13.516 28.172 30.16 28.172h111.68z" fill="#D0003F" p-id="18619"></path><path d="M209 310h244v96h-244zM209 729.028h244v96h-244z" fill="#2E436C" p-id="18620"></path><path d="M639 192.16a30.176 30.176 0 0 0-30.16-30.16h-183.68a30.176 30.176 0 0 0-30.16 30.16v727.68a30.176 30.176 0 0 0 30.16 30.16h183.68a30.176 30.176 0 0 0 30.16-30.16V192.16z" fill="#FB174C" p-id="18621"></path><path d="M425.16 950a30.176 30.176 0 0 1-30.16-30.16V192.16a30.176 30.176 0 0 1 30.16-30.16h111.68a30.176 30.176 0 0 1 30.16 30.16v727.68a30.176 30.176 0 0 1-30.16 30.16h-111.68z" fill="#FF4363" p-id="18622"></path><path d="M395 310h244v96h-244zM395 729.028h244v96h-244z" fill="#2E436C" p-id="18623"></path></svg> ` , bool2: ` <svg t="1673234624536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18446" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><path d="M875.43 95.26H685.16c-13.13 0-23.8 8.19-23.8 18.27v785.34c0 9.87 5.33 28.47 41.01 42.16 21.22 8.14 48.88 12.63 77.9 12.63 29.06 0 56.72-4.48 77.94-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c0-10.08-10.66-18.27-23.79-18.27zM613.81 95.26h-190.3c-13.13 0-23.76 8.19-23.76 18.27v785.34c0 9.87 5.33 28.47 41.01 42.16 21.22 8.14 48.88 12.63 77.9 12.63 29.02 0 56.72-4.48 77.9-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c0-10.08-10.63-18.27-23.76-18.27zM352.16 95.26H161.89c-13.13 0-23.8 8.19-23.8 18.27v785.34c0 9.87 5.33 28.47 41.04 42.16 21.18 8.14 48.85 12.63 77.9 12.63 29.02 0 56.69-4.48 77.9-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c0.01-10.08-10.65-18.27-23.78-18.27z" fill="#ED5564" p-id="18447"></path><path d="M875.43 95.26h-23.8c13.14 0 23.8 8.19 23.8 18.27v785.34c0 9.87-5.33 28.47-41.01 42.16-18.29 7.02-41.39 11.31-66.02 12.37 3.94 0.16 7.91 0.25 11.88 0.25 29.06 0 56.72-4.48 77.94-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c-0.01-10.08-10.67-18.27-23.8-18.27zM613.81 95.26h-23.8c13.14 0 23.8 8.19 23.8 18.27v785.34c0 9.87-5.33 28.47-41.01 42.16-18.29 7.02-41.39 11.31-66.02 12.37 3.94 0.16 7.87 0.25 11.88 0.25 29.02 0 56.72-4.48 77.9-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c0-10.08-10.63-18.27-23.76-18.27zM352.16 95.26H328.4c13.14 0 23.76 8.19 23.76 18.27v785.34c0 9.87-5.33 28.47-41.01 42.16-18.29 7.02-41.39 11.31-66.02 12.37 3.94 0.16 7.91 0.25 11.92 0.25 29.02 0 56.69-4.48 77.9-12.63 35.68-13.7 41.01-32.29 41.01-42.16V113.53c-0.01-10.08-10.67-18.27-23.8-18.27z" fill="#FFFFFF" opacity=".2" p-id="18448"></path><path d="M858.21 85.41C837 79.98 809.33 77 780.28 77c-29.02 0-56.68 2.98-77.9 8.41-26.44 6.77-41.01 16.76-41.01 28.12s14.56 21.34 41.01 28.11c21.22 5.43 48.88 8.41 77.9 8.41 29.06 0 56.72-2.98 77.94-8.41 26.44-6.77 41.01-16.75 41.01-28.11-0.01-11.36-14.57-21.35-41.02-28.12zM596.56 85.41c-21.18-5.43-48.88-8.41-77.9-8.41-29.02 0-56.68 2.98-77.9 8.41-26.44 6.77-41.01 16.76-41.01 28.12s14.56 21.34 41.01 28.11c21.22 5.43 48.88 8.41 77.9 8.41 29.02 0 56.72-2.98 77.9-8.41 26.44-6.77 41.01-16.75 41.01-28.11s-14.56-21.35-41.01-28.12zM334.95 85.41c-21.22-5.43-48.88-8.41-77.9-8.41-29.06 0-56.72 2.98-77.9 8.41-26.44 6.77-41.04 16.76-41.04 28.12s14.6 21.34 41.04 28.11c21.18 5.43 48.85 8.41 77.9 8.41 29.02 0 56.69-2.98 77.9-8.41 26.44-6.77 41.01-16.75 41.01-28.11-0.01-11.36-14.57-21.35-41.01-28.12z" fill="#DA4453" p-id="18449"></path><path d="M911 408.16c-3.73-1.65-7.77-2.39-11.78-2.39v40.58c4.63 3.05 8.36 6.15 9.72 8.3-2.79 2.13-13.8 8.48-50.63 14.07-44.07 6.7-110.34 10.09-196.95 10.09-13.13 0-23.8 8.19-23.8 18.27s10.66 18.26 23.8 18.26c96.19 0 168.98-4.17 216.22-12.41 29.4-5.12 69.47-14.76 77.9-39.14 10.36-29.84-35.21-51.58-44.48-55.63zM911 590.79c-3.73-1.63-7.77-2.39-11.78-2.38V629c4.63 3.04 8.36 6.15 9.72 8.28-2.79 2.13-13.8 8.49-50.63 14.08-44.07 6.69-110.34 10.09-196.95 10.09-13.13 0-23.8 8.17-23.8 18.26 0 10.09 10.66 18.26 23.8 18.26 96.19 0 168.98-4.17 216.22-12.41 29.4-5.12 69.47-14.76 77.9-39.13 10.36-29.85-35.21-51.59-44.48-55.64zM375.95 478.8c-86.61 0-152.88-3.38-196.95-10.09-36.83-5.59-47.84-11.94-50.62-14.07 1.36-2.14 5.08-5.24 9.72-8.3v-40.58c-4.01 0-8.05 0.76-11.77 2.39-9.23 4.05-54.81 25.79-44.49 55.62 8.43 24.39 48.5 34.02 77.9 39.14 47.28 8.24 120.02 12.41 216.22 12.41 13.14 0 23.8-8.17 23.8-18.26s-10.67-18.26-23.81-18.26zM375.95 661.45c-86.61 0-152.88-3.4-196.95-10.09-36.83-5.59-47.84-11.96-50.62-14.08 1.36-2.13 5.08-5.24 9.72-8.28v-40.6c-4.01 0-8.05 0.76-11.77 2.39-9.23 4.05-54.81 25.79-44.49 55.64 8.43 24.37 48.5 34 77.9 39.13 47.28 8.24 120.02 12.41 216.22 12.41 13.14 0 23.8-8.17 23.8-18.26-0.01-10.09-10.67-18.26-23.81-18.26z" fill="#434A54" p-id="18450"></path><path d="M613.81 369.22h-190.3c-39.33 0-71.35 24.59-71.35 54.79v292.23c0 30.2 32.02 54.79 71.35 54.79h190.3c39.34 0 71.35-24.59 71.35-54.79V424.01c0-30.2-32.01-54.79-71.35-54.79z" fill="#434A54" p-id="18451"></path><path d="M613.81 350.96h-190.3c-39.33 0-71.35 24.57-71.35 54.79v292.22c0 30.22 32.02 54.79 71.35 54.79h190.3c39.34 0 71.35-24.57 71.35-54.79V405.75c0-30.22-32.01-54.79-71.35-54.79z" fill="#656D78" p-id="18452"></path><path d="M423.51 570.12a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18453"></path><path d="M494.86 570.12a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18454"></path><path d="M566.21 570.12a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18455"></path><path d="M423.51 624.92a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18456"></path><path d="M494.86 624.92a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18457"></path><path d="M566.21 624.92a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18458"></path><path d="M399.75 405.75h237.82v109.58H399.75z" fill="#A0D468" p-id="18459"></path><path d="M423.51 679.71a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18460"></path><path d="M494.86 679.71a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18461"></path><path d="M566.21 679.71a23.8 18.26 0 1 0 47.6 0 23.8 18.26 0 1 0-47.6 0Z" fill="#E6E9ED" p-id="18462"></path></svg> ` , bool3: ` <svg t="1673234618124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18297" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><path d="M731.016 43.54a9.86 9.86 0 0 1 16.236 5.524l11.508 60.416a9.844 9.844 0 0 0 7.748 7.82l57.244 11.452a9.856 9.856 0 0 1 5.64 15.976l-45.72 54.868a9.852 9.852 0 0 0-1.66 9.772l16.228 43.272a9.856 9.856 0 0 1-10.504 13.24l-72.288-9.432a9.888 9.888 0 0 0-6.416 1.364l-56.836 34.736a9.856 9.856 0 0 1-14.828-6.596l-8.3-44.252a9.864 9.864 0 0 0-6.572-7.536l-62.084-20.692a9.86 9.86 0 0 1-3.34-16.804l41.568-36.024a9.856 9.856 0 0 0 2.66-11.204l-19.156-46.524a9.86 9.86 0 0 1 9.932-13.576l75.712 6.308a9.856 9.856 0 0 0 7.368-2.456l55.86-49.652z" fill="#FFBE52" p-id="18298"></path><path d="M726.212 341.124a25.008 25.008 0 0 1-35.336 1.088 25.008 25.008 0 0 1-1.088-35.336s13.86-15.748 14.908-42.496c0.804-20.628-6.08-46.772-28.8-77.524a25 25 0 0 1 40.208-29.712c31.82 43.056 39.684 80.308 38.552 109.192-1.86 47.524-28.444 74.788-28.444 74.788z" fill="#F45340" p-id="18299"></path><path d="M690 166m-26 0a26 26 0 1 0 52 0 26 26 0 1 0-52 0Z" fill="#FF7C5A" p-id="18300"></path><path d="M476 324l106.096-67.196a34.712 34.712 0 0 1 29.828-3.512C635.508 261.728 681.208 279.512 720 304c40.632 25.648 72.224 57.548 86.94 73.656a34.628 34.628 0 0 1 8.552 23.844C814.572 435.144 812 520 812 520l-336-196z" fill="#ABB2E2" p-id="18301"></path><path d="M512 652m-340 0a340 340 0 1 0 680 0 340 340 0 1 0-680 0Z" fill="#F3003D" p-id="18302"></path><path d="M348.648 773.812a53.252 53.252 0 0 1-21.6-57.672c4.076-15.384 2.336-34.064-15.86-58.284-28.484-37.916-8.208-75.504 40.46-149.156 49.944-75.584 140.612-57.316 188.68-40.532a190.08 190.08 0 0 1 59.644 33.972c38.952 32.788 100.912 101.456 61.372 182.968-38.528 79.428-60.516 116.04-107.656 110.876-30.116-3.296-47.068 4.736-58.268 16.044a53.188 53.188 0 0 1-63.548 9.292l23.056-40.476a3.78 3.78 0 0 0-1.412-5.156l-6.576-3.748a3.792 3.792 0 0 0-5.16 1.416l-23.072 40.504c-7.088-4.02-14.48-8.22-21.924-12.456l23.084-40.528a3.788 3.788 0 0 0-1.412-5.16l-6.576-3.744a3.788 3.788 0 0 0-5.16 1.412l-23.088 40.536-21.916-12.476 23.092-40.54a3.788 3.788 0 0 0-1.416-5.16L376.82 732a3.788 3.788 0 0 0-5.16 1.416l-23.012 40.396z m215.268-111.308c-18.948-10.792-43.092-4.172-53.884 14.776-10.792 18.948-4.172 43.092 14.772 53.884 18.948 10.792 43.092 4.172 53.888-14.776 10.792-18.948 4.172-43.092-14.776-53.884z m-143.164-81.548c-18.944-10.792-43.092-4.172-53.884 14.776-10.792 18.948-4.172 43.092 14.776 53.884 18.948 10.792 43.092 4.172 53.884-14.776 10.792-18.944 4.172-43.092-14.776-53.884z m34.24 104.636s-27.88-2.012-36.06 12.352c-8.18 14.364 12.048 17.468 21.912 12.48 0.744 11.032 13.732 26.844 21.912 12.484 8.184-14.364-7.764-37.316-7.764-37.316z" fill="#FFFFFF" p-id="18303"></path><path d="M736.56 396.792C807.324 459.12 852 550.384 852 652c0 187.652-152.348 340-340 340-133.348 0-248.868-76.932-304.56-188.792C267.352 855.976 345.964 888 432 888c187.652 0 340-152.348 340-340 0-54.304-12.76-105.652-35.44-151.208z" fill="#DD003B" p-id="18304"></path><path d="M375.756 420.664c26.144-14.308 55.544-10.988 65.616 7.412 10.068 18.396-2.984 44.952-29.128 59.26s-55.544 10.988-65.616-7.412c-10.068-18.396 2.984-44.952 29.128-59.26z" fill="#FF5D78" p-id="18305"></path></svg> ` , bool4: ` <svg t="1673234448137" class="icon" viewBox="0 0 1133 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17908" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><path d="M594.743825 224.022583c-6.503881-13.730416-16.62103-13.730416-23.124912 0L488.513761 399.627382c-6.503881 13.730416 0.722653 24.570219 15.175724 24.570219h158.983768c15.175723 0 21.679605-10.839802 15.175724-24.570219L594.743825 224.022583zM323.748765 745.778405c-6.503881 13.730416 0.722653 24.570219 15.175723 24.570219h488.513762c15.175723 0 21.679605-10.839802 15.175723-24.570219l-44.081863-91.776994c-6.503881-13.730416-23.847565-24.570219-38.300635-24.570218h-354.100212c-15.175723 0-32.519407 10.839802-38.300635 24.570218l-44.081863 91.776994z" fill="#595959" p-id="17909"></path><path d="M487.068454 458.884968c-15.175723 0-32.519407 10.839802-38.300635 24.570219l-41.191249 86.718419c-6.503881 13.730416 0.722653 24.570219 15.175724 24.570219H744.333098c15.175723 0 21.679605-10.839802 15.175723-24.570219l-41.191249-86.718419c-6.503881-13.730416-23.847565-24.570219-38.300635-24.570219H487.068454z" fill="#BF618C" p-id="17910"></path><path d="M909.098095 849.117855c0 16.62103-13.730416 29.628793-29.628794 29.628793H287.61609c-16.62103 0-29.628793-13.730416-29.628793-29.628793v-9.394496c0-16.62103 13.730416-29.628793 29.628793-29.628793h591.130558c16.62103 0 29.628793 13.730416 29.628793 29.628793v9.394496z" fill="#17BADE" p-id="17911"></path></svg> ` } let getHeight = function ( dom, num ) { clearInterval ( timer) let domTop = dom. offsetTopdom. style. top = domTop - num + 'px' timer = setTimeout ( ( ) => { dom. style. top = topd - ( robotW - boolW) + 'px' open = true } , 300 ) } let init = ( ) => { let span = '' for ( let index = 0 ; index < 200 ; index++ ) { span += '<span>_</span>' } line. innerHTML = spanlevel = 1 total = 0 boolIndex = 0 checkIndex = 0 } let getRandom = ( min, max ) => { return Math. ceil ( Math. random ( ) * ( max - min + 1 ) + min - 1 ) } let wayOrBool = ( ) => { let dom = document. createElement ( 'span' ) let r = Math. floor ( Math. random ( ) * 100 ) if ( r > 2 * level) { dom. innerHTML = '_' } else { dom. className = 'bool bool' + boolIndexdom. innerHTML = bool[ 'bool' + getRandom ( 1 , 4 ) ] dom. style. width = boolW + 'px' dom. style. height = boolW + 'px' boolIndex++ } return dom} let updateTotal = ( ) => { let domLevel = document. querySelector ( '#level' ) let domTotal = document. querySelector ( '#total' ) domLevel. innerHTML = leveldomTotal. innerHTML = total} let gameOver = ( ) => { clearInterval ( timeInterval) gameOverDom. style. display = 'block' } let getTiaoTPosition = ( ) => { let { offsetTop, offsetLeft } = robotlet bools = line. querySelector ( '.bool' + checkIndex) if ( bools && bools. offsetLeft > offsetLeft && bools. offsetLeft < offsetLeft + robotW - 6 ) { if ( offsetTop < topd - boolW) { checkIndex++ total++ let l = Math. ceil ( total / updateGrade) level = l > 5 ? 5 : l} else { gameOver ( ) } } } let gameStart = ( ) => { timeInterval = setInterval ( ( ) => { line. removeChild ( line. children[ 0 ] ) line. appendChild ( wayOrBool ( ) ) updateTotal ( ) getTiaoTPosition ( ) } , 110 - 10 * level) } let initStyle = ( ) => { robot. style. width = robotW + 'px' robot. style. height = robotW + 'px' robot. style. top = topd - ( robotW - boolW) + 'px' line. style. top = topd + 'px' } ( function ( ) { init ( ) initStyle ( ) gameStart ( ) } ) ( ) body. addEventListener ( 'click' , ( ) => { if ( open) { open = false getHeight ( robot, downHeight) } } , false ) body. ondblclick = function ( res ) { getHeight ( robot, downHeight) } aginDom. onclick = ( ) => { gameOverDom. style. display = 'none' init ( ) gameStart ( ) } < / script> < / html>