diff --git a/Games/2048/index.html b/Games/2048/index.html
new file mode 100644
index 0000000..7cfbad3
--- /dev/null
+++ b/Games/2048/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ 2048
+
+
+ 2048
+
+ Score: 0
+
+
+
\ No newline at end of file
diff --git a/Games/2048/main.js b/Games/2048/main.js
new file mode 100644
index 0000000..571a63d
--- /dev/null
+++ b/Games/2048/main.js
@@ -0,0 +1,189 @@
+var board;
+var score = 0;
+var rows = 4;
+var columns = 4;
+
+window.onload = function() {
+ setGame();
+}
+
+function setGame() {
+
+ board = [
+ [0,0,0,0],
+ [0,0,0,0],
+ [0,0,0,0],
+ [0,0,0,0],
+ ];
+
+ /*board = [
+ [2,2,2,2],
+ [2,2,2,2],
+ [4,4,8,8],
+ [4,4,8,8],
+ ];*/
+
+ for(let r=0;r0) {
+ tile.innerText=num.toString();
+ if(num<=4096) {
+ tile.classList.add("x"+num.toString());
+ }else{
+ tile.classList.add("x8192");
+ }
+ }
+}
+
+document.addEventListener('keyup', (e) => {
+ if (e.code == "ArrowLeft") {
+ slideLeft();
+ setTwo();
+ }
+ else if (e.code == "ArrowRight") {
+ slideRight();
+ setTwo();
+ }
+ else if (e.code == "ArrowUp") {
+ slideUp();
+ setTwo();
+
+ }
+ else if (e.code == "ArrowDown") {
+ slideDown();
+ setTwo();
+ }
+ document.getElementById("score").innerText = score;
+});
+
+function filterZero(row){
+ return row.filter(num => num != 0); //cteare a new array without 0
+}
+
+function slide(row) {
+ //[0, 2, 2, 2]
+ row = filterZero(row); //[2, 2, 2]
+ for (let i = 0; i < row.length-1; i++){
+ if (row[i] == row[i+1]) {
+ row[i] *= 2;
+ row[i+1] = 0;
+ score += row[i];
+ }
+ } //[4, 0, 2]
+ row = filterZero(row); //[4, 2]
+ //add zeroes
+ while (row.length < columns) {
+ row.push(0);
+ } //[4, 2, 0, 0]
+ return row;
+}
+
+
+function slideLeft() {
+ for (let r = 0; r < rows; r++) {
+ let row = board[r];
+ row = slide(row);
+ board[r] = row;
+ for (let c = 0; c < columns; c++){
+ let tile = document.getElementById(r.toString() + "-" + c.toString());
+ let num = board[r][c];
+ updateTile(tile, num);
+ }
+ }
+}
+
+function slideRight() {
+ for (let r = 0; r < rows; r++) {
+ let row = board[r]; //[0, 2, 2, 2]
+ row.reverse(); //[2, 2, 2, 0]
+ row = slide(row) //[4, 2, 0, 0]
+ board[r] = row.reverse(); //[0, 0, 2, 4];
+ for (let c = 0; c < columns; c++){
+ let tile = document.getElementById(r.toString() + "-" + c.toString());
+ let num = board[r][c];
+ updateTile(tile, num);
+ }
+ }
+}
+
+function slideUp() {
+ for (let c = 0; c < columns; c++) {
+ let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
+ row = slide(row);
+ // board[0][c] = row[0];
+ // board[1][c] = row[1];
+ // board[2][c] = row[2];
+ // board[3][c] = row[3];
+ for (let r = 0; r < rows; r++){
+ board[r][c] = row[r];
+ let tile = document.getElementById(r.toString() + "-" + c.toString());
+ let num = board[r][c];
+ updateTile(tile, num);
+ }
+ }
+}
+
+function slideDown() {
+ for (let c = 0; c < columns; c++) {
+ let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
+ row.reverse();
+ row = slide(row);
+ row.reverse();
+ // board[0][c] = row[0];
+ // board[1][c] = row[1];
+ // board[2][c] = row[2];
+ // board[3][c] = row[3];
+ for (let r = 0; r < rows; r++){
+ board[r][c] = row[r];
+ let tile = document.getElementById(r.toString() + "-" + c.toString());
+ let num = board[r][c];
+ updateTile(tile, num);
+ }
+ }
+}
+
+function setTwo() {
+ if (!hasEmptyTile()) {
+ return;
+ }
+ let found = false;
+ while (!found) {
+ //find random row and column to place a 2 in
+ let r = Math.floor(Math.random() * rows);
+ let c = Math.floor(Math.random() * columns);
+ if (board[r][c] == 0) {
+ board[r][c] = 2;
+ let tile = document.getElementById(r.toString() + "-" + c.toString());
+ tile.innerText = "2";
+ tile.classList.add("x2");
+ found = true;
+ }
+ }
+}
+
+function hasEmptyTile() {
+ let count = 0;
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns; c++) {
+ if (board[r][c] == 0) { //at least one zero in the board
+ return true;
+ }
+ }
+ }
+ return false;
+}
\ No newline at end of file
diff --git a/Games/2048/style.css b/Games/2048/style.css
new file mode 100644
index 0000000..fd14e5d
--- /dev/null
+++ b/Games/2048/style.css
@@ -0,0 +1,85 @@
+body{
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+}
+
+hr{
+ width: 500px;
+}
+
+#board{
+ width: 400px;
+ height: 400px;
+
+ background: #cdc1d5;
+ border: 6px solid #bbada0;
+
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.tile{
+ width: 90px;
+ height: 90px;
+ border: 5px solid #bbada0;
+
+ font-size: 40px;
+ font-weight: bold;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.x2{
+ background: #eee4da;
+ color: #757371;
+}
+.x4{
+ background: #ece0ca;
+ color: #757371;
+}
+.x8{
+ background: #f4b17a;
+ color: #fff;
+}
+.x16{
+ background: #f59575;
+ color: #fff;
+}
+.x32{
+ background: #f57c5f;
+ color: #fff;
+}
+.x64{
+ background: #f65d3b;
+ color: #fff;
+}
+.x128{
+ background: #edce71;
+ color: #fff;
+}
+.x256{
+ background: #edcc63;
+ color: #fff;
+}
+.x512{
+ background: #edc651;
+ color: #fff;
+}
+.x1024{
+ background: #eec744;
+ color: #fff;
+}
+.x2048{
+ background: #ecc230;
+ color: #fff;
+}
+.x4096{
+ background: #fe3d3d;
+ color: #fff;
+}
+.x8192{
+ background: #ff2020;
+ color: #fff;
+}
\ No newline at end of file
diff --git a/Games/RockPaperScissors/index.html b/Games/RockPaperScissors/index.html
new file mode 100644
index 0000000..0f42cf7
--- /dev/null
+++ b/Games/RockPaperScissors/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+ Rock Paper Scisors
+
+
+ 0
+ ![]()
+
+ ![]()
+
+ 0
+
+
\ No newline at end of file
diff --git a/Games/RockPaperScissors/main.js b/Games/RockPaperScissors/main.js
new file mode 100644
index 0000000..3b95af1
--- /dev/null
+++ b/Games/RockPaperScissors/main.js
@@ -0,0 +1,55 @@
+let you;
+let playerScore = 0;
+
+let opponent;
+let opponentScore = 0;
+
+const choices = ["rock", "paper", "scissors"];
+
+window.onload = () => {
+ for(let i=0;i<3;i++){
+ let choice = document.createElement("img");
+ choice.id = choices[i];
+ choice.src = `${choices[i]}.png`;
+ choice.addEventListener("click", selectChoice);
+ document.getElementById("choices").append(choice);
+ }
+}
+
+function selectChoice(){
+ you = this.id;
+ document.getElementById("your-choice").src = `${you}.png`;
+
+ opponent = choices[Math.floor(Math.random()*3)];
+ document.getElementById("opponent-choice").src = `${opponent}.png`;
+
+ if(you===opponent){
+ playerScore++;
+ opponentScore-=-1;
+ }else{
+ if(you==="rock"){
+ if(opponent==="paper"){
+ opponentScore++;
+ }
+ if(opponent==="scissors"){
+ playerScore++;
+ }
+ }else if(you === "paper"){
+ if(opponent==="rock"){
+ playerScore++;
+ }
+ if(opponent==="scissors"){
+ opponentScore++;
+ }
+ }else{
+ if(opponent==="rock"){
+ opponentScore++;
+ }
+ if(opponent==="paper"){
+ playerScore++;
+ }
+ }
+ }
+ document.getElementById("opponent-score").innerHTML = opponentScore;
+ document.getElementById("your-score").innerHTML = playerScore;
+}
\ No newline at end of file
diff --git a/Games/RockPaperScissors/paper.png b/Games/RockPaperScissors/paper.png
new file mode 100644
index 0000000..36f2908
Binary files /dev/null and b/Games/RockPaperScissors/paper.png differ
diff --git a/Games/RockPaperScissors/rock.png b/Games/RockPaperScissors/rock.png
new file mode 100644
index 0000000..5bd07af
Binary files /dev/null and b/Games/RockPaperScissors/rock.png differ
diff --git a/Games/RockPaperScissors/scissors.png b/Games/RockPaperScissors/scissors.png
new file mode 100644
index 0000000..c125751
Binary files /dev/null and b/Games/RockPaperScissors/scissors.png differ
diff --git a/Games/RockPaperScissors/style.css b/Games/RockPaperScissors/style.css
new file mode 100644
index 0000000..05011e0
--- /dev/null
+++ b/Games/RockPaperScissors/style.css
@@ -0,0 +1,33 @@
+body{
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+}
+
+img{
+ aspect-ratio: 1/1;
+}
+
+#opponent-choice{
+ width: 240px;
+ height: 240px;
+ /*background: #fcda45;*/
+ margin-top: 10px;
+}
+#your-choice{
+ width: 240px;
+ height: 240px;
+ /*background: #4fdc5e;*/
+ margin-top: 10px;
+}
+#choices{
+ width: 240px;
+ height: 80px;
+ /*background: #f4a478;*/
+ margin: 0 auto;
+ margin-top: 10px;
+}
+
+#choices img{
+ width: 80px;
+ height: 80px;
+}
\ No newline at end of file
diff --git a/img/0.png b/img/0.png
new file mode 100644
index 0000000..6b15753
Binary files /dev/null and b/img/0.png differ
diff --git a/img/1.png b/img/1.png
new file mode 100644
index 0000000..ee9dd0c
Binary files /dev/null and b/img/1.png differ
diff --git a/img/2.png b/img/2.png
new file mode 100644
index 0000000..0d53674
Binary files /dev/null and b/img/2.png differ
diff --git a/img/3.png b/img/3.png
new file mode 100644
index 0000000..5515f93
Binary files /dev/null and b/img/3.png differ
diff --git a/img/4.png b/img/4.png
new file mode 100644
index 0000000..cd06bc0
Binary files /dev/null and b/img/4.png differ
diff --git a/img/5.png b/img/5.png
new file mode 100644
index 0000000..f561fc8
Binary files /dev/null and b/img/5.png differ
diff --git a/img/6.png b/img/6.png
new file mode 100644
index 0000000..4a33870
Binary files /dev/null and b/img/6.png differ
diff --git a/img/7.png b/img/7.png
new file mode 100644
index 0000000..2f2ce22
Binary files /dev/null and b/img/7.png differ
diff --git a/img/icon.png b/img/icon.png
new file mode 100644
index 0000000..98a71a0
Binary files /dev/null and b/img/icon.png differ
diff --git a/img/mobile.jpg b/img/mobile.jpg
new file mode 100644
index 0000000..d48d534
Binary files /dev/null and b/img/mobile.jpg differ
diff --git a/img/pc.jpg b/img/pc.jpg
new file mode 100644
index 0000000..e2e2b89
Binary files /dev/null and b/img/pc.jpg differ
diff --git a/img/promoleflt.png b/img/promoleflt.png
new file mode 100644
index 0000000..8517c21
Binary files /dev/null and b/img/promoleflt.png differ
diff --git a/img/promorighth.png b/img/promorighth.png
new file mode 100644
index 0000000..55cd63f
Binary files /dev/null and b/img/promorighth.png differ
diff --git a/index.html b/index.html
index c4c9be1..951f89b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
+
PetPet
@@ -22,21 +22,29 @@
Joy:
-
+
Food:
-
+
Clean:
-
+
Health:
-
+
+
+
+
+
+
diff --git a/main.js b/main.js
index 102d4cc..5db9f66 100644
--- a/main.js
+++ b/main.js
@@ -29,6 +29,7 @@ let attributes = {
value: 10,
max: 306,
min: -100,
+ abszero: 3.06,
},
Hunger: {
value: 30,
@@ -55,6 +56,10 @@ let attributes = {
max: 100,
min: -100,
}*/
+ Life: {
+ dead: 0,
+ away: 0,
+ }
}
window.addEventListener('load',() => {
@@ -107,10 +112,16 @@ function display(){
Aimg.src = imgTiger.Normal.tiger[3];
}else{
NameC.innerHTML = `Dead`
+ attributes.Life.dead = 1;
+ btnHide();
Aimg.src = imgTiger.Dead;
}
- if(attributes.Hp.value<=0) Aimg.src = imgTiger.Dead;
+ if(attributes.Hp.value<=0){
+ attributes.Life.dead = 1;
+ btnHide();
+ Aimg.src = imgTiger.Dead;
+ }
}
function play(){
@@ -154,18 +165,40 @@ function hapiHeal(){
}
}
-function time(){
- setTimeout (() => {
+function btnHide(){
+ const actBTN = document.querySelectorAll('.actBTN');
+ actBTN.forEach((e) => {
+ e.style.display='none';
+ });
+}
+
+function sadDetection(){
+ if(attributes.Joy.value <= attributes.Joy.abszero){
+ if(Math.abs(attributes.Joy.value) >= Math.floor(Math.random()*100)){
+ attributes.Life.away = 1;
+ btnHide();
+ }
+ }
+}
+
+function addStuff(){
+ if(!attributes.Life.away && !attributes.Life.dead){
if(attributes.Hunger.value>0) attributes.Hunger.value -= 3;
if(attributes.Clean.value>0) attributes.Clean.value--;
if(attributes.Joy.value>-100) attributes.Joy.value--;
if(attributes.Hp.value>0) attributes.Age.value = (attributes.Age.value*10 + 1)/10;
if((attributes.Hunger.value<=0)&&(attributes.Hp.value!=0)) attributes.Hp.value -= 2
+ }
+}
+function time(){
+ setTimeout (() => {
+ addStuff();
hapiHeal();
+ sadDetection();
+
+
display();
-
-
time();
},1000);
}
diff --git a/style.css b/style.css
index 31cd213..1ccc43a 100644
--- a/style.css
+++ b/style.css
@@ -9,14 +9,32 @@ body{
flex-direction: column;
justify-content: center;
align-items: center;
- min-height: 100vh;
- background: #333;
+ min-height: 100vh;/*
+ background: #333;*/
+ background-image: url("./img/pc.jpg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
color: #fff;
}
+
+img{
+ aspect-ratio: 1/1;
+ object-fit: contain;
+}
+
+main{
+ /*clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);*/
+ background: #333333aa;
+ padding: 1rem;
+ border-radius: 20px;
+}
+
#anim{
width: 200px;
- aspect-ratio: 1/1;
+ margin-top: 1rem;
}
+
.activ{
margin-top: 1rem;
display: flex;
@@ -25,22 +43,56 @@ body{
justify-content: center;
align-items: center;
}
+
.item{
/*border: red solid 2px;*/
border-radius: .5rem;
display: flex;
flex-direction: column;
+ justify-content: space-around;
padding: 1rem;
margin: .5rem;
gap: 10px;
background: #222222cc;
height: 100px;
width: 100px;
+}
+span p{
+ font-size: 20px;
+ /*-webkit-text-stroke: 0.5px #999999cc;*/
+ text-decoration: solid;
+ filter: drop-shadow(1.5px 1.5px 6px #aaa);
}
-main{
- /*clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);*/
+
+.games{
+ border-radius: .5rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ padding: 1rem;
+ margin: .5rem;
+ background: #222222cc;
+ height: 80px;
}
+.gamesPromo{
+ width: 69px; /* Mobile */
+ height: 48px;
+}
+.gamesText{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.gamesText a{
+ color: red;
+}
+
+
+.actBTN{
+ display: block;
+}
+
.Lime{color: lime;}.Yellow{color: yellow;}.Orange{color: orange;}.Red{color: red;}.DarkRed{color: darkred;}
.cash{
@@ -58,4 +110,13 @@ main{
.cash img{
margin-right: .5rem;
+}
+
+@media screen and (max-width: 500px){
+ body{
+ background-image: url("./img/mobile.jpg");
+ }
+ main{
+ border-radius: 0;
+ }
}
\ No newline at end of file