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