diff --git a/nopixel_minigame/4.0/roof_running/index.html b/nopixel_minigame/4.0/roof_running/index.html index 354739a..7fb7de4 100644 --- a/nopixel_minigame/4.0/roof_running/index.html +++ b/nopixel_minigame/4.0/roof_running/index.html @@ -36,6 +36,13 @@

STREAK: 0 MAX STREAK: 0
TIME: 0.000 BEST TIME: 0.000 +
+
+ + +
5x5
+
+
Play the minigame
diff --git a/nopixel_minigame/4.0/roof_running/minigame.css b/nopixel_minigame/4.0/roof_running/minigame.css index abb3165..f1e868a 100644 --- a/nopixel_minigame/4.0/roof_running/minigame.css +++ b/nopixel_minigame/4.0/roof_running/minigame.css @@ -134,6 +134,30 @@ body{ text-align: center; line-height: 60px; } +.group5{ + width: 100px; + height: 100px; +} +.group6{ + width: 82px; + height: 82px; +} +.group7{ + width: 69px; + height: 69px; +} +.group8{ + width: 59px; + height: 59px; +} +.group9{ + width: 52px; + height: 52px; +} +.group10{ + width: 46px; + height: 46px; +} .group.green{ background: linear-gradient(180deg, #91bc57 0%, #6b8d40 100%); border: 2px #85a957 solid; diff --git a/nopixel_minigame/4.0/roof_running/minigame.js b/nopixel_minigame/4.0/roof_running/minigame.js index 27929cd..c792f89 100644 --- a/nopixel_minigame/4.0/roof_running/minigame.js +++ b/nopixel_minigame/4.0/roof_running/minigame.js @@ -4,6 +4,8 @@ let streak = 0; let max_streak = 0; let best_time = 99.999; +let mode = 5; + const getCookieValue = (name) => ( document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '' ) @@ -26,6 +28,13 @@ best_time = getBestTimeFromCookie(); const sleep = (ms, fn) => {return setTimeout(fn, ms)}; +// Option +document.querySelector('#grid').addEventListener('input', function(ev){ + document.querySelector('.grid_value').innerHTML = ev.target.value + 'x' + ev.target.value; + mode = parseInt(ev.target.value, 10); + streak = 0; + reset(); +}); // Resets document.querySelector('.btn_again').addEventListener('click', function(){ streak = 0; @@ -35,21 +44,21 @@ document.querySelector('.btn_again').addEventListener('click', function(){ function isValid(type, pos, color){ switch (type) { case 'left': - if(pos%7 === 0) return false; - pos = pos-1; + if(pos%mode === 0) return false; + pos = pos - 1; if(pos < 0) return false; break; case 'right': - pos = pos+1; - if(pos > 48 || pos%7 === 0) return false; + pos = pos + 1; + if(pos >= (mode**2) || pos%mode === 0) return false; break; case 'top': - pos = pos-7; + pos = pos - mode; if(pos < 0) return false; break; case 'bottom': - pos = pos+7; - if(pos > 48) return false; + pos = pos + mode; + if(pos >= (mode**2)) return false; break; } if(pos_checked.includes(pos)) return false; @@ -75,9 +84,9 @@ function checkAdjacent(pos, color){ function deleteChecked(){ const groups = document.querySelectorAll('.group'); - for(let i=48; i >= 7; i--){ + for(let i= (mode**2)-1; i >= mode; i--){ if( groups[i].dataset.remove === '1'){ - let pos = i-7; + let pos = i - mode; while(pos >= 0){ if(groups[pos].dataset.remove !== '1'){ // Replace @@ -92,7 +101,7 @@ function deleteChecked(){ delete groups[pos].dataset.color; pos=0; } - pos=pos-7; + pos=pos - mode; } } } @@ -100,19 +109,14 @@ function deleteChecked(){ function joinColumns(){ const groups = document.querySelectorAll('.group'); - for(let i=42; i <= 47; i++){ + for(let i= (mode**2)-mode; i <= (mode**2)-2; i++){ if( groups[i].dataset.remove === '1'){ - console.log('column-empty', groups[i]); let pos = i+1; let maxH = maxHorizontal(i); - console.log('maxH', maxH); while(pos-i <= maxH){ - console.log('pos', pos); if(groups[pos].dataset.remove !== '1'){ let pos_diff = pos-i; - console.log('column-found', pos_diff, groups[pos]); - for(let vpos=pos; vpos>=0; vpos=vpos-7){ - console.log('row-found', groups[vpos]); + for(let vpos=pos; vpos>=0; vpos=vpos - mode){ if(groups[vpos].dataset.remove !== '1'){ // Replace delete groups[vpos-pos_diff].dataset.remove; @@ -126,7 +130,7 @@ function joinColumns(){ delete groups[vpos].dataset.color; } } - pos=48; + pos=(mode**2); } pos++; } @@ -158,7 +162,7 @@ function addListeners(){ } function check(){ - if(document.querySelectorAll('.group.removed').length === 49){ + if(document.querySelectorAll('.group.removed').length === (mode**2)){ stopTimer(); streak++; if(streak > max_streak){ @@ -175,8 +179,8 @@ function check(){ } function maxHorizontal(pos){ - let max = (pos+1) % 7; - if(max > 0) return 7-max; + let max = (pos+1) % mode; + if(max > 0) return mode - max; else return 0; } @@ -202,9 +206,9 @@ function start(){ let div = document.createElement('div'); let colors = ['red', 'green', 'blue']; - div.classList.add('group'); + div.classList.add('group','group'+mode); const groups = document.querySelector('.groups'); - for(let i=0; i < 49; i++){ + for(let i=0; i < (mode**2); i++){ let group = div.cloneNode(); let randomColor = colors[Math.floor(Math.random() * colors.length)]; group.dataset.position = i.toString();