myxelium/Blocks-Game
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added skins to the gameboard

Browse Source
This commit is contained in:
SocksOnHead
2020-03-18 10:20:31 +01:00
parent f45aa57693
commit f5e8d145ad
13 changed files with 199 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/textures/iron_crate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/textures/iron_crate_event.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/textures/portal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
assets/textures/slime-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
assets/textures/slime_crate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
assets/textures/space.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
assets/textures/template.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

64
cards.css
View File

@@ -11,14 +11,20 @@
* { * {
transition: .3s; transition: .3s;
image-rendering: pixelated;
image-rendering: crisp-edges; /*Mozilla*/
} }
.noSelect { .noSelect {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
}
.card-numbers{
position: absolute;
} }
.card { .card {
cursor: pointer; cursor: pointer;
@@ -30,6 +36,7 @@
background-size: cover; background-size: cover;
border-radius: 10px; border-radius: 10px;
margin: 3px; margin: 3px;
} }
.card-row { .card-row {
@@ -46,15 +53,35 @@
} }
#wrapper { #wrapper {
height: 100vh; /* height: 100vh; */
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
max-width: 800px; 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 { .animations {
/* background-color: rgb(80, 0, 146); */ /* background-color: rgb(80, 0, 146); */
filter: invert(1); filter: invert(1);
@@ -71,6 +98,7 @@
body { body {
background-color: #1d1e22; background-color: #1d1e22;
overflow-x: hidden;
} }
#start-the-game { #start-the-game {
@@ -228,7 +256,35 @@ body {
border: 0px solid border: 0px solid
transparent; 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 */ /* slider ends */
@media screen and (max-width: 513px) { @media screen and (max-width: 513px) {
.stats { .stats {

23
index.php
View File

@@ -2,7 +2,7 @@
<head> <head>
<title>Blocks demo</title> <title>Blocks demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="style.css"> --> <!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="cards.css"> <link rel="stylesheet" href="cards.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
@@ -39,7 +39,9 @@
</div> </div>
</div> </div>
<!--- <div loaded="template/window_settings.html"></div> ---> <!--- <div loaded="template/window_settings.html"></div> --->
<div class="cos-portal">
<img id="blackhole" src="assets/textures/portal">
</div>
<div class="flexwrap"> <div class="flexwrap">
<div class="stats"> <div class="stats">
<div id="health"></div> <div id="health"></div>
@@ -80,6 +82,15 @@
Turn on card numbers Turn on card numbers
</div> </div>
</div> </div>
<div class="shownumbers-button">
<div class="button-icon">
<img src="assets/textures/button_off.png" onclick="menu_clicks();check_nofail();document.getElementById('btn-off-fail').style.display = 'none';document.getElementById('btn-on-fail').style.display = 'block';" id="btn-off-fail" alt="off">
<img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck_nofail();document.getElementById('btn-on-fail').style.display = 'none';document.getElementById('btn-off-fail').style.display = 'block';" style="display: none;" id="btn-on-fail" alt="off">
</div>
<div id="button-text-01-fail">
Turn on no fail
</div>
</div>
<div class="shownumbers-button"> <div class="shownumbers-button">
<div class="button-icon"> <div class="button-icon">
<img src="assets/textures/button_off.png" onclick="menu_clicks();check_allowspin();document.getElementById('btn-off-spin').style.display = 'none';document.getElementById('btn-on-spin').style.display = 'block';" style="display: none;" id="btn-off-spin" alt="off"> <img src="assets/textures/button_off.png" onclick="menu_clicks();check_allowspin();document.getElementById('btn-off-spin').style.display = 'none';document.getElementById('btn-on-spin').style.display = 'block';" style="display: none;" id="btn-off-spin" alt="off">
@@ -91,6 +102,7 @@
</div> </div>
<button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button> <button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
</div> </div>
<div class="overlay"> <div class="overlay">
<div class="narrator"> <div class="narrator">
@@ -101,9 +113,16 @@
<script src="scripts/sound.js"></script> <script src="scripts/sound.js"></script>
<script src="scripts/options.js"></script> <script src="scripts/options.js"></script>
<script src="scripts/timer.js"></script> <script src="scripts/timer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<!-- particles.js library --> <!-- particles.js library -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="scripts/particles.js"></script> <script src="scripts/particles.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js"></script>
<script>
jQuery(".card-numbers").fitText();
</script>
</body> </body>
</html> </html>

43
scripts/fittext.js Normal file
View File

@@ -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 );

74
scripts/gameboard.js
View File

@@ -7,6 +7,7 @@ var level = newPlayground * newPlayground;
var difficulty = 1; var difficulty = 1;
var showcontent = false; // show numbers inside the cards var showcontent = false; // show numbers inside the cards
var allow_spin = true; var allow_spin = true;
var nofail = false;
// Game settings end // Game settings end
var allow_click = 0; var allow_click = 0;
var play_array = []; var play_array = [];
@@ -18,6 +19,11 @@ var randoms = 0;
var room_level; var room_level;
var no_fail_round = 0; var no_fail_round = 0;
var round_values = 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 function initiate() { // Call all the functions
setInterval(setTime, 1000); setInterval(setTime, 1000);
@@ -40,9 +46,10 @@ function nextRound() {
console.log(level); console.log(level);
make_playground(); make_playground();
randomized(); randomized();
viewspeed_round_counter();
animation(); animation();
console.log(difficulty); console.log(difficulty);
level_skins();
} }
function prep() { // handles everythiing before the game starts function prep() { // handles everythiing before the game starts
@@ -53,10 +60,18 @@ function round_value() {
round_values++; round_values++;
document.getElementById("round").innerHTML = 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 function animation() { //Animations, shows what cards you click on. Works like a loop. SetTimout cant be used in normal loop
setTimeout(function () { 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++; anim++;
if (play_array.length > anim) { if (play_array.length > anim) {
animation(); 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. function basic_timeout() { // small timeout before you can click and the shown cards disapear.
setTimeout(function () { setTimeout(function () {
$(".card").removeClass('animations'); $(".card").removeClass('animations');
$(".card").removeClass('space');
}, timeout) }, 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 console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id + "\n NewPLaygroud=" + newPlayground*newPlayground); // Console info
calc_difficulty(); calc_difficulty();
newPlayground = newPlayground + 0.1; newPlayground = newPlayground + 0.1;
} }
function spin_round(){ function spin_round(){
if(allow_spin === true){ if(allow_spin === true){
if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){ if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){
document.getElementById("wrapper").style.transform = 'rotate(180deg)'; document.getElementById("wrapper").style.transform = 'rotate(180deg)';
document.getElementById("wrapper").style.height = 'unset'; document.getElementById("wrapper").style.height = 'unset';
let x = document.getElementsByClassName("card"); let x = document.getElementsByClassName("card");
let i; let i;
for (i = 0; i < x.length; i++) { for (i = 0; i < x.length; i++) {
x[i].style.transform = 'rotate(180deg)'; x[i].style.transform = 'rotate(180deg)';
} }
}else{ }else{
document.getElementById("wrapper").style.transform = 'rotate(0deg)'; document.getElementById("wrapper").style.transform = 'rotate(0deg)';
@@ -119,6 +134,18 @@ function spin_round(){
// x[i].style.transform = 'rotate(0deg)'; // 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() { 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 = (20 / 100) * level % 3 + difficulty; //calc the difficulty to scale with the level
difficulty = Math.round(difficulty) // Makes the difficulty value a integer 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() { function make_playground() {
//Loop out cards on the playground //Loop out cards on the playground
@@ -146,8 +198,14 @@ function make_playground() {
div.setAttribute('id', card_ids); 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() 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); document.getElementById('card-row' + y).appendChild(div);
/*Content*/
if (showcontent == true) { 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]); list.removeChild(list.childNodes[0]);
no_fail_round = 1; no_fail_round = 1;
console.log("Liv: " + health); console.log("Liv: " + health);
if (health == 0) { if (health == 0 && nofail === false) {
allow_click = 0; allow_click = 0;
document.getElementById("start-the-game-loose").style.display = "flex"; document.getElementById("start-the-game-loose").style.display = "flex";
// alert("Game over!"); // alert("Game over!");

1
scripts/gameboard.min.js vendored Normal file
View File

@@ -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<health;e++)document.getElementById("health").innerHTML+='<img src="assets/textures/heart.png" alt="health">'}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<t.length;e++)t[e].style.transform="rotate(180deg)"}else document.getElementById("wrapper").style.transform="rotate(0deg)"}function calc_difficulty(){level<=9&&(level=9),difficulty=.2*level%3+difficulty,difficulty=Math.round(difficulty)}function make_playground(){for(var e=0,t=0,n=0;n<newPlayground;n++){var l=document.createElement("div");for(l.setAttribute("id","card-row"+n),l.setAttribute("class","card-row"),document.getElementById("test-group").appendChild(l),e=0;e<newPlayground;e++){t++;var a=document.createElement("div");a.setAttribute("class","card noSelect"),a.setAttribute("id",t),a.setAttribute("onClick","reply_click(this.id)"),document.getElementById("card-row"+n).appendChild(a),1==showcontent&&document.getElementById(t).classList.add("printid")}}}function clear_playground(){document.getElementById("test-group").innerHTML="",clear_values()}function randomized(){for(;play_array.length<difficulty;)0!=(randoms=Math.floor(Math.random()*level))&&-1===play_array.indexOf(randoms)&&play_array.push(randoms)}function reply_click(e){if(e=Number(e),console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+e),play_array.includes(e)){if(1===allow_click&&!avoid_repeat.includes(e)){document.getElementById(e).style.backgroundColor="green",document.getElementById(e).style.backgroundImage="url(assets/textures/crate-green.png)",avoid_repeat.push(e),correct_answers++;let t=document.getElementById("score").textContent;play_array.length===correct_answers&&(document.getElementById("score").innerHTML=0!=no_fail_round?1*parseInt(t)+13:2*parseInt(t)+30,nextRound())}}else if(1===allow_click&&!avoid_repeat.includes(e)){document.getElementById(e).style.backgroundColor="red",document.getElementById(e).style.backgroundImage="url(assets/textures/crate_bad.png)",avoid_repeat.push(e),health--;let n=document.getElementById("health");if(n.removeChild(n.childNodes[0]),no_fail_round=1,console.log("Liv: "+health),0==health){allow_click=0,document.getElementById("start-the-game-loose").style.display="flex",card_ids+=1;for(var t=1;card_ids<=t;t++)play_array.includes(t)?(document.getElementById(t).style.backgroundColor="green",document.getElementById(t).style.backgroundImage="url(assets/textures/crate-green.png)"):(document.getElementById(t).style.backgroundColor="red",document.getElementById(t).style.backgroundImage="url(assets/textures/crate_bad.png)")}}document.getElementById("alerted").innerHTML=e}

10
scripts/options.js
View File

@@ -1,6 +1,4 @@
// gameboard.js required // gameboard.js required
function when_clicked(){ function when_clicked(){
document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)"; document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)";
document.getElementById("start-the-game").style.display = "none"; document.getElementById("start-the-game").style.display = "none";
@@ -19,6 +17,14 @@ function uncheck() {
showcontent = false; showcontent = false;
document.getElementById("button-text-01").innerHTML = "Turn on card numbers"; document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
} }
function check_nofail() {
nofail = true;
document.getElementById("button-text-01-fail").innerHTML = "Turn off no fail";
}
function uncheck_nofail() {
nofail = false;
document.getElementById("button-text-01-fail").innerHTML = "Turn on no fail";
}
function check_allowspin() { function check_allowspin() {
allow_spin = true; allow_spin = true;
document.getElementById("button-text-01-spin").innerHTML = "Disable spinning"; document.getElementById("button-text-01-spin").innerHTML = "Disable spinning";