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;
|
||||
}
|
||||
Reference in New Issue
Block a user