mirror of
https://github.com/MrEidam/PetPet.git
synced 2026-04-17 15:43:31 +00:00
Big Boy update, wallpaper, sad escape, games, icon
This commit is contained in:
16
Games/2048/index.html
Normal file
16
Games/2048/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="main.js"></script>
|
||||
<title>2048</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>2048</h1>
|
||||
<hr>
|
||||
<h2>Score: <span id="score">0</span></h2>
|
||||
<div id="board"></div>
|
||||
</body>
|
||||
</html>
|
||||
189
Games/2048/main.js
Normal file
189
Games/2048/main.js
Normal file
@@ -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;r<rows;r++){
|
||||
for(let c=0;c<columns;c++){
|
||||
let tile = document.createElement("div");
|
||||
tile.id = r.toString() + "-" + c.toString();
|
||||
let num = board[r][c];
|
||||
updateTile(tile,num);
|
||||
document.getElementById("board").append(tile);
|
||||
}
|
||||
}
|
||||
setTwo();
|
||||
setTwo();
|
||||
}
|
||||
|
||||
function updateTile(tile, num) {
|
||||
tile.innerText="";
|
||||
tile.classList.value=""; //clear the classList
|
||||
tile.classList.add("tile");
|
||||
if(num>0) {
|
||||
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;
|
||||
}
|
||||
85
Games/2048/style.css
Normal file
85
Games/2048/style.css
Normal file
@@ -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;
|
||||
}
|
||||
18
Games/RockPaperScissors/index.html
Normal file
18
Games/RockPaperScissors/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="main.js"></script>
|
||||
<title>Rock Paper Scisors</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="opponent-score">0</h1>
|
||||
<img id="opponent-choice">
|
||||
<br>
|
||||
<img id="your-choice">
|
||||
<div id="choices"></div>
|
||||
<h1 id="your-score">0</h1>
|
||||
</body>
|
||||
</html>
|
||||
55
Games/RockPaperScissors/main.js
Normal file
55
Games/RockPaperScissors/main.js
Normal file
@@ -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;
|
||||
}
|
||||
BIN
Games/RockPaperScissors/paper.png
Normal file
BIN
Games/RockPaperScissors/paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
Games/RockPaperScissors/rock.png
Normal file
BIN
Games/RockPaperScissors/rock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
Games/RockPaperScissors/scissors.png
Normal file
BIN
Games/RockPaperScissors/scissors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
33
Games/RockPaperScissors/style.css
Normal file
33
Games/RockPaperScissors/style.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
img/icon.png
Normal file
BIN
img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
img/mobile.jpg
Normal file
BIN
img/mobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
BIN
img/pc.jpg
Normal file
BIN
img/pc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
img/promoleflt.png
Normal file
BIN
img/promoleflt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
BIN
img/promorighth.png
Normal file
BIN
img/promorighth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 805 KiB |
18
index.html
18
index.html
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="" type="image/x-icon">
|
||||
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
|
||||
|
||||
<title>PetPet</title>
|
||||
</head>
|
||||
@@ -22,21 +22,29 @@
|
||||
<div class="activ">
|
||||
<article class="item">
|
||||
<p>Joy: <span id="joyN"></span></p>
|
||||
<button onclick="play()">Play</button>
|
||||
<button class="actBTN" onclick="play()">Play</button>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Food: <span id="fooN"></span></p>
|
||||
<button onclick="feed()">Feed</button>
|
||||
<button class="actBTN" onclick="feed()">Feed</button>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Clean: <span id="cleN"></span></p>
|
||||
<button onclick="clearBoy()">Clean</button>
|
||||
<button class="actBTN" onclick="clearBoy()">Clean</button>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Health: <span id="heaN"></span></p>
|
||||
<button>Heal</button>
|
||||
<button class="actBTN" onclick="">Heal</button>
|
||||
</article>
|
||||
</div>
|
||||
<div class="games">
|
||||
<img class="gamesPromo" src="./img/promorighth.png" alt="Promo for Games">
|
||||
<div class="gamesText">
|
||||
<h2>Games</h2>
|
||||
<a href="./Games/">Let's go!</a>
|
||||
</div>
|
||||
<img class="gamesPromo" src="./img/promoleflt.png" alt="Promo for Games">
|
||||
</div>
|
||||
</main>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
43
main.js
43
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);
|
||||
}
|
||||
|
||||
71
style.css
71
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user