// Created by C. Scheler const playing_on_pc = confirm("READ:\n\nIf you want to play using a keyboard, click 'OK'. For touchscreen tap 'cancel'.\n\nKeyboard controls:\nleft = A or ,\nright = D or -\njump = W or S or .\npause = P (or pause button)\nTo use the keybord, you first have to click on the game window. The arrow keys don't work.\n\nThe light green blocks are movable. You can select any level."); if(playing_on_pc) alert("Unfortunately, it doesn't work for PCs yet."); const screen_size = [window.innerWidth, window.innerHeight]; screen_size[2] = Math.min(...screen_size); var player, things_div, health_div, block_divs, background, face, btns, lvl_complete_div, levels_div, game_over_div; var player_pos = [0.44, 0]; //x (from left), y (from bottom (ground div)) var jumping = false, falling = false; var moving, game_over_int, block_moving, stillOnMovBl; var blocks_l; var blocks_original_pos = []; //original position (left) of movable blocks (for reset) var goal; //x-coordinate of the end of the level var health = 3; var recently_hurt = false; var background_pos = 0; var start_time; const levels = [//level 1 {blocks: /*[left, bottom, width, height, dangerous?, movable/moving?, [most left, most right pos, speed]]*/ [[0.9, 0, 0.6, 0.2], [1.49 /*normally 1.5, but then you could sometimes see a thin line between the blocks*/, 0, 0.4, 0.4], [1.88, 0.2, 0.1, 0.07], [2.5, 0, 0.18, 0.18, true, true, [1.89, 2.82, 0.003]], [3, 0, 0.2, 0.25, true], [3.5, 0, 0.1, 0.1,, true], [4.4, 0, 0.4, 0.4], [4.8, -0.08, 1.2, 0.15, true], [6, 0, 0.07, 0.09], [6.3, 0.1, 0.18, 0.18, true, true, [6.3, 6.7, 0.003]], [6.9, 0.1, 0.18, 0.18, true, true, [6.9, 7.3, 0.003]]], end_txt: "Hello! Yes, I have a face."}, //level 2 {blocks: [[0.7, 0, 0.2, 0.33], [0.9, 0.13, 1, 0.18, true, true, [0.9, 1.2, 0.001]], [2.2, 0, 0.2, 0.33], [2.4, 0, 0.1, 0.07, true, true, [2.4, 3.6, 0.01]], [3.41, 0.33, 0.07, 0.78], [3.41, 1.11, 0.51, 0.07], [3.48, 0.33, 0.12, 0.07], [3.48, 0.73, 0.12, 0.07], [3.6, 0.13, 0.12, 0.07], [3.6, 0.53, 0.12, 0.07], [3.7, 0.93, 0.02, 0.05], [3.72, 0, 0.07, 0.98], [3.92, 0.13, 1, 2], [3.92, 0, 0.13, 0.13, true, true, [3.92, 5.18, 0.002]], [5.08, 0.13, 0.27, 0.2], [5.31, 0, 0.05, 0.33]], end_txt: "I'm awake! Unfortunately, I sleep very much."}, //level 3 {blocks: [[-0.1, 0.2, 0.4, 0.07], [0, 0.5, 0.75, 0.07], [0.68, 0, 0.07, 0.5], [0.7, 0, 0.2, 0.24], [0.9, 0.2, 0.1, 0.1,, true], [0.9, 0, 7.7, 0.2, true], [2.2, 0.2, 0.1, 0.07], [3.2, 0.2, 0.1, 0.2], [4.1, 0.2, 0.1, 0.4], [5, 0.2, 0.1, 0.6], [5.2, 0.8, 0.15, 0.15, true, true, [5, 5.95, 0.003]], [6, 0.2, 0.1, 0.6], [6.2, 0.8, 0.1, 1, true, true, [6, 7.3, 0.003]], [6.5, 0.2, 0.1, 0.4], [7.3, 0.2, 0.1, 0.6], [8.6, 0, 0.07, 0.25]], end_txt: "Can you help me get out of this?"}, //level 4 {blocks: [[0.6, 0, 0.1, 0.3], [0.9, 0.45, 4.7, 0.1], [0.9, 1, 4.7, 1], [1.2, 0, 0.1, 0.225, true], [1.2, 0.55, 0.1, 0.225, true], [1.5, 0.225, 0.1, 0.55, true], [1.9, 0, 0.1, 0.225], [1.9, 0.775, 0.1, 0.225], [1.9, 0.225, 0.1, 0.55, true, true, [1.9, 2.3, 0.002]], [2.3, 0, 0.1, 0.225], [2.3, 0.775, 0.1, 0.225], [2.7, 0.55, 0.1, 0.328], [2.78, 0.664, 0.19, 0.1], [2.95, 0.55, 0.1, 0.328], [2.95, 0.21, 0.11, 0.11], [3.005, 0.105, 0.11, 0.11], [3.0875, 0, 0.11, 0.11], [3.17, 0.105, 0.11, 0.11], [3.2, 0.55, 0.1, 0.321], [3.2, 0.798, 0.2, 0.08], [3.2625, 0, 0.11, 0.11], [3.28, 0.674, 0.12, 0.08], [3.28, 0.55, 0.12, 0.08], [3.345, 0.105, 0.11, 0.11], [3.4, 0.21, 0.11, 0.11], [3.55, 0.55, 0.1, 0.328], [3.63, 0.55, 0.12, 0.08], [3.66, 0, 0.1, 0.248], [3.66, 0.228, 0.328, 0.1], [3.74, 0, 0.168, 0.1], [3.888, 0, 0.1, 0.248], [3.9, 0.55, 0.1, 0.328], [3.98, 0.55, 0.12, 0.08], [4.138, 0, 0.1, 0.278], [4.138, 0.258, 0.215, 0.07], [4.218, 0.108, 0.135, 0.07], [4.25, 0.55, 0.1, 0.248], [4.25, 0.778, 0.328, 0.1], [4.318, 0.1605, 0.07, 0.1325], [4.318, 0, 0.07, 0.1255], [4.33, 0.55, 0.168, 0.1], [4.478, 0.55, 0.1, 0.248], [4.538, 0, 0.1, 0.328], [4.618, 0, 0.12, 0.08], [4.888, 0, 0.1, 0.248], [4.888, 0.228, 0.278, 0.1], [4.968, 0, 0.198, 0.1], [5.116, 0.05, 0.1, 0.228], [5.366, 0, 0.1, 0.1], [5.366, 0.23, 0.1, 0.23], [6, 0, 0.07, 0.3, true], [6, 0.6, 0.07, 0.3, true]], end_txt: "Those orange things want to hurt me."}, //level 5 {blocks: [[-1.95, 0, 2, 2, true, true, [5.6, 5.6, 0.002]], [0.7, 0, 0.07, 0.33], [0.77, 0, 0.07, 0.3, true, true, [0.77, 1.6, 0.003]], [1.7, 0.12, 0.12, 1], [1.7, 0, 0.12, 0.12,, true], [1.94, 0.12, 0.2, 0.2], [2.06, 0, 0.08, 0.15], [3, 0, 0.15, 0.12], [3.12, 0, 0.15, 0.24], [3.24, 0, 0.15, 0.36], [3.36, 0, 0.15, 0.48], [3.48, 0, 0.15, 0.6], [3.6, 0, 0.15, 0.72], [3.72, 0, 0.15, 0.84], [3.84, 0.8, 0.22, 0.16], [4, 0.13, 0.06, 0.52], [4.06, 0.46, 1.25, 0.12, true], [4.6, 0, 0.07, 0.3, true], [4.67, 0, 0.12, 0.3], [4.96, 0.28, 0.07, 0.2, true], [5.24, 0, 0.07, 0.33], [5.31, 0.46, 0.12, 0.12], [5.43, 0.46, 0.12, 2,, true]], end_txt: "I don't know why I am here."}, //level 6 {blocks: [[0.7, 0, 0.1, 0.1,, true], [0.7, 0.125, 0.1, 0.1,, true], [0.7, 0.25, 0.1, 0.22], [0.7, 0.45, 0.7, 0.1], [0.8, 0.37, 0.15, 0.07, true, true, [0.8, 1.15, 0.002]], [1.3, 0, 0.1, 0.47], [1.4, 0.1, 0.2, 0.2, true, true, [1.4, 2.4, 0.003]], [2.8, 0, 0.04, 0.3], [2.83, 0, 0.04, 0.6], [2.86, 0, 0.14, 0.9], [3, 0.13, 0.2, 0.75, true, true, [3, 3.2, 0.0005]], [3.2, 0.9, 0.21, 1], [3.4, 0, 0.1, 0.3], [3.4, 0.59, 2.52, 2], [3.63, 0.3, 0.1, 0.3], [3.85, 0, 0.1, 0.14], [4.47, 0, 0.1, 0.4], [4.47, 0.36, 0.46, 0.1], [4.47, 0, 0.46, 0.1], [5.06, 0.13, 0.1, 0.47], [5.13, 0.13, 0.33, 0.1], [5.29, 0.36, 0.4, 0.1], [5.59, 0, 0.1, 0.37], [5.82, 0.13, 0.1, 0.5]], end_txt: "I can smell that the exit is near."}, //level 7 {blocks: [[0.7, 0, 0.1, 0.3]], end_txt: "This level needs more blocks."//"You saved me! Thank you!" } ]; var lvl = 0; window.onload = function(){ player = document.getElementById("player"); player.style.width = player.style.height = screen_size[2]*0.12 + "px"; things_div = document.getElementById("things"); document.getElementById("ground").style.height = things_div.style.bottom = screen_size[2]*0.1+"px"; player.style.left = screen_size[2]*0.44+"px"; btns = document.getElementsByClassName("btn"); if(playing_on_pc) { document.addEventListener("keypress", function(event){ switch(event.key) { //arrow keys don't work with keypress case "-": case "d": move(1); break; case ",": case "a": move(-1); break; case ".": case "s": case "w": jump(); break; case "p": pause(); break; } }); document.addEventListener("keyup", function(event){ switch(event.key) { case "-": case ",": case "d": case "a": clearInterval(moving); break; } }); for(let i=0; i<3; i++) btns[i].style.display = "none"; } else { for(let i=0; i<3; i++) btns[i].style.width = btns[i].style.height = 0.25*screen_size[2]+"px"; document.getElementById("btn_jump").style.right = document.getElementById("btn_move_left").style.left = 0.03*screen_size[2]+"px"; document.getElementById("btn_move_right").style.left = 0.31*screen_size[2]+"px"; } health_div = document.getElementById("health"); background = document.getElementById("background"); background.style.bottom = 0.1*screen_size[2]+"px"; background.style.height = screen_size[2]/screen_size[1]*100+"%"; document.getElementById("try_again").onclick = reset; document.getElementById("back_to_menu").onclick = show_levels_div; document.getElementById("game_over_txt").style.marginTop = 0.3*screen_size[1]+"px"; let eyes = document.getElementsByClassName("eye"); face = [eyes[0], eyes[1], document.getElementById("mouth")]; lvl_complete_div = document.getElementById("lvl_complete"); lvl_complete_div.style.top = 0.15*screen_size[2]+"px"; lvl_complete_div.style.borderRadius = 0.05*screen_size[2]+"px"; levels_div = document.getElementById("levels"); let lvls_html = "Square Game

"; for(let i=0, l=levels.length; i

"+(i+1)+"

"; } levels_div.innerHTML = lvls_html; game_over_div = document.getElementById("game_over"); // add event listener to div with id levels remove onclick from divs with class lvl_div document.querySelector('#levels').addEventListener('click',(evt)=>{ if(evt.target.parentElement.className !== 'lvl_div') return let level = evt.target.innerText load_level(level) }) }; function load_level(level=lvl) { lvl = level; blocks_l = levels[lvl].blocks.length; let things_html = ""; for(let i=0; i"; } if(levels[lvl].blocks[blocks_l-1][4] && levels[lvl].blocks[blocks_l-1][5]) goal = levels[lvl].blocks[blocks_l-1][6][1]; else goal = levels[lvl].blocks[blocks_l-1][0]; goal += levels[lvl].blocks[blocks_l-1][2]+0.5; let end_txt_width = 0.5*screen_size[0]-0.17*screen_size[2]; things_div.innerHTML = things_html + "

"+levels[lvl].end_txt+"

→

"; block_divs = document.getElementsByClassName("block"); player_pos = [0.44, 0]; player.style.bottom = screen_size[2]*0.1+"px"; things_div.style.left = 0; health = 3; health_div.innerHTML = "♥♥♥"; recently_hurt = false; background_pos = background.style.left = 0; block_moving_int(); levels_div.style.display = "none"; let lvl_complete_btn = document.getElementById("lvl_complete_btn"); lvl_complete_btn.style.display = "none"; lvl_complete_btn.style.opacity = 0; for(let i=0; i<3; i++) { face[i].style.height = 0; if(!playing_on_pc) btns[i].style.display = "block"; } lvl_complete_div.style.opacity = 0; lvl_complete_div.innerHTML = ""; document.getElementById("pause").style.display = "block"; let d = new Date(); start_time = [d.getHours(), d.getMinutes(), d.getSeconds()]; } function jump() { if(jumping || falling || health<=0) return 0; jumping = true; clearInterval(stillOnMovBl); let start_pos = player_pos[1]; let jump_time = 3; let time = 0; let j = setInterval(function(){ player.style.bottom = ((player_pos[1] = ((jump_time*0.5)**2-(time-(jump_time*0.5))**2)*0.15+start_pos)+0.1)*screen_size[2]+"px"; //quadratic function y = 1.5²-(x-1.5)² if(time>jump_time*0.5) { if(player_pos[1]<0) { //landing on ground clearInterval(j); player.style.bottom = ((player_pos[1]=0)+0.1)*screen_size[2]+"px"; jumping = false; } else if(landing_on_block()) { clearInterval(j); jumping = false; } } //hitting block from bottom: let i=0; for(; i=player_pos[0]+0.119) { if(levels[lvl].blocks[i][5]) continue; else break; } else if(player_pos[1]+0.12>=levels[lvl].blocks[i][1] && player_pos[0]player_pos[0]+0.115) { if(levels[lvl].blocks[i][5]) continue; else break; } else if(player_pos[1]levels[lvl].blocks[i][1]+levels[lvl].blocks[i][3]*0.5) { player.style.bottom = ((player_pos[1] = levels[lvl].blocks[i][1]+levels[lvl].blocks[i][3])+0.1)*screen_size[2]+"px"; if(levels[lvl].blocks[i][4]) { ouch(); setTimeout(landing_ouch_check, 1500); if(levels[lvl].blocks[i][5]) { stillOnMovBl = setInterval(function(){ if(!(player_pos[0]+0.12>levels[lvl].blocks[i][0] && player_pos[0]= player_pos[0]+0.12) { if(levels[lvl].blocks[i][5]) continue; else break; } else if(levels[lvl].blocks[i][4] && player_pos[1]-0.01<=levels[lvl].blocks[i][1]+levels[lvl].blocks[i][3] && player_pos[0]levels[lvl].blocks[i][1]) { ouch(); setTimeout(landing_ouch_check, 1500); break; } } } function fall() { if(jumping || falling) return 0; falling = true; clearInterval(stillOnMovBl); let start_pos = player_pos[1]; let time = 0; let f = setInterval(function(){ player.style.bottom = ((player_pos[1] = start_pos-time**2*0.15)+0.1)*screen_size[2]+"px"; //quadratic function y = -x² with x≥0 if(player_pos[1]<0) { //landing on ground clearInterval(f); player_pos[1] = 0; player.style.bottom = 0.1*screen_size[2]+"px"; falling = false; } else if(landing_on_block()) { clearInterval(f); falling = false; } time += 0.02; }, 10); } function move(speed) { clearInterval(moving); if(health<=0) return 0; speed *= 0.007; moving = setInterval(function(){ let possible = true; let pushing = [false]; let i=0; for(; iplayer_pos[0]+0.12) { if(levels[lvl].blocks[i][5]) continue; else break; } else if(((speed<0 && player_pos[0]<=levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2] && player_pos[0]>levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2]*0.8) || (speed>0 && player_pos[0]+0.12>=levels[lvl].blocks[i][0] && player_pos[0]+0.12levels[lvl].blocks[i][1]) { if(levels[lvl].blocks[i][5] && !levels[lvl].blocks[i][4]) { pushing[0] = true; pushing[1] = i; for(let i2=i, s=(speed>0 ? 1:-1); i2=0; i2+=s) { if(((speed<0 && levels[lvl].blocks[i][0]<=levels[lvl].blocks[i2][0]+levels[lvl].blocks[i2][2] && levels[lvl].blocks[i][0]>levels[lvl].blocks[i2][0]+levels[lvl].blocks[i2][2]*0.5) || (speed>0 && levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2]>=levels[lvl].blocks[i2][0] && levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2]levels[lvl].blocks[i2][1]) { possible = false; break; } } } else { possible = false; if(levels[lvl].blocks[i][4]) ouch(); } break; } } if(possible) { let distance = speed*(pushing[0] ? 0.4:1); player_pos[0] += distance; things_div.style.left = (0.44-player_pos[0])*screen_size[2]+"px"; background.style.left = (background_pos -= distance*0.1*screen_size[2])+"px"; if(pushing[0]) block_divs[pushing[1]].style.left = (levels[lvl].blocks[pushing[1]][0] = player_pos[0] + (speed>0 ? 0.12:-levels[lvl].blocks[pushing[1]][2]))*screen_size[2]+"px"; //checking if you should fall: if(player_pos[1]>0 && !jumping && !falling) { let standing_on_block = false; for(let i=0; i= player_pos[0]+0.12) { if(levels[lvl].blocks[i][5]) continue; else break; } else if(player_pos[1]-0.01<=levels[lvl].blocks[i][1]+levels[lvl].blocks[i][3] && player_pos[0]levels[lvl].blocks[i][1]) { standing_on_block = true; break; } } if(!standing_on_block) fall(); } //reaching goal: if(speed>0 && player_pos[0]+0.12>=goal) { for(let id = setInterval(function(){}, 10000); id>0; id--) clearInterval(id); jumping = falling = false; lvl_complete_div.innerHTML = "

Level "+(lvl+1)+" complete!

Time: "+current_time()[3]+"
"; player.style.background = "grey"; if(playing_on_pc) health = 0; //disables moving/jumping else { for(let i=0; i<3; i++) btns[i].style.display = "none"; } document.getElementById("pause").style.display = "none"; let end_txt_div = document.getElementById("end_txt"); end_txt_div.style.bottom = (player_pos[1]+0.1)*screen_size[2]+"px"; let lvl_complete_btn = document.getElementById("lvl_complete_btn"); lvl_complete_btn.style.display = "block"; let h = 0; let h_int = setInterval(function(){ face[0].style.height = face[1].style.height = face[2].style.height = ++h + "%"; face[0].style.top = face[1].style.top = 32.5-h*0.5 + "%"; if(h>=25) { clearInterval(h_int); h = 0; h_int = setInterval(function(){ end_txt_div.style.opacity = h += 0.01; if(h>=1) { clearInterval(h_int); h = 0; h_int = setInterval(function(){ lvl_complete_div.style.opacity = lvl_complete_btn.style.opacity = h += 0.01; if(h>=1) clearInterval(h_int); }, 10); } }, 10); } }, 30); } } else { player_pos[0] = speed<0 ? levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2]:levels[lvl].blocks[i][0]-0.12; things_div.style.left = (0.44-player_pos[0])*screen_size[2]+"px"; } }, 10); } function ouch() { if(recently_hurt) return 0; recently_hurt = true; health_div.innerHTML = "♥".repeat(--health)+"✖️".repeat(3-health); player.style.background = "#b66"; if(health<=0) { for(let id = setInterval(function(){}, 10000); id>0; id--) clearInterval(id); for(let i=0; i<3; i++) btns[i].style.display = "none"; document.getElementById("pause").style.display = "none"; document.getElementById("try_again").style.display = document.getElementById("back_to_menu").style.display = "inline-block"; document.getElementById("perc_complete").innerHTML = "You've completed "+ Math.round((player_pos[0]-0.44)/(goal-0.56)*1000)/10 +" % of the level." let op = 0; game_over_div.style.display = "block"; game_over_int = setInterval(function(){ game_over_div.style.opacity = op += 0.01; if(op>=1) clearInterval(game_over_int); }, 10); } else { setTimeout(function(){ recently_hurt = false; player.style.background = "grey"; }, 1500); } } function reset() { clearInterval(game_over_int); clearInterval(block_moving); clearInterval(stillOnMovBl); player_pos[0] = 0.44; things_div.style.left = 0; player_pos[1] = 0; player.style.bottom = 0.1*screen_size[2]+"px"; player.style.background = "grey"; game_over_div.style.opacity = 0; game_over_div.style.display = "none"; for(let i=0; iplayer_pos[1] && levels[lvl].blocks[i][1]0 && levels[lvl].blocks[i][0]+levels[lvl].blocks[i][2]>=player_pos[0] && levels[lvl].blocks[i][0]player_pos[0]+0.12))) { ouch(); levels[lvl].blocks[i][6][2] *= -1; } else { block_divs[i].style.left = (levels[lvl].blocks[i][0] += levels[lvl].blocks[i][6][2])*screen_size[2]+"px"; if((levels[lvl].blocks[i][6][2]>0 && levels[lvl].blocks[i][0]>=levels[lvl].blocks[i][6][1]) || (levels[lvl].blocks[i][6][2]<0 && levels[lvl].blocks[i][0]<=levels[lvl].blocks[i][6][0])) levels[lvl].blocks[i][6][2] *= -1; } } }, 10); } function pause() { let d = new Date(); let pause_start = [d.getHours(), d.getMinutes(), d.getSeconds()]; let input = prompt("[Pause]\n\nLevel "+(lvl+1)+": "+Math.round((player_pos[0]-0.44)/(goal-0.56)*1000)/10 +" % complete\nTime: "+current_time()[3]+"\nType in 're' to reset the level or 'bm' to go back to menu and select another level."); if(input == "re") reset(); else if(input == "bm") show_levels_div(); else { //'removing' time where game was paused let pause_time = current_time(pause_start); start_time[2] += pause_time[2]; if(start_time[2]>60) { start_time[2] -= 60; start_time[1]++; } start_time[1] += pause_time[1]; if(start_time[1]>60) { start_time[1] -= 60; start_time[0]++; } start_time[0] += pause_time[0]; if(start_time[0]>60) { start_time[0] -= 24; } } } function current_time(start = start_time) { //returns how much time has passed since the level was started or since a certain time //doesn't work if it's more than 24 h let d = new Date(); let s = d.getSeconds(); let m = d.getMinutes(); let h = d.getHours(); let sec = s-start[2]; let min = m-start[1]; let hrs = h-start[0]; if(hrs<0) hrs += 24; if(min<0) { min += 60; hrs--; } if(sec<0) { sec += 60; min--; } return[hrs, min, sec, hrs==0&&min==0 ? sec+" sec":min+hrs*60+":"+(sec<10 ? "0":"")+sec+" min"]; } function show_levels_div() { for(let i=0; i

[QnA] Square Game