├── favicon.ico ├── index.html └── static ├── image ├── AfterClicking.png └── ClickBefore.png ├── index.css ├── index.js └── music ├── end.mp3 ├── err.mp3 └── tap.mp3 /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 吃掉小猫猫 6 | 7 | 8 | 9 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 41 | 42 |
43 |
44 |
45 |
46 |
吃掉小猫猫(支持高度自定义~)

47 |
48 | 更新公告:现在可以设置垂直判定啦!
49 |
50 |
51 | 从最底下小猫猫开始
52 | 看看您能吃多少猫猫~
53 | 注:设置里有很多好东西哟!
54 | 电脑玩家在默认设置下
55 | 键盘上的DFJK键
56 | 可分别控制四个轨道哦!
57 |
58 |
59 |
60 | 61 | 62 |

63 | 65 |

66 |
67 | 68 |
69 |

一键设置特殊键型(若按键全部消失请刷新界面)

70 | 71 | 72 | 73 | 74 |

75 | 76 | 77 | 78 |
79 | 111 | 140 |
141 |
142 |
143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /static/image/AfterClicking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/static/image/AfterClicking.png -------------------------------------------------------------------------------- /static/image/ClickBefore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/static/image/ClickBefore.png -------------------------------------------------------------------------------- /static/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .loading { 8 | background-image: url("data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAJQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nLXAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEADAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQFCgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnAagwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoACwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQFCgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWEj6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwBABEADAADAAACBYSPqcsFADs="); 9 | background-repeat: no-repeat; 10 | background-position: center center; 11 | background-size: auto 60%; 12 | } 13 | 14 | .start_btn { 15 | display: inline-block; 16 | margin: 0 auto; 17 | width: 8em; 18 | height: 1.7em; 19 | line-height: 1.7em; 20 | font-size: 2.2em; 21 | color: #fff; 22 | } 23 | 24 | .SHADE { 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | bottom: 0; 29 | z-index: 11; 30 | } 31 | 32 | .BOX-V { 33 | box-orient: vertical; 34 | -webkit-box-orient: vertical; 35 | -moz-box-orient: vertical; 36 | -ms-flex-direction: column; 37 | } 38 | 39 | .BOX-D { 40 | box-align: end; 41 | box-pack: center; 42 | -webkit-box-align: end; 43 | -webkit-box-pack: center; 44 | -ms-flex-align: end; 45 | -ms-flex-pack: center; 46 | } 47 | 48 | .BOX-M { 49 | box-align: center; 50 | box-pack: center; 51 | -webkit-box-align: center; 52 | -webkit-box-pack: center; 53 | -ms-flex-align: center; 54 | -ms-flex-pack: center; 55 | } 56 | 57 | .BOX-S { 58 | display: block; 59 | box-flex: 1; 60 | -webkit-box-flex: 1; 61 | -moz-box-flex: 1; 62 | -ms-flex: 1; 63 | } 64 | 65 | .BOX, 66 | .BOX-V, 67 | .BOX-D, 68 | .BOX-M, 69 | .FOOTER { 70 | display: box; 71 | display: -webkit-box; 72 | display: -moz-box; 73 | display: -ms-flexbox; 74 | } 75 | 76 | .BBOX, 77 | .BOX, 78 | .APP-STAGE, 79 | .INSET-STAGE, 80 | .STAGE, 81 | .PAGE-STAGE, 82 | .PAGE, 83 | .PAGE-BOX, 84 | .INSET-PAGE, 85 | .FOOTER { 86 | box-sizing: border-box; 87 | -webkit-box-sizing: border-box; 88 | -moz-box-sizing: border-box; 89 | } 90 | 91 | #welcome { 92 | background-color: rgba(0, 0, 0, .8); 93 | text-align: center; 94 | font-weight: bold; 95 | overflow: hidden; 96 | } 97 | 98 | .welcome-bg { 99 | position: absolute; 100 | top: 0; 101 | left: 0; 102 | right: 0; 103 | bottom: 0; 104 | background-size: 100% 100%; 105 | opacity: .4; 106 | overflow: hidden; 107 | } 108 | 109 | #GameTimeLayer { 110 | top: 1em; 111 | left: 0; 112 | width: 100%; 113 | text-align: center; 114 | color: rgb(233, 138, 131); 115 | font-size: 4em; 116 | text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; 117 | overflow: hidden; 118 | } 119 | 120 | #GameLayerBG { 121 | top: 0; 122 | left: 0; 123 | right: 0; 124 | bottom: 0; 125 | overflow: hidden; 126 | background: #fff; 127 | } 128 | 129 | .GameLayer { 130 | position: absolute; 131 | bottom: 0; 132 | left: 0; 133 | } 134 | 135 | .block { 136 | position: absolute; 137 | border-top: 1px solid #b8dfe6; 138 | background-repeat: no-repeat; 139 | background-position: center; 140 | } 141 | 142 | .t1, 143 | .t2, 144 | .t3, 145 | .t4, 146 | .t5 { 147 | background-size: 158px 158px; 148 | background-image: url(./image/ClickBefore.png); 149 | } 150 | 151 | .tt1, 152 | .tt2, 153 | .tt3, 154 | .tt4, 155 | .tt5 { 156 | background-size: 140px 140px; 157 | background-image: url(./image/AfterClicking.png); 158 | } 159 | 160 | .bl { 161 | border-left: 1px solid #b8dfe6; 162 | } 163 | 164 | @-ms-keyframes flash { 165 | 0% { 166 | opacity: 1; 167 | } 168 | 169 | 50% { 170 | opacity: 0; 171 | } 172 | 173 | 100% { 174 | opacity: 1; 175 | } 176 | } 177 | 178 | @-webkit-keyframes flash { 179 | 0% { 180 | opacity: 1; 181 | } 182 | 183 | 50% { 184 | opacity: 0; 185 | } 186 | 187 | 100% { 188 | opacity: 1; 189 | } 190 | } 191 | 192 | .flash { 193 | -webkit-animation: flash .2s 3; 194 | animation: flash .2s 3; 195 | } 196 | 197 | .bad { 198 | background-color: rgb(211, 91, 91); 199 | -webkit-animation: flash .2s 3; 200 | animation: flash .2s 3; 201 | } 202 | 203 | * { 204 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 205 | -ms-tap-highlight-color: rgba(0, 0, 0, 0); 206 | -ms-user-select: none; 207 | } 208 | 209 | #GameScoreLayer { 210 | padding-top: 2em; 211 | font-size: 2em; 212 | font-weight: bold; 213 | color: #251c1c; 214 | text-align: center; 215 | overflow: hidden; 216 | } 217 | 218 | .share-icon { 219 | width: 1.7em; 220 | background-repeat: no-repeat; 221 | background-size: auto 100%; 222 | } 223 | 224 | .btn { 225 | text-decoration: none; 226 | background: #2f435e; 227 | color: #f2f2f2; 228 | padding: 10px 30px 10px 30px; 229 | font-size: 15px; 230 | font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif; 231 | font-weight: bold; 232 | border-radius: 3px; 233 | -webkit-transition: all linear 0.30s; 234 | -moz-transition: all linear 0.30s; 235 | transition: all linear 0.30s; 236 | } 237 | 238 | .btn:active { 239 | opacity: 0.2; 240 | } 241 | 242 | .inputtxt { 243 | display: block; 244 | margin-left: auto; 245 | margin-right: auto; 246 | background: transparent; 247 | border: 1px solid #ffffff; 248 | color: rgb(255, 255, 255); 249 | text-align: center; 250 | width: 300px; 251 | } 252 | 253 | #landscape { 254 | display: none; 255 | } 256 | 257 | #gameBody { 258 | position: relative; 259 | width: 640px; 260 | margin: 0 auto; 261 | } 262 | 263 | #share-wx { 264 | background: rgba(0, 0, 0, 0.8); 265 | position: absolute; 266 | top: 0px; 267 | left: 0px; 268 | width: 100%; 269 | z-index: 10000; 270 | display: none; 271 | } 272 | 273 | .rradio { 274 | width: 30px; 275 | height: 30px; 276 | } 277 | 278 | .u-file-btn { 279 | height:18px; 280 | color:#FFF; 281 | } 282 | 283 | .u-file-btn input { 284 | cursor: pointer; 285 | text-align: right; 286 | z-index:10; 287 | } 288 | -------------------------------------------------------------------------------- /static/index.js: -------------------------------------------------------------------------------- 1 | let isDesktop = navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i) ? false : true; 2 | let fontunit = isDesktop ? 20 : ((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) / 320) * 10; 3 | document.write(''); 8 | let map = { 'd': 1, 'f': 2, 'j': 3, 'k': 4 }; 9 | let key = ['!']; 10 | let chs = ['@', '!', '#', '&', '+', '-', '%', '*']; 11 | let len = key.length; 12 | let hide = false; 13 | let __Time = 20; 14 | let __k = 4; 15 | let _close = false; 16 | let _fsj = false; 17 | var url = 'https://eafoo.github.io/eatcat/static/image/ClickBefore.png'; 18 | 19 | function isplaying() { 20 | return document.getElementById('welcome').style.display == 'none' && 21 | document.getElementById('GameScoreLayer').style.display == 'none' && 22 | document.getElementById("setting1").style.display == 'none'; 23 | } 24 | 25 | function gl() { 26 | let tmp = []; 27 | len = key.length; 28 | var i = 0; 29 | for (let i = 0; i < len; ++i) { 30 | if (chs.includes(key[i]) || (key[i] >= '1' && key[i] <= __k.toString())) { 31 | tmp.push(key[i]); 32 | } 33 | else if (key[i] == '!') { 34 | tmp.push('!'); 35 | } 36 | } 37 | key = tmp; 38 | if (key.length == 0) { 39 | key = ['!']; 40 | } 41 | len = key.length; 42 | } 43 | 44 | if (isDesktop) { 45 | document.write('
'); 46 | document.onkeydown = function (e) { 47 | let key = e.key.toLowerCase(); 48 | if (Object.keys(map).indexOf(key) !== -1 && isplaying()) { 49 | click(map[key]); 50 | } 51 | else if (key == 'r' && document.getElementById('GameScoreLayer').style.display != 'none') { 52 | gameRestart(); 53 | document.getElementById('GameScoreLayer').style.display = 'none' 54 | } 55 | } 56 | } 57 | 58 | let body, blockSize, GameLayer = [], 59 | GameLayerBG, touchArea = [], 60 | GameTimeLayer; 61 | let transform, transitionDuration; 62 | 63 | function init() { 64 | showWelcomeLayer(); 65 | body = document.getElementById('gameBody') || document.body; 66 | body.style.height = window.innerHeight + 'px'; 67 | transform = typeof (body.style.webkitTransform) != 'undefined' ? 'webkitTransform' : (typeof (body.style.msTransform) != 68 | 'undefined' ? 'msTransform' : 'transform'); 69 | transitionDuration = transform.replace(/ransform/g, 'ransitionDuration'); 70 | GameTimeLayer = document.getElementById('GameTimeLayer'); 71 | GameLayer.push(document.getElementById('GameLayer1')); 72 | GameLayer[0].children = GameLayer[0].querySelectorAll('div'); 73 | GameLayer.push(document.getElementById('GameLayer2')); 74 | GameLayer[1].children = GameLayer[1].querySelectorAll('div'); 75 | GameLayerBG = document.getElementById('GameLayerBG'); 76 | if (GameLayerBG.ontouchstart === null) { 77 | GameLayerBG.ontouchstart = gameTapEvent; 78 | } else { 79 | GameLayerBG.onmousedown = gameTapEvent; 80 | } 81 | gameInit(); 82 | initSetting(); 83 | window.addEventListener('resize', refreshSize, false); 84 | let btn = document.getElementById('ready-btn'); 85 | btn.className = 'btn btn-primary btn-lg'; 86 | btn.onclick = function () { 87 | closeWelcomeLayer(); 88 | } 89 | } 90 | 91 | function winOpen() { 92 | window.open(location.href + '?r=' + Math.random(), 'nWin', 'height=500,width=320,toolbar=no,menubar=no,scrollbars=no'); 93 | let opened = window.open('about:blank', '_self'); 94 | opened.opener = null; 95 | opened.close(); 96 | } 97 | let refreshSizeTime; 98 | 99 | function refreshSize() { 100 | clearTimeout(refreshSizeTime); 101 | refreshSizeTime = setTimeout(_refreshSize, 200); 102 | } 103 | 104 | function _refreshSize() { 105 | countBlockSize(); 106 | for (let i = 0; i < GameLayer.length; i++) { 107 | let box = GameLayer[i]; 108 | for (let j = 0; j < box.children.length; j++) { 109 | let r = box.children[j], 110 | rstyle = r.style; 111 | rstyle.left = (j % __k) * blockSize + 'px'; 112 | rstyle.bottom = Math.floor(j / __k) * blockSize + 'px'; 113 | rstyle.width = blockSize + 'px'; 114 | rstyle.height = blockSize + 'px'; 115 | } 116 | } 117 | let f, a; 118 | if (GameLayer[0].y > GameLayer[1].y) { 119 | f = GameLayer[0]; 120 | a = GameLayer[1]; 121 | } else { 122 | f = GameLayer[1]; 123 | a = GameLayer[0]; 124 | } 125 | let y = ((_gameBBListIndex) % 10) * blockSize; 126 | f.y = y; 127 | f.style[transform] = 'translate3D(0,' + f.y + 'px,0)'; 128 | a.y = -blockSize * Math.floor(f.children.length / __k) + y; 129 | a.style[transform] = 'translate3D(0,' + a.y + 'px,0)'; 130 | } 131 | 132 | function countBlockSize() { 133 | blockSize = body.offsetWidth / __k; 134 | body.style.height = window.innerHeight + 'px'; 135 | GameLayerBG.style.height = window.innerHeight + 'px'; 136 | touchArea[0] = window.innerHeight - blockSize * 0; 137 | touchArea[1] = window.innerHeight - blockSize * 3; 138 | } 139 | let _gameBBList = [], 140 | _gameBBListIndex = 0, 141 | _gameOver = false, 142 | _gameStart = false, 143 | _gameTime, _gameTimeNum, _gameScore, _date1, deviation_time; 144 | 145 | function gameInit() { 146 | createjs.Sound.registerSound({ 147 | src: "./static/music/err.mp3", 148 | id: "err" 149 | }); 150 | createjs.Sound.registerSound({ 151 | src: "./static/music/end.mp3", 152 | id: "end" 153 | }); 154 | createjs.Sound.registerSound({ 155 | src: "./static/music/tap.mp3", 156 | id: "tap" 157 | }); 158 | gameRestart(); 159 | } 160 | 161 | let last = 0, lkey = 0; 162 | 163 | function gameRestart() { 164 | last = 0; 165 | lkey = 0; 166 | _gameBBList = []; 167 | _gameBBListIndex = 0; 168 | _gameScore = 0; 169 | _gameOver = false; 170 | _gameStart = false; 171 | _gameTimeNum = __Time; 172 | GameTimeLayer.innerHTML = creatTimeText(_gameTimeNum); 173 | countBlockSize(); 174 | refreshGameLayer(GameLayer[0]); 175 | refreshGameLayer(GameLayer[1], 1); 176 | } 177 | 178 | function gameStart() { 179 | _date1 = new Date(); 180 | _gameStart = true; 181 | _gameTimeNum = __Time; 182 | _gameTime = setInterval(gameTime, 1000); 183 | } 184 | 185 | let date2 = new Date(); 186 | 187 | function gameOver() { 188 | date2 = new Date(); 189 | _gameOver = true; 190 | clearInterval(_gameTime); 191 | setTimeout(function () { 192 | GameLayerBG.className = ''; 193 | showGameScoreLayer(); 194 | }, 1500); 195 | } 196 | 197 | function gameTime() { 198 | _gameTimeNum--; 199 | if (_gameTimeNum <= 0) { 200 | GameTimeLayer.innerHTML = '    时间到!'; 201 | gameOver(); 202 | GameLayerBG.className += ' flash'; 203 | if (!_close) { 204 | createjs.Sound.play("end"); 205 | } 206 | } else { 207 | GameTimeLayer.innerHTML = creatTimeText(_gameTimeNum); 208 | } 209 | } 210 | 211 | function creatTimeText(n) { 212 | return ' 剩余时间:' + n; 213 | } 214 | 215 | let _ttreg = / t{1,2}(\d+)/, 216 | _clearttClsReg = / t{1,2}\d+| bad/; 217 | 218 | function Randomfrom(Min, Max) { 219 | let Range = Max - Min; 220 | let Rand = Math.random(); 221 | let num = Min + Math.round(Rand * Range); //四舍五入 222 | return num; 223 | } 224 | 225 | function randomPos() { //生成按键产生的随机位置 226 | let x = 0; 227 | if (key[last] == '!') { 228 | x = Math.floor(Math.random() * 1000) % __k; 229 | let pos = last - 1; 230 | if (pos == -1) { 231 | pos = len - 1; 232 | } 233 | } 234 | else if (key[last] == '@') { 235 | x = Math.floor(Math.random() * 1000) % __k; 236 | if (x == lkey) { 237 | x++; 238 | if (x == __k) { 239 | x = 0; 240 | } 241 | } 242 | } 243 | else if (key[last] == '#') { 244 | x = lkey; 245 | } 246 | else if (key[last] == '&') { 247 | x = __k - 1 - lkey; 248 | } 249 | else if (key[last] == '+') { 250 | let num = parseInt(key[last + 1]); 251 | last++; 252 | x = (lkey + num) % __k; 253 | } 254 | else if (key[last] == '-') { 255 | let num = parseInt(key[last + 1]); 256 | last++; 257 | x = (lkey - num + __k) % __k; 258 | } 259 | else if (key[last] == '%') { 260 | let num1 = parseInt(key[last + 1]) - 1; 261 | let num2 = parseInt(key[last + 2]) - 1; 262 | if (num2 < num1) { 263 | num2 += __k; 264 | } 265 | x = Randomfrom(num1, num2) % __k; 266 | last += 2; 267 | } 268 | else if (key[last] == '*') { 269 | let l = parseInt(key[last + 1]); 270 | let nums = []; 271 | for (let i = 1; i <= l; ++i) { 272 | nums.push(parseInt(key[last + i + 1]) - 1); 273 | } 274 | last += l + 1; 275 | x = nums[Randomfrom(0, l - 1)]; 276 | } 277 | else { 278 | x = parseInt(key[last]) - 1; 279 | } 280 | lkey = x; 281 | last++; 282 | if (last == len) { 283 | last = 0; 284 | } 285 | return x; 286 | } 287 | 288 | function refreshGameLayer(box, loop, offset) { 289 | let i = randomPos() + (loop ? 0 : __k); 290 | for (let j = 0; j < box.children.length; j++) { 291 | let r = box.children[j], 292 | rstyle = r.style; 293 | rstyle.left = (j % __k) * blockSize + 'px'; 294 | rstyle.bottom = Math.floor(j / __k) * blockSize + 'px'; 295 | rstyle.width = blockSize + 'px'; 296 | rstyle.height = blockSize + 'px'; 297 | rstyle.backgroundImage = "none"; 298 | r.className = r.className.replace(_clearttClsReg, ''); 299 | if (i == j) { 300 | _gameBBList.push({ 301 | cell: i % __k, 302 | id: r.id 303 | }); 304 | rstyle.backgroundImage = "url(" + url + ")"; 305 | rstyle.backgroundSize = 'cover'; 306 | r.className += ' t' + (Math.floor(Math.random() * 1000) % (__k + 1) + 1); 307 | r.notEmpty = true; 308 | if (j < box.children.length - __k) { 309 | i = randomPos() + (Math.floor(j / __k) + 1) * __k; 310 | } 311 | } else { 312 | r.notEmpty = false; 313 | } 314 | } 315 | if (loop) { 316 | box.style.webkitTransitionDuration = '0ms'; 317 | box.style.display = 'none'; 318 | box.y = -blockSize * (Math.floor(box.children.length / __k) + (offset || 0)) * loop; 319 | setTimeout(function () { 320 | box.style[transform] = 'translate3D(0,' + box.y + 'px,0)'; 321 | setTimeout(function () { 322 | box.style.display = 'block'; 323 | }, 0); 324 | }, 0); 325 | } else { 326 | box.y = 0; 327 | box.style[transform] = 'translate3D(0,' + box.y + 'px,0)'; 328 | } 329 | box.style[transitionDuration] = '180ms'; 330 | } 331 | 332 | function gameLayerMoveNextRow() { 333 | for (let i = 0; i < GameLayer.length; i++) { 334 | let g = GameLayer[i]; 335 | g.y += blockSize; 336 | if (g.y > blockSize * (Math.floor(g.children.length / __k))) { 337 | refreshGameLayer(g, 1, -1); 338 | } else { 339 | g.style[transform] = 'translate3D(0,' + g.y + 'px,0)'; 340 | } 341 | } 342 | } 343 | 344 | function gameTapEvent(e) { 345 | if (_gameOver) { 346 | return false; 347 | } 348 | let tar = e.target; 349 | let y = e.clientY || e.targetTouches[0].clientY, 350 | x = (e.clientX || e.targetTouches[0].clientX) - body.offsetLeft, 351 | p = _gameBBList[_gameBBListIndex]; 352 | 353 | if (!_fsj && (y > touchArea[0] || y < touchArea[1])) { 354 | return false; 355 | } 356 | if (((p.id == tar.id || (_fsj && p.id % __k == tar.id % __k)) && tar.notEmpty) || (p.cell == 0 && x < blockSize) || (x > p.cell * blockSize && x < (p.cell + 1) * 357 | blockSize) || (p.cell == (__k - 1) && x > (__k - 1) * blockSize)) { 358 | if (!_gameStart) { 359 | gameStart(); 360 | } 361 | if (!_close) { 362 | createjs.Sound.play("tap"); 363 | } 364 | tar = document.getElementById(p.id); 365 | tar.className = tar.className.replace(_ttreg, ' tt$1'); 366 | tar.style.backgroundImage = "none"; 367 | _gameBBListIndex++; 368 | _gameScore++; 369 | gameLayerMoveNextRow(); 370 | } else if (_gameStart && !tar.notEmpty) { 371 | if (!_close) { 372 | createjs.Sound.play("err"); 373 | } 374 | gameOver(); 375 | tar.className += ' bad'; 376 | } 377 | return false; 378 | } 379 | 380 | function createGameLayer() { 381 | let html = '
'; 382 | for (let i = 1; i <= 2; i++) { 383 | let id = 'GameLayer' + i; 384 | html += '
'; 385 | for (let j = 0; j < (__k * 2 >= 10 ? __k * 2 : __k * 3); j++) { 386 | for (let k = 0; k < __k; k++) { 387 | html += '
'; 389 | } 390 | } 391 | html += '
'; 392 | } 393 | html += '
'; 394 | html += '
'; 395 | return html; 396 | } 397 | 398 | function closeWelcomeLayer() { 399 | let l = document.getElementById('welcome'); 400 | l.style.display = 'none'; 401 | } 402 | 403 | function showWelcomeLayer() { 404 | let l = document.getElementById('welcome'); 405 | l.style.display = 'block'; 406 | } 407 | 408 | function showGameScoreLayer() { 409 | let l = document.getElementById('GameScoreLayer'); 410 | let c = document.getElementById(_gameBBList[_gameBBListIndex - 1].id).className.match(_ttreg)[1]; 411 | l.className = l.className.replace(/bgc\d/, 'bgc' + c); 412 | document.getElementById('GameScoreLayer-text').innerHTML = hide ? '' : "" + shareText(_gameScore) + ""; 413 | let score_text = '您坚持了 '; 414 | score_text += "" + (deviation_time / 1000).toFixed(2) + "" + ' 秒哦!
您的得分为 '; 415 | score_text += "" + _gameScore + ""; 416 | score_text += '
您平均每秒点击了 '; 417 | score_text += "" + (_gameScore * 1000 / deviation_time).toFixed(2); 418 | score_text += "" + ' 次哦!'; 419 | score_text += "
相当于 " + (_gameScore * 15000 / deviation_time).toFixed(2) + " BPM 下的十六分音符哦!" 420 | document.getElementById('GameScoreLayer-score').innerHTML = score_text; 421 | let bast = cookie('bast-score'); 422 | if (!bast || _gameScore > bast) { 423 | bast = _gameScore; 424 | cookie('bast-score', bast, 100); 425 | } 426 | 427 | document.getElementById('GameScoreLayer-bast').innerHTML = '历史最佳得分 ' + "" + bast + ""; 428 | let now = '您的自定义键型为:' + "" + key.join('') 429 | + ""; 430 | document.getElementById('now').innerHTML = now; 431 | l.style.display = 'block'; 432 | } 433 | 434 | function hideGameScoreLayer() { 435 | let l = document.getElementById('GameScoreLayer'); 436 | l.style.display = 'none'; 437 | } 438 | 439 | function replayBtn() { 440 | gameRestart(); 441 | hideGameScoreLayer(); 442 | } 443 | 444 | function backBtn() { 445 | gameRestart(); 446 | hideGameScoreLayer(); 447 | showWelcomeLayer(); 448 | } 449 | 450 | function shareText(score) { 451 | 452 | deviation_time = (date2.getTime() - _date1.getTime()) 453 | if (score <= 2.5 * __Time) return '加油!我相信您可以的!'; 454 | if (score <= 5 * __Time) return '^_^ 加把劲,底力大王就是您!'; 455 | if (score <= 7.5 * __Time) return '您!'; 456 | if (score <= 10 * __Time) return '太 您 了!'; 457 | return '您是外星人嘛?'; 458 | } 459 | 460 | function toStr(obj) { 461 | if (typeof obj == 'object') { 462 | return JSON.stringify(obj); 463 | } else { 464 | return obj; 465 | } 466 | } 467 | 468 | function cookie(name, value, time) { 469 | if (name) { 470 | if (value) { 471 | if (time) { 472 | let date = new Date(); 473 | date.setTime(date.getTime() + 864e5 * time), time = date.toGMTString(); 474 | } 475 | return document.cookie = name + "=" + escape(toStr(value)) + (time ? "; expires=" + time + (arguments[3] ? 476 | "; domain=" + arguments[3] + (arguments[4] ? "; path=" + arguments[4] + (arguments[5] ? "; secure" : "") : "") : 477 | "") : ""), !0; 478 | } 479 | return value = document.cookie.match("(?:^|;)\\s*" + name.replace(/([-.*+?^${}()|[\]\/\\])/g, "\\$1") + "=([^;]*)"), 480 | value = value && "string" == typeof value[1] ? unescape(value[1]) : !1, (/^(\{|\[).+\}|\]$/.test(value) || 481 | /^[0-9]+$/g.test(value)) && eval("value=" + value), value; 482 | } 483 | let data = {}; 484 | value = document.cookie.replace(/\s/g, "").split(";"); 485 | for (let i = 0; value.length > i; i++) name = value[i].split("="), name[1] && (data[name[0]] = unescape(name[1])); 486 | return data; 487 | } 488 | 489 | document.write(createGameLayer()); 490 | 491 | function initSetting() { 492 | if (cookie('k')) { 493 | let tsmp = parseInt(cookie('k')); 494 | if (tsmp != __k) { 495 | __k = tsmp; 496 | var el = document.getElementById('GameLayerBG'); 497 | let fa = el.parentNode; 498 | fa.removeChild(el); 499 | fa.removeChild(GameTimeLayer); 500 | fa.appendChild(parseElement(createGameLayer())); 501 | fa.appendChild(parseElement("
")); 502 | GameTimeLayer = document.getElementById("GameTimeLayer"); 503 | GameLayer = []; 504 | GameLayer.push(document.getElementById('GameLayer1')); 505 | GameLayer[0].children = GameLayer[0].querySelectorAll('div'); 506 | GameLayer.push(document.getElementById('GameLayer2')); 507 | GameLayer[1].children = GameLayer[1].querySelectorAll('div'); 508 | GameLayerBG = document.getElementById('GameLayerBG'); 509 | if (GameLayerBG.ontouchstart === null) { 510 | GameLayerBG.ontouchstart = gameTapEvent; 511 | } else { 512 | GameLayerBG.onmousedown = gameTapEvent; 513 | } 514 | } 515 | } 516 | if (cookie('time')) { 517 | __Time = parseInt(cookie('time')); 518 | GameTimeLayer.innerHTML = creatTimeText(__Time); 519 | } 520 | if (cookie('key')) { 521 | var str = cookie('key'); 522 | map = {}; 523 | for (let i = 0; i < __k; ++i) { 524 | map[str.charAt(i).toLowerCase()] = i + 1; 525 | } 526 | } 527 | if (cookie('note')) { 528 | var note = cookie('note'); 529 | key = note.split(''); 530 | gl(); 531 | } 532 | if (cookie("hide")) { 533 | if (cookie("hide").toString() == '1') { 534 | hide = true; 535 | } 536 | } 537 | if (cookie("fsj")) { 538 | if (cookie("fsj").toString() == '1') { 539 | _fsj = true; 540 | } 541 | } 542 | if (cookie("close")) { 543 | if (cookie("close").toString() == '1') { 544 | _close = true; 545 | } 546 | } 547 | gameRestart(); 548 | } 549 | 550 | function show_btn(i) { 551 | document.getElementById("tt").style.display = "block"; 552 | document.getElementById("ttt").style.display = "block"; 553 | document.getElementById("btn_group").style.display = "block"; 554 | document.getElementById("btn_group2").style.display = "block"; 555 | document.getElementById("setting" + i.toString()).style.display = "none"; 556 | } 557 | 558 | function nxtpage(i) { 559 | document.getElementById("setting" + i.toString()).style.display = "none"; 560 | document.getElementById("setting" + (i + 1).toString()).style.display = "block"; 561 | } 562 | 563 | function lstpage(i) { 564 | document.getElementById("setting" + i.toString()).style.display = "none"; 565 | document.getElementById("setting" + (i - 1).toString()).style.display = "block"; 566 | } 567 | 568 | 569 | function show_setting() { 570 | var str = []; 571 | for (var i = 1; i <= __k; ++i) { 572 | str.push('a'); 573 | } 574 | for (var ke in map) { 575 | str[map[ke] - 1] = ke.charAt(0); 576 | } 577 | document.getElementById("k").value = __k.toString(); 578 | document.getElementById("keyboard").value = str.join(''); 579 | document.getElementById("timeinput").value = __Time.toString(); 580 | document.getElementById("note").value = key.join(''); 581 | document.getElementById("hide").checked = hide; 582 | document.getElementById("close").checked = _close; 583 | document.getElementById("fsj").checked = _fsj; 584 | document.getElementById("btn_group").style.display = "none"; 585 | document.getElementById("btn_group2").style.display = "none"; 586 | document.getElementById("tt").style.display = "none"; 587 | document.getElementById("ttt").style.display = "none"; 588 | document.getElementById("setting1").style.display = "block"; 589 | } 590 | 591 | function parseElement(htmlString) { 592 | return new DOMParser().parseFromString(htmlString, 'text/html').body.childNodes[0] 593 | } 594 | 595 | function save_cookie() { 596 | let str = document.getElementById("keyboard").value; 597 | let Time = document.getElementById("timeinput").value; 598 | let note = document.getElementById("note").value; 599 | hide = document.getElementById("hide").checked; 600 | _close = document.getElementById("close").checked; 601 | _fsj = document.getElementById("fsj").checked 602 | 603 | let tsmp = parseInt(document.getElementById("k").value); 604 | if (tsmp != __k) { 605 | __k = tsmp; 606 | var el = document.getElementById('GameLayerBG'); 607 | let fa = el.parentNode; 608 | fa.removeChild(el); 609 | fa.removeChild(GameTimeLayer); 610 | fa.appendChild(parseElement(createGameLayer())); 611 | fa.appendChild(parseElement("
")); 612 | GameTimeLayer = document.getElementById("GameTimeLayer"); 613 | GameLayer = []; 614 | GameLayer.push(document.getElementById('GameLayer1')); 615 | GameLayer[0].children = GameLayer[0].querySelectorAll('div'); 616 | GameLayer.push(document.getElementById('GameLayer2')); 617 | GameLayer[1].children = GameLayer[1].querySelectorAll('div'); 618 | GameLayerBG = document.getElementById('GameLayerBG'); 619 | if (GameLayerBG.ontouchstart === null) { 620 | GameLayerBG.ontouchstart = gameTapEvent; 621 | } else { 622 | GameLayerBG.onmousedown = gameTapEvent; 623 | } 624 | } 625 | 626 | map = {}; 627 | for (let i = 0; i < __k; ++i) { 628 | map[str.charAt(i).toLowerCase()] = i + 1; 629 | } 630 | 631 | __Time = parseInt(Time); 632 | GameTimeLayer.innerHTML = creatTimeText(__Time); 633 | 634 | key = note.split(''); 635 | gl(); 636 | cookie('k', __k.toString(), 100); 637 | cookie('note', key.join(''), 100); 638 | cookie('time', Time, 100); 639 | cookie('key', str, 100); 640 | if (_close) { 641 | cookie("close", "1", 100); 642 | } 643 | else { 644 | cookie('close', '0', 100); 645 | } 646 | if (hide) { 647 | cookie('hide', '1', 100); 648 | } 649 | else { 650 | cookie('hide', '0', 100); 651 | } 652 | if (_fsj) { 653 | cookie('fsj', '1', 100); 654 | } 655 | else { 656 | cookie('fsj', '0', 100); 657 | } 658 | gameRestart(); 659 | } 660 | 661 | function isnull(val) { 662 | let str = val.replace(/(^\s*)|(\s*$)/g, ''); 663 | if (str == '' || str == undefined || str == null) { 664 | return true; 665 | } else { 666 | return false; 667 | } 668 | } 669 | 670 | function click(index) { 671 | let p = _gameBBList[_gameBBListIndex]; 672 | let base = parseInt(document.getElementById(p.id).getAttribute("num")) - p.cell; 673 | let num = base + index - 1; 674 | let id = p.id.substring(0, 11) + num; 675 | 676 | let fakeEvent = { 677 | clientX: ((index - 1) * blockSize + index * blockSize) / 2 + body.offsetLeft, 678 | // Make sure that it is in the area 679 | clientY: (touchArea[0] + touchArea[1]) / 2, 680 | target: document.getElementById(id), 681 | }; 682 | 683 | gameTapEvent(fakeEvent) 684 | } 685 | 686 | function foreach() { 687 | var strCookie = document.cookie; 688 | var arrCookie = strCookie.split("; "); // 将多cookie切割为多个名/值对 689 | for (var i = 0; i < arrCookie.length; i++) { // 遍历cookie数组,处理每个cookie对 690 | var arr = arrCookie[i].split("="); 691 | if (arr.length > 0) 692 | DelCookie(arr[0]); 693 | } 694 | } 695 | 696 | function GetCookieVal(offset) { 697 | var endstr = document.cookie.indexOf(";", offset); 698 | if (endstr == -1) 699 | endstr = document.cookie.length; 700 | return decodeURIComponent(document.cookie.substring(offset, endstr)); 701 | } 702 | 703 | function DelCookie(name) { 704 | var exp = new Date(); 705 | exp.setTime(exp.getTime() - 1); 706 | var cval = GetCookie(name); 707 | document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); 708 | } 709 | 710 | function GetCookie(name) { 711 | var arg = name + "="; 712 | var alen = arg.length; 713 | var clen = document.cookie.length; 714 | var i = 0; 715 | while (i < clen) { 716 | var j = i + alen; 717 | if (document.cookie.substring(i, j) == arg) 718 | return GetCookieVal(j); 719 | i = document.cookie.indexOf(" ", i) + 1; 720 | if (i == 0) break; 721 | } 722 | return null; 723 | } 724 | 725 | function autoset(asss) { 726 | key = asss.split(''); 727 | len = key.length; 728 | gameRestart(); 729 | } 730 | 731 | function showImg(input) { 732 | var file = input.files[0]; 733 | url = window.URL.createObjectURL(file); 734 | } 735 | 736 | function stair() { 737 | key = []; 738 | for (var i = 1; i < __k; ++i) { 739 | key.push(i.toString()); 740 | } 741 | for (var i = __k; i > 1; --i) { 742 | key.push(i.toString()); 743 | } 744 | len = (__k - 1) * 2; 745 | gameRestart(); 746 | } 747 | -------------------------------------------------------------------------------- /static/music/end.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/static/music/end.mp3 -------------------------------------------------------------------------------- /static/music/err.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/static/music/err.mp3 -------------------------------------------------------------------------------- /static/music/tap.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eafoo/eatcat/e1eac2d1eec5a57f5779fdaef39e59476c7b3308/static/music/tap.mp3 --------------------------------------------------------------------------------