diff --git a/assets/textures/iron_crate.png b/assets/textures/iron_crate.png new file mode 100644 index 0000000..9091a5e Binary files /dev/null and b/assets/textures/iron_crate.png differ diff --git a/assets/textures/iron_crate_event.png b/assets/textures/iron_crate_event.png new file mode 100644 index 0000000..b74f06a Binary files /dev/null and b/assets/textures/iron_crate_event.png differ diff --git a/assets/textures/portal.png b/assets/textures/portal.png new file mode 100644 index 0000000..986576d Binary files /dev/null and b/assets/textures/portal.png differ diff --git a/assets/textures/slime-placeholder.png b/assets/textures/slime-placeholder.png new file mode 100644 index 0000000..0163559 Binary files /dev/null and b/assets/textures/slime-placeholder.png differ diff --git a/assets/textures/slime_crate.png b/assets/textures/slime_crate.png new file mode 100644 index 0000000..d564578 Binary files /dev/null and b/assets/textures/slime_crate.png differ diff --git a/assets/textures/space.png b/assets/textures/space.png new file mode 100644 index 0000000..ea38460 Binary files /dev/null and b/assets/textures/space.png differ diff --git a/assets/textures/template.png b/assets/textures/template.png new file mode 100644 index 0000000..b21b60f Binary files /dev/null and b/assets/textures/template.png differ diff --git a/cards.css b/cards.css index 94a124a..c4934b6 100644 --- a/cards.css +++ b/cards.css @@ -11,14 +11,20 @@ * { transition: .3s; + image-rendering: pixelated; + image-rendering: crisp-edges; /*Mozilla*/ } + .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; - user-select: none; + user-select: none; +} +.card-numbers{ + position: absolute; } .card { cursor: pointer; @@ -30,6 +36,7 @@ background-size: cover; border-radius: 10px; margin: 3px; + } .card-row { @@ -46,15 +53,35 @@ } #wrapper { - height: 100vh; + /* height: 100vh; */ position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 800px; + +} +.space { + /* background-color: rgb(80, 0, 146); */ + background-image: url(assets/textures/iron_crate_event.png) !important; +} +.cos-portal{ + width: 100%; + display: flex; + height: 100%; + align-items: center; + top: 0px; + justify-content: center; + position: fixed; + display: none; + transition: 10s !important; + -webkit-animation: rotating 20s linear infinite; + -moz-animation: rotating 20s linear infinite; + -ms-animation: rotating 20s linear infinite; + -o-animation: rotating 20s linear infinite; + animation: rotating 20s linear infinite; } - .animations { /* background-color: rgb(80, 0, 146); */ filter: invert(1); @@ -71,6 +98,7 @@ body { background-color: #1d1e22; + overflow-x: hidden; } #start-the-game { @@ -228,7 +256,35 @@ body { border: 0px solid transparent; } - + /*rotatating blakc hole animations*/ + @-webkit-keyframes rotating /* Safari and Chrome */ { + from { + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes rotating { + from { + -ms-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } + } /* slider ends */ @media screen and (max-width: 513px) { .stats { diff --git a/index.php b/index.php index 404a114..26459fe 100644 --- a/index.php +++ b/index.php @@ -2,7 +2,7 @@ Blocks demo - + @@ -39,7 +39,9 @@ - +
+ +
@@ -80,6 +82,15 @@ Turn on card numbers
+
+
+ off + +
+
+ Turn on no fail +
+
@@ -91,6 +102,7 @@
+
@@ -101,9 +113,16 @@ + + + + + \ No newline at end of file diff --git a/scripts/fittext.js b/scripts/fittext.js new file mode 100644 index 0000000..143f6ab --- /dev/null +++ b/scripts/fittext.js @@ -0,0 +1,43 @@ +/*global jQuery */ +/*! +* FitText.js 1.2 +* +* Copyright 2011, Dave Rupert http://daverupert.com +* Released under the WTFPL license +* http://sam.zoy.org/wtfpl/ +* +* Date: Thu May 05 14:23:00 2011 -0600 +*/ + +(function( $ ){ + + $.fn.fitText = function( kompressor, options ) { + + // Setup options + var compressor = kompressor || 1, + settings = $.extend({ + 'minFontSize' : Number.NEGATIVE_INFINITY, + 'maxFontSize' : Number.POSITIVE_INFINITY + }, options); + + return this.each(function(){ + + // Store the object + var $this = $(this); + + // Resizer() resizes items based on the object width divided by the compressor * 10 + var resizer = function () { + $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + }; + + // Call once to set. + resizer(); + + // Call on resize. Opera debounces their resize by default. + $(window).on('resize.fittext orientationchange.fittext', resizer); + + }); + + }; + +})( jQuery ); \ No newline at end of file diff --git a/scripts/gameboard.js b/scripts/gameboard.js index 21c40f2..24b1c43 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -7,6 +7,7 @@ var level = newPlayground * newPlayground; var difficulty = 1; var showcontent = false; // show numbers inside the cards var allow_spin = true; +var nofail = false; // Game settings end var allow_click = 0; var play_array = []; @@ -18,6 +19,11 @@ var randoms = 0; var room_level; var no_fail_round = 0; var round_values = 0; +var translation = 1; // Spinning speed +// level transformations +var break_point_level_space = 10; +var break_point_level_slime = 20; +var blackhole_size = 10; function initiate() { // Call all the functions setInterval(setTime, 1000); @@ -40,9 +46,10 @@ function nextRound() { console.log(level); make_playground(); randomized(); + viewspeed_round_counter(); animation(); - console.log(difficulty); + level_skins(); } function prep() { // handles everythiing before the game starts @@ -53,10 +60,18 @@ function round_value() { round_values++; document.getElementById("round").innerHTML = round_values; } - +function viewspeed_round_counter(){ + if(viewspeed > 10){ + viewspeed = viewspeed - 20; + } +} function animation() { //Animations, shows what cards you click on. Works like a loop. SetTimout cant be used in normal loop setTimeout(function () { - $("#" + play_array[anim]).addClass('animations') + if(round_values > break_point_level_space){ + $("#" + play_array[anim]).addClass('space') + } else { + $("#" + play_array[anim]).addClass('animations') + } anim++; if (play_array.length > anim) { animation(); @@ -71,6 +86,7 @@ function animation() { //Animations, shows what cards you click on. Works like a function basic_timeout() { // small timeout before you can click and the shown cards disapear. setTimeout(function () { $(".card").removeClass('animations'); + $(".card").removeClass('space'); }, timeout) } @@ -98,18 +114,17 @@ function clear_values() { // Resets the values for next round. console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id + "\n NewPLaygroud=" + newPlayground*newPlayground); // Console info calc_difficulty(); newPlayground = newPlayground + 0.1; + } function spin_round(){ if(allow_spin === true){ if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){ document.getElementById("wrapper").style.transform = 'rotate(180deg)'; - document.getElementById("wrapper").style.height = 'unset'; let x = document.getElementsByClassName("card"); let i; for (i = 0; i < x.length; i++) { - x[i].style.transform = 'rotate(180deg)'; - + x[i].style.transform = 'rotate(180deg)'; } }else{ document.getElementById("wrapper").style.transform = 'rotate(0deg)'; @@ -119,6 +134,18 @@ function spin_round(){ // x[i].style.transform = 'rotate(0deg)'; // } } + if(round_values >= 15 && 29 >= round_values){ + if(tranlsation != 0.3){ + translation = translation - 0.1; + } + document.getElementById("wrapper").style.transform = 'scale(-1)'; + document.getElementById("wrapper").style.transition = translation + 's'; + let x = document.getElementsByClassName("card"); + let i; + for (i = 0; i < x.length; i++) { + x[i].style.transform = 'rotate(180deg)'; + } + } } } function calc_difficulty() { @@ -129,6 +156,31 @@ function calc_difficulty() { difficulty = (20 / 100) * level % 3 + difficulty; //calc the difficulty to scale with the level difficulty = Math.round(difficulty) // Makes the difficulty value a integer } +function level_skins(){ + + if(round_values > break_point_level_space){ + blackhole_size = blackhole_size + 10; + document.getElementsByClassName("cos-portal")[0].style.display = "flex"; + document.getElementById("blackhole").style.width = blackhole_size + "%"; + let i; + let x = document.getElementsByClassName("card"); + for (i = 0; i < x.length; i++) { + document.getElementsByClassName("card")[i].style.backgroundImage = "url(assets/textures/iron_crate.png)"; + + } + document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/space.png)"; + } + if(round_values > break_point_level_slime){ + let i; + document.getElementsByClassName("cos-portal")[0].style.display = "none"; + let x = document.getElementsByClassName("card"); + for (i = 0; i < x.length; i++) { + document.getElementsByClassName("card")[i].style.backgroundImage = "url(assets/textures/slime_crate.png)"; + + } + document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/slime-placeholder.png)"; + } +} function make_playground() { //Loop out cards on the playground @@ -146,8 +198,14 @@ function make_playground() { div.setAttribute('id', card_ids); div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click() document.getElementById('card-row' + y).appendChild(div); + /*Content*/ if (showcontent == true) { - document.getElementById(card_ids).classList.add("printid"); + let content = document.createElement('div'); + content.appendChild(document.createTextNode(card_ids)); + content.setAttribute('class', 'card-numbers'); + document.getElementById(card_ids).appendChild(content); + + // document.getElementById(card_ids).classList.add("printid"); } } } @@ -209,7 +267,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car list.removeChild(list.childNodes[0]); no_fail_round = 1; console.log("Liv: " + health); - if (health == 0) { + if (health == 0 && nofail === false) { allow_click = 0; document.getElementById("start-the-game-loose").style.display = "flex"; // alert("Game over!"); diff --git a/scripts/gameboard.min.js b/scripts/gameboard.min.js new file mode 100644 index 0000000..e35de3e --- /dev/null +++ b/scripts/gameboard.min.js @@ -0,0 +1 @@ +var room_level,viewspeed=500,timeout=500,health=5,newPlayground=3,level=newPlayground*newPlayground,difficulty=1,showcontent=!1,allow_spin=!0,allow_click=0,play_array=[],anim=0,y=1,correct_answers=0,avoid_repeat=[],randoms=0,no_fail_round=0,round_values=0;function initiate(){setInterval(setTime,1e3),round_value(),lifes(),prep(),calc_difficulty(),console.log(level),make_playground(),randomized(),animation(),console.log(difficulty)}function nextRound(){round_value(),clear_playground(),clear_values(),calc_difficulty(),console.log(level),make_playground(),randomized(),animation(),console.log(difficulty)}function prep(){document.getElementById("start-the-game").style.visibility="hidden"}function round_value(){round_values++,document.getElementById("round").innerHTML=round_values}function animation(){setTimeout(function(){$("#"+play_array[anim]).addClass("animations"),anim++,play_array.length>anim?animation():(basic_timeout(),allow_click=1,spin_round())},viewspeed)}function basic_timeout(){setTimeout(function(){$(".card").removeClass("animations")},timeout)}function lifes(){for(let e=0;e'}function clear_values(){no_fail_round=0,difficulty=1,level=Math.ceil(newPlayground*newPlayground),play_array=[],randoms=0,i=0,card_ids=0,y=0,anim=0,clicked_id=0,allow_click=0,avoid_repeat=[],correct_answers=0,console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id+"\n NewPLaygroud="+newPlayground*newPlayground),calc_difficulty(),newPlayground+=.1}function spin_round(){if(!0===allow_spin)if(round_values>=7&&9>=round_values||round_values>=12&&round_values%3){document.getElementById("wrapper").style.transform="rotate(180deg)",document.getElementById("wrapper").style.height="unset";let e,t=document.getElementsByClassName("card");for(e=0;e