Adding files
uwu
This commit is contained in:
parent
cc2a2deff6
commit
42758678d3
7
assets/texts/main_desc.txt
Normal file
7
assets/texts/main_desc.txt
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
Are you bored ? <br/><br/>
|
||||||
|
If yes you can find many simple games on this webpage. <br/>
|
||||||
|
In section GAMES you have list of all the games. <br/>
|
||||||
|
There are also many different suprises hidden everywhere.<br/>
|
||||||
|
<br/>Here is very, very simple game below. <br/>
|
||||||
|
<br/>
|
||||||
|
- click on the rectangle 100 times
|
||||||
91
backend.js
Normal file
91
backend.js
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
// here we start the program
|
||||||
|
let main_desc_clicked = false;
|
||||||
|
let rect_score = 100;
|
||||||
|
let footer_wow = true;
|
||||||
|
let footer_dbl = false;
|
||||||
|
|
||||||
|
|
||||||
|
// random
|
||||||
|
$(".ni, .outerNi").click(function(){
|
||||||
|
$(this).hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// question mark
|
||||||
|
$(".question_mark_navbar").click(function(){
|
||||||
|
$("*").css("background-color", "#ffffff");
|
||||||
|
});
|
||||||
|
|
||||||
|
// title
|
||||||
|
$("#welcome").mouseenter(function(){
|
||||||
|
if(main_desc_clicked == true){
|
||||||
|
$(header).toggle(200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// main_desc
|
||||||
|
$("#main_desc").load("assets/texts/main_desc.txt");
|
||||||
|
|
||||||
|
$("#main_desc").click(function(){
|
||||||
|
$(this).css("color", "#000539");
|
||||||
|
main_desc_clicked = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// score
|
||||||
|
$(".score").click(function(){
|
||||||
|
rect_score += 1;
|
||||||
|
|
||||||
|
$(this).css("width", "9%");
|
||||||
|
$(this).html(rect_score);
|
||||||
|
});
|
||||||
|
|
||||||
|
// rect
|
||||||
|
$("#rect").click(function(){
|
||||||
|
rect_score -= 1;
|
||||||
|
|
||||||
|
if (rect_score <= 0){
|
||||||
|
rect_score = 0;
|
||||||
|
|
||||||
|
$(".score").css("width", "22%");
|
||||||
|
$(".score").html("Yay you won!");
|
||||||
|
} else {
|
||||||
|
$(".score").css("width", "9%");
|
||||||
|
$(".score").html(rect_score);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// footer
|
||||||
|
$(".footer").on({
|
||||||
|
dblclick : function(){
|
||||||
|
$(this).html("wow");
|
||||||
|
$("section, header").toggle(5000);
|
||||||
|
|
||||||
|
if (footer_dbl == true){
|
||||||
|
$(this).css("font-size", "20px");
|
||||||
|
footer_dbl = false;
|
||||||
|
} else {
|
||||||
|
$(this).css("font-size", "400px");
|
||||||
|
footer_dbl = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer_wow = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
click : function(){
|
||||||
|
if (footer_wow == true){
|
||||||
|
$(this).html("try double click");
|
||||||
|
footer_wow = false;
|
||||||
|
} else {
|
||||||
|
$(this).html("wow");
|
||||||
|
footer_wow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
console.log("Everything is running.");
|
||||||
|
|
||||||
|
});
|
||||||
560
games/engine.js
Normal file
560
games/engine.js
Normal file
@ -0,0 +1,560 @@
|
|||||||
|
// learn imports
|
||||||
|
|
||||||
|
// object for circles inside .game_box
|
||||||
|
class Circle{
|
||||||
|
constructor(x, y, radius, element, speed=1){
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.radius = radius;
|
||||||
|
this.element = element;
|
||||||
|
this.speed = speed;
|
||||||
|
|
||||||
|
// variables for css
|
||||||
|
this.right = -(50 + this.x);
|
||||||
|
this.top = 125 + this.y;
|
||||||
|
|
||||||
|
this.element.css({
|
||||||
|
"right": `${this.right.toString()}px`,
|
||||||
|
"top": `${this.top.toString()}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// for debugging
|
||||||
|
print = function(){
|
||||||
|
console.log(`pos: ${this.x},${this.y} ; rt: ${this.right},${this.top} ; radius: ${this.radius}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// moving
|
||||||
|
move = function(x, y){
|
||||||
|
x *= this.speed;
|
||||||
|
|
||||||
|
this.x += x;
|
||||||
|
this.y += y;
|
||||||
|
|
||||||
|
// variables for css
|
||||||
|
this.right = -(50 + this.x);
|
||||||
|
this.top = 125 + this.y;
|
||||||
|
|
||||||
|
this.element.css({
|
||||||
|
"right": `${this.right.toString()}px`,
|
||||||
|
"top": `${this.top.toString()}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//updating pos
|
||||||
|
update = function(x=this.x, y=this.y){
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
|
||||||
|
// variables for css
|
||||||
|
this.right = -(50 + this.x);
|
||||||
|
this.top = 125 + this.y;
|
||||||
|
|
||||||
|
this.element.css({
|
||||||
|
"right": `${this.right.toString()}px`,
|
||||||
|
"top": `${this.top.toString()}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// collisions
|
||||||
|
collisions = function(Xlimit, other_circle){
|
||||||
|
if(this.x > Xlimit){
|
||||||
|
this.x = -50;
|
||||||
|
|
||||||
|
$(".cgame").css("background-color", "#ffdccc");
|
||||||
|
setTimeout(function(){
|
||||||
|
$(".cgame").css("background-color", "#f2f3fe");
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if collide
|
||||||
|
|
||||||
|
// css bad u go after first circle so u need to add 50 cause visually it starts right after 1. circle
|
||||||
|
if (distance_indicator([this.x, this.y], [other_circle.x + 50, other_circle.y]) < (this.radius + other_circle.radius)){
|
||||||
|
this.x = -50;
|
||||||
|
other_circle.update(other_circle.x, random_integer(250) - 125);
|
||||||
|
|
||||||
|
$(".cgame").css("background-color", "#b0ffb3");
|
||||||
|
setTimeout(function(){
|
||||||
|
$(".cgame").css("background-color", "#f2f3fe");
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function for changing aplitude
|
||||||
|
function change_amplitude(amplitude, dir, step=1){ // limits are set to -1.5 and 1.5
|
||||||
|
if (amplitude >= 120){
|
||||||
|
dir = "down";
|
||||||
|
} else if (amplitude <= -120){
|
||||||
|
dir = "up";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dir == "up"){
|
||||||
|
amplitude += step;
|
||||||
|
} else {
|
||||||
|
amplitude -= step;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [amplitude, dir];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// useful funcs
|
||||||
|
function random_integer(max){
|
||||||
|
let lim = Math.floor(Math.log10(max)) + 1;
|
||||||
|
let random_num = max + 1;
|
||||||
|
|
||||||
|
while (random_num > max){
|
||||||
|
random_num = Math.floor(Math.random() * Math.pow(10, lim));
|
||||||
|
}
|
||||||
|
|
||||||
|
return random_num;
|
||||||
|
}
|
||||||
|
|
||||||
|
function distance_indicator(cords0, cords1){
|
||||||
|
let x_dist = Math.abs(cords0[0] - cords1[0]);
|
||||||
|
let y_dist = Math.abs(cords0[1] - cords1[1]);
|
||||||
|
let dist = Math.sqrt(Math.pow(x_dist, 2) + Math.pow(y_dist, 2));
|
||||||
|
|
||||||
|
return dist;
|
||||||
|
}
|
||||||
|
|
||||||
|
function random_color(){
|
||||||
|
let digits = [];
|
||||||
|
for (let i = 0; i < 10; i++){
|
||||||
|
digits.push(i.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
digits = digits.concat(["a", "b", "c", "d", "e", "f"]);
|
||||||
|
|
||||||
|
let color_tag = "#";
|
||||||
|
|
||||||
|
for (let i = 0; i < 6; i++){
|
||||||
|
color_tag += digits[random_integer(15)];
|
||||||
|
}
|
||||||
|
|
||||||
|
return color_tag;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
// We start the program here
|
||||||
|
let footer_wow = true;
|
||||||
|
let footer_dbl = false;
|
||||||
|
let title_right = 0;
|
||||||
|
let footer_changed = false;
|
||||||
|
let temporary_variable = 0;
|
||||||
|
let digits = [];
|
||||||
|
for (let i = 0; i < 10; i++){
|
||||||
|
digits.push(i.toString());
|
||||||
|
}
|
||||||
|
let wee_count = 0;
|
||||||
|
let pink_titles = false;
|
||||||
|
|
||||||
|
// preparing colors
|
||||||
|
let colors = ["Red", "Lime", "Aqua", "Yellow", "White", "Black", "Violet", "Pink", "Orange"];
|
||||||
|
let colors_score = 0;
|
||||||
|
|
||||||
|
for (color_ of colors){
|
||||||
|
$(".color_options").append(`<p id="X${color_}">${color_}</p>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
let color = colors[random_integer(8)];
|
||||||
|
$(".color_current").html(colors[random_integer(8)]).css("color", color);
|
||||||
|
|
||||||
|
// preparing sin wave game
|
||||||
|
|
||||||
|
temporary_variable = random_integer(83);
|
||||||
|
let angle = 0;
|
||||||
|
let amplitude = 120;
|
||||||
|
let dir = "up";
|
||||||
|
let target_circle = new Circle(700, (temporary_variable * 3) - 125, 25, $("#target_circle"));
|
||||||
|
|
||||||
|
let moving_circle = new Circle(0, 0, 25, $("#moving_circle"));
|
||||||
|
|
||||||
|
$(".amplitude_showerX").css("top", `${125 - (amplitude + 25)}px`);
|
||||||
|
$(".shower").css("top", 125 + (moving_circle.y - 25));
|
||||||
|
|
||||||
|
$("#target_circle").css("top", `${temporary_variable}%`);
|
||||||
|
|
||||||
|
target_circle.update()
|
||||||
|
|
||||||
|
// preparing elements game
|
||||||
|
|
||||||
|
let element_size = [];
|
||||||
|
let win_fade_game = false;
|
||||||
|
|
||||||
|
$(".helloX").hide();
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(".sgame").append(`<p id="X${i}"> </p>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(`#X${i}`).css("background-color", random_color());
|
||||||
|
if (element_size.length < 2){
|
||||||
|
element_size.push($(`#X${i}`).outerWidth(true));
|
||||||
|
element_size.push($(`#X${i}`).outerHeight(true));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Here prep work ends
|
||||||
|
|
||||||
|
// random
|
||||||
|
$(".ni, .outerNi").click(function(){
|
||||||
|
$(this).hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// question mark
|
||||||
|
$(".question_mark_navbar").click(function(){
|
||||||
|
$("*").css("background-color", "#ffffff");
|
||||||
|
});
|
||||||
|
|
||||||
|
// title
|
||||||
|
$(".brrr").click(function(){
|
||||||
|
title_right--;
|
||||||
|
|
||||||
|
if (title_right < -20){
|
||||||
|
title_right = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this).css("right", `${title_right}%`);
|
||||||
|
})
|
||||||
|
|
||||||
|
// current_color
|
||||||
|
$(".color_current").click(function(){
|
||||||
|
$(".color_options, .colors_score").slideToggle(5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// colors score
|
||||||
|
$(".colors_score").click(function(){
|
||||||
|
if (footer_changed == false){
|
||||||
|
$(".footer").css("font-size", "400px");
|
||||||
|
footer_changed = true;
|
||||||
|
} else {
|
||||||
|
$(".footer").css("font-size", "20px");
|
||||||
|
footer_changed = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// first game
|
||||||
|
|
||||||
|
// clicking elements
|
||||||
|
$(".color_options").children("p").click(function(){
|
||||||
|
|
||||||
|
if ($(this).html() != color){
|
||||||
|
$(this).hide(1000);
|
||||||
|
$(".color_options").children("p").css("background-color", "#f2f3fe");
|
||||||
|
const old_score = colors_score;
|
||||||
|
colors_score = 0;
|
||||||
|
|
||||||
|
$(".colors_score").html(`${colors_score} ;${old_score}`).animate({
|
||||||
|
marginLeft: "+=80%"
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
color = colors[random_integer(8)];
|
||||||
|
$(".color_current").html(colors[random_integer(8)]).css("color", color);
|
||||||
|
$(this).css("background-color", colors[random_integer(8)]);
|
||||||
|
colors_score++;
|
||||||
|
$(".colors_score").html(colors_score);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// reseting elements
|
||||||
|
$(".color_options").click(function(){
|
||||||
|
$(this).children().show(2000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// second game
|
||||||
|
|
||||||
|
// game loop
|
||||||
|
|
||||||
|
setInterval(function(){
|
||||||
|
moving_circle.move(1, 0);
|
||||||
|
moving_circle.update(moving_circle.x, Math.cos(angle) * amplitude);
|
||||||
|
$(".shower").css("top", 125 + (moving_circle.y - 25));
|
||||||
|
|
||||||
|
moving_circle.collisions(parseInt($(".game_box").width()) - 150, target_circle);
|
||||||
|
angle += 0.01;
|
||||||
|
|
||||||
|
}, 8);
|
||||||
|
|
||||||
|
// changing amplitude
|
||||||
|
$(".cgame, .amplitude").click(function(){
|
||||||
|
returned_list = change_amplitude(amplitude, dir, 10);
|
||||||
|
amplitude = returned_list[0];
|
||||||
|
dir = returned_list[1];
|
||||||
|
$(".amplitude_showerX").css("top", `${125 - (amplitude + 25)}px`);
|
||||||
|
|
||||||
|
$(".amplitude").html(`Amplitude: ${amplitude}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// second title
|
||||||
|
$(".title2").on({
|
||||||
|
mouseenter: function(){
|
||||||
|
|
||||||
|
$(".cgame").css("background-color", "#000539");
|
||||||
|
|
||||||
|
},
|
||||||
|
mouseleave: function(){
|
||||||
|
$(".cgame").css("background-color", "#f2f3fe");
|
||||||
|
},
|
||||||
|
click: function(){
|
||||||
|
$(this).css("background-color", "#000539");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("body").keypress(function( event ) {
|
||||||
|
if (event.key in digits){
|
||||||
|
if (wee_count < 3){
|
||||||
|
$(".secret").append('<span> WEE </span>');
|
||||||
|
wee_count++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// third game
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(`#X${i}`).on({
|
||||||
|
mouseenter: function(){
|
||||||
|
|
||||||
|
let rni = random_integer(10);
|
||||||
|
|
||||||
|
// 0 3 height, 2 opacity, 4 bg
|
||||||
|
if (rni == 0){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
height: 51
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 1){
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
opacity: 0.2
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 2){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.4);
|
||||||
|
|
||||||
|
} else if (rni == 3){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
height: `${element_size[1]}px`
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 4){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("background-color", random_color());
|
||||||
|
} else if (rni == 5){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("right", parseInt($(`#X${i}`).css("right").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 6){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("top", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 7){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("bottom", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 8){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("left", parseInt($(`#X${i}`).css("left").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 9){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("border-radius", parseInt($(`#X${i}`).css("border-radius").slice(0, -2)) + 6);
|
||||||
|
} else if (rni == 10){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).addClass("box_shadow");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
click: function(){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.15);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(function(){
|
||||||
|
if (win_fade_game == false){
|
||||||
|
let clear = true;
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
if (op > 0.022){
|
||||||
|
clear = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (clear == true){
|
||||||
|
win_fade_game = true;
|
||||||
|
|
||||||
|
$(".sgame").css("background-color", "#b5ffb8").toggle(3000);
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$(".sgame").css("background-color", "#f2f3fe");
|
||||||
|
}, 3000)
|
||||||
|
|
||||||
|
$(".helloX").show(3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
$(".helloX").on({
|
||||||
|
click: function(){
|
||||||
|
$(".sgame").empty();
|
||||||
|
|
||||||
|
win_fade_game = false;
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(".sgame").append(`<p id="X${i}"> </p>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(`#X${i}`).css("background-color", random_color());
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++){
|
||||||
|
$(`#X${i}`).on({
|
||||||
|
mouseenter: function(){
|
||||||
|
|
||||||
|
let rni = random_integer(10);
|
||||||
|
|
||||||
|
// 0 3 height, 2 opacity, 4 bg
|
||||||
|
if (rni == 0){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
height: 51
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 1){
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
opacity: 0.2
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 2){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.4);
|
||||||
|
|
||||||
|
} else if (rni == 3){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).animate({
|
||||||
|
height: `${element_size[1]}px`
|
||||||
|
}, 1500 );
|
||||||
|
} else if (rni == 4){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("background-color", random_color());
|
||||||
|
} else if (rni == 5){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("right", parseInt($(`#X${i}`).css("right").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 6){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("top", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 7){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("bottom", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 8){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("left", parseInt($(`#X${i}`).css("left").slice(0, -2)) + 10);
|
||||||
|
} else if (rni == 9){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).css("border-radius", parseInt($(`#X${i}`).css("border-radius").slice(0, -2)) + 6);
|
||||||
|
} else if (rni == 10){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.1);
|
||||||
|
|
||||||
|
$(`#X${i}`).addClass("box_shadow");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
click: function(){
|
||||||
|
op = $(`#X${i}`).css("opacity");
|
||||||
|
$(`#X${i}`).css("opacity", op -0.15);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".helloX").hide(3000);
|
||||||
|
$(".sgame").show(3000);
|
||||||
|
},
|
||||||
|
dblclick: function(){
|
||||||
|
$(".sgame p, .color_current").addClass("ss");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".title3").click(function(){
|
||||||
|
if (pink_titles){
|
||||||
|
$(".title").toggleClass("title_shadow");
|
||||||
|
$(".title").toggleClass("box_shadow_secret");
|
||||||
|
} else {
|
||||||
|
$(".title").toggleClass("title_shadow");
|
||||||
|
$(".title").toggleClass("box_shadow_secret");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// footer
|
||||||
|
|
||||||
|
// footer
|
||||||
|
$(".footer").on({
|
||||||
|
dblclick : function(){
|
||||||
|
$(this).html("wow");
|
||||||
|
$("section, header").toggle(5000);
|
||||||
|
|
||||||
|
if (footer_dbl == true){
|
||||||
|
$(this).css("font-size", "20px");
|
||||||
|
footer_dbl = false;
|
||||||
|
} else {
|
||||||
|
$(this).css("font-size", "400px");
|
||||||
|
footer_dbl = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer_wow = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
click : function(){
|
||||||
|
if (footer_wow == true){
|
||||||
|
$(this).html("try double click");
|
||||||
|
footer_wow = false;
|
||||||
|
} else {
|
||||||
|
$(this).html("wow");
|
||||||
|
footer_wow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// debug message
|
||||||
|
|
||||||
|
console.log("Everything is running.");
|
||||||
|
|
||||||
|
});
|
||||||
296
games/game-styles.css
Normal file
296
games/game-styles.css
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
|
||||||
|
/*https://dafluffypotato.com/ */
|
||||||
|
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
background-color: #000539;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar_items{
|
||||||
|
padding-right: 3%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-color: #000539;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni{
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #f2f3fe;
|
||||||
|
background-color: #000539;
|
||||||
|
transition: right 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outerNi{
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni:hover{
|
||||||
|
right: -2px;
|
||||||
|
color: #7882f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navbar above */
|
||||||
|
|
||||||
|
.mid{
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right{
|
||||||
|
margin-left: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game{
|
||||||
|
margin-top: 2%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle{
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-color: #7882f5;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title{
|
||||||
|
color: #7882f5;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
padding-left: 2%;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
width: 30%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: -1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_shadow{
|
||||||
|
box-shadow: 0px 3px 4px rgba(73, 73, 80, 0.212);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_options{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
margin: 5%;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_options p{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 0.5%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_current{
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 45px;
|
||||||
|
width: 16%;
|
||||||
|
padding: 3%;
|
||||||
|
background-color: #6673ff;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colors_score{
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
width: 8%;
|
||||||
|
padding: 0.5%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game_box{
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cgame{
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#target_circle{
|
||||||
|
position: relative;
|
||||||
|
right: -80%;
|
||||||
|
background-color: #010a72;
|
||||||
|
}
|
||||||
|
|
||||||
|
#moving_circle{
|
||||||
|
position: relative;
|
||||||
|
right: -50px;
|
||||||
|
top: 125px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amplitude{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 1%;
|
||||||
|
width: 30%;
|
||||||
|
padding: 0.5%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amplitude_shower{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
background-color: #7882f5;
|
||||||
|
width: 50px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret span{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 1%;
|
||||||
|
width: 30%;
|
||||||
|
padding: 0.5%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_shadow_secret{
|
||||||
|
box-shadow: -2px 5px 15px rgb(255, 0, 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sgame{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
height: 850px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sgame p{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
margin: 1%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_shadow{
|
||||||
|
box-shadow: 0px 3px 10px rgba(91, 91, 99, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.element{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 1%;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 0.5%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hover here */
|
||||||
|
|
||||||
|
.color_options:hover, .color_current:hover, .colors_score:hover, .amplitude:hover, .element:hover{
|
||||||
|
right: -1.5%;
|
||||||
|
box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_options p:hover, .game_box:hover, .secret span:hover{
|
||||||
|
right: -0.3%;
|
||||||
|
box-shadow: 0px 3px 6px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sgame p:hover{
|
||||||
|
right: -2%;
|
||||||
|
box-shadow: 0px 3px 6px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:hover{
|
||||||
|
right: -2.5%;
|
||||||
|
box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ss:hover{
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* footer below */
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
color: #5661e0;
|
||||||
|
margin: 0.5%;
|
||||||
|
font-size: 20px;
|
||||||
|
transition: all 5s ease 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer:hover{
|
||||||
|
color: #f2f3fe;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
64
games/games.html
Normal file
64
games/games.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="game-styles.css"/>
|
||||||
|
<title>Boredom Games</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
|
||||||
|
<div class="navbar_items">
|
||||||
|
<p class="ni outerNi"><a class="ni" href="../index.html">HOME</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar_items">
|
||||||
|
<p class="ni outerNi"><a class="ni question_mark_navbar">?</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni">HELLO</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni" href="games.html">GAMES</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni" href="https://tucan444.itch.io/">AUTHOR</a></p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div class="game">
|
||||||
|
<p class="title title_shadow brrr">1. Click by the color of text.</p>
|
||||||
|
|
||||||
|
<div class="colors">
|
||||||
|
<p class="color_current mid"></p>
|
||||||
|
<div class="color_options"></div>
|
||||||
|
<p class="colors_score right">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game">
|
||||||
|
<p class="title title_shadow title2">2. Make the circles collide.</p>
|
||||||
|
|
||||||
|
<p class="amplitude">Amplitude: 120</p>
|
||||||
|
|
||||||
|
<div class="game_box cgame">
|
||||||
|
<span class="amplitude_shower amplitude_showerX"></span>
|
||||||
|
<span class="amplitude_shower shower"></span>
|
||||||
|
<span class="circle" id="moving_circle"></span>
|
||||||
|
<span class="circle" id="target_circle"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="secret"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game">
|
||||||
|
<p class="title title_shadow title3">3. Fade the elements</p>
|
||||||
|
|
||||||
|
<div class="game_box sgame"></div>
|
||||||
|
|
||||||
|
<p class="element helloX">/ Generate new game! /</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="footer">wow</p>
|
||||||
|
</footer>
|
||||||
|
<script src="engine.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
index.html
Normal file
42
index.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||||
|
<title>Boredom Games</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
|
||||||
|
<div class="navbar_items">
|
||||||
|
<p class="ni outerNi"><a class="ni" href="index.html">HOME</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar_items">
|
||||||
|
<p class="ni outerNi"><a class="ni question_mark_navbar">?</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni">HELLO</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni" href="games/games.html">GAMES</a></p>
|
||||||
|
<p class="ni outerNi"><a class="ni" href="https://tucan444.itch.io/">AUTHOR</a></p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div>
|
||||||
|
<p id="welcome">Welcome to Boredom Games</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p id="main_desc"></p>
|
||||||
|
</div>
|
||||||
|
<div class="mid">
|
||||||
|
<div class="mid" id="rect"></div>
|
||||||
|
<p class="score mid">100</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="footer">wow</p>
|
||||||
|
</footer>
|
||||||
|
<script src="backend.js"/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
136
style.css
Normal file
136
style.css
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
|
||||||
|
/*https://dafluffypotato.com/ */
|
||||||
|
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
background-color: #000539;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar_items{
|
||||||
|
padding-right: 3%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-color: #000539;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni{
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #f2f3fe;
|
||||||
|
background-color: #000539;
|
||||||
|
transition: right 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outerNi{
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni:hover{
|
||||||
|
right: -2px;
|
||||||
|
color: #7882f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navbar above */
|
||||||
|
|
||||||
|
#welcome{
|
||||||
|
color: #7882f5;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
padding-left: 2%;
|
||||||
|
width: 30%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_desc{
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30px;
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 2%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
padding-left: 2%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_desc:hover, #welcome:hover{
|
||||||
|
right: -2%;
|
||||||
|
box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mid{
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score{
|
||||||
|
color: #5661e0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
width: 9%;
|
||||||
|
margin-top: 2%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
padding-left: 2%;
|
||||||
|
background-color: #f2f3fe;
|
||||||
|
border-radius: 10px ;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score:hover{
|
||||||
|
right: -0.5%;
|
||||||
|
box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect{
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #ff0000;
|
||||||
|
box-shadow: 0px 3px 10px rgba(40, 39, 51, 0.4);
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect:hover{
|
||||||
|
right: -0.1%;
|
||||||
|
box-shadow: 1px 5px 12px rgba(40, 39, 51, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
color: #5661e0;
|
||||||
|
margin: 0.5%;
|
||||||
|
font-size: 20px;
|
||||||
|
transition: all 5s ease 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer:hover{
|
||||||
|
color: #f2f3fe;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user