Added new files
This commit is contained in:
636
oldprojects/first_website/easter.html
Normal file → Executable file
636
oldprojects/first_website/easter.html
Normal file → Executable file
@@ -1,318 +1,318 @@
|
||||
<!doctype html>
|
||||
<!--Snake Code By WebDevTrick (https://webdevtrick.com)-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>You found the hidden snake game!</title>
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
body {
|
||||
background-image: url('backgroumd.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 5px solid #009BFF;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<audio autoplay id="my-audio" src="hl2.mp3" type="audio/mp3"></audio>
|
||||
|
||||
<div class="controls">
|
||||
<button id="play-pause-button" class="play-pause-button">Play</button>
|
||||
<input id="volume-slider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const audio = document.getElementById("my-audio");
|
||||
const playPauseButton = document.getElementById("play-pause-button");
|
||||
const volumeSlider = document.getElementById("volume-slider");
|
||||
|
||||
playPauseButton.addEventListener("click", function() {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
playPauseButton.textContent = "Pause";
|
||||
} else {
|
||||
audio.pause();
|
||||
playPauseButton.textContent = "Play";
|
||||
}
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener("input", function() {
|
||||
audio.volume = volumeSlider.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<center><h1 class="gradient-text">You found the hidden easter egg congrats🥳</h1>
|
||||
<script>
|
||||
var audio = new Audio('hl2.mp3');
|
||||
audio.play();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
var
|
||||
COLS = 26,
|
||||
ROWS = 26,
|
||||
EMPTY = 0,
|
||||
SNAKE = 1,
|
||||
FRUIT = 2,
|
||||
LEFT = 0,
|
||||
UP = 1,
|
||||
RIGHT = 2,
|
||||
DOWN = 3,
|
||||
KEY_LEFT = 37,
|
||||
KEY_UP = 38,
|
||||
KEY_RIGHT = 39,
|
||||
KEY_DOWN = 40,
|
||||
canvas,
|
||||
ctx,
|
||||
keystate,
|
||||
frames,
|
||||
score;
|
||||
|
||||
grid = {
|
||||
|
||||
width: null,
|
||||
height: null,
|
||||
_grid: null,
|
||||
|
||||
|
||||
init: function(d, c, r) {
|
||||
this.width = c;
|
||||
this.height = r;
|
||||
|
||||
this._grid = [];
|
||||
for (var x=0; x < c; x++) {
|
||||
this._grid.push([]);
|
||||
for (var y=0; y < r; y++) {
|
||||
this._grid[x].push(d);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
set: function(val, x, y) {
|
||||
this._grid[x][y] = val;
|
||||
},
|
||||
|
||||
|
||||
get: function(x, y) {
|
||||
return this._grid[x][y];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
snake = {
|
||||
|
||||
direction: null,
|
||||
last: null,
|
||||
_queue: null,
|
||||
|
||||
|
||||
init: function(d, x, y) {
|
||||
this.direction = d;
|
||||
|
||||
this._queue = [];
|
||||
this.insert(x, y);
|
||||
},
|
||||
|
||||
|
||||
insert: function(x, y) {
|
||||
|
||||
this._queue.unshift({x:x, y:y});
|
||||
this.last = this._queue[0];
|
||||
},
|
||||
|
||||
|
||||
remove: function() {
|
||||
|
||||
return this._queue.pop();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function setFood() {
|
||||
var empty = [];
|
||||
|
||||
for (var x=0; x < grid.width; x++) {
|
||||
for (var y=0; y < grid.height; y++) {
|
||||
if (grid.get(x, y) === EMPTY) {
|
||||
empty.push({x:x, y:y});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
|
||||
grid.set(FRUIT, randpos.x, randpos.y);
|
||||
}
|
||||
|
||||
|
||||
function main() {
|
||||
|
||||
canvas = document.createElement("canvas");
|
||||
canvas.width = COLS*20;
|
||||
canvas.height = ROWS*20;
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
|
||||
ctx.font = "12px Helvetica";
|
||||
|
||||
frames = 0;
|
||||
keystate = {};
|
||||
|
||||
document.addEventListener("keydown", function(evt) {
|
||||
keystate[evt.keyCode] = true;
|
||||
});
|
||||
document.addEventListener("keyup", function(evt) {
|
||||
delete keystate[evt.keyCode];
|
||||
});
|
||||
|
||||
|
||||
init();
|
||||
loop();
|
||||
}
|
||||
|
||||
|
||||
function init() {
|
||||
score = 0;
|
||||
|
||||
grid.init(EMPTY, COLS, ROWS);
|
||||
|
||||
var sp = {x:Math.floor(COLS/2), y:ROWS-1};
|
||||
snake.init(UP, sp.x, sp.y);
|
||||
grid.set(SNAKE, sp.x, sp.y);
|
||||
|
||||
setFood();
|
||||
}
|
||||
|
||||
|
||||
function loop() {
|
||||
update();
|
||||
draw();
|
||||
|
||||
window.requestAnimationFrame(loop, canvas);
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
frames++;
|
||||
|
||||
|
||||
if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
|
||||
snake.direction = LEFT;
|
||||
}
|
||||
if (keystate[KEY_UP] && snake.direction !== DOWN) {
|
||||
snake.direction = UP;
|
||||
}
|
||||
if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
|
||||
snake.direction = RIGHT;
|
||||
}
|
||||
if (keystate[KEY_DOWN] && snake.direction !== UP) {
|
||||
snake.direction = DOWN;
|
||||
}
|
||||
|
||||
|
||||
if (frames%7 === 0) {
|
||||
|
||||
var nx = snake.last.x;
|
||||
var ny = snake.last.y;
|
||||
|
||||
|
||||
switch (snake.direction) {
|
||||
case LEFT:
|
||||
nx--;
|
||||
break;
|
||||
case UP:
|
||||
ny--;
|
||||
break;
|
||||
case RIGHT:
|
||||
nx++;
|
||||
break;
|
||||
case DOWN:
|
||||
ny++;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
if (0 > nx || nx > grid.width-1 ||
|
||||
0 > ny || ny > grid.height-1 ||
|
||||
grid.get(nx, ny) === SNAKE
|
||||
) {
|
||||
return init();
|
||||
}
|
||||
|
||||
if (grid.get(nx, ny) === FRUIT) {
|
||||
|
||||
score++;
|
||||
setFood();
|
||||
} else {
|
||||
|
||||
var tail = snake.remove();
|
||||
grid.set(EMPTY, tail.x, tail.y);
|
||||
}
|
||||
|
||||
grid.set(SNAKE, nx, ny);
|
||||
snake.insert(nx, ny);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
var tw = canvas.width/grid.width;
|
||||
var th = canvas.height/grid.height;
|
||||
|
||||
for (var x=0; x < grid.width; x++) {
|
||||
for (var y=0; y < grid.height; y++) {
|
||||
|
||||
switch (grid.get(x, y)) {
|
||||
case EMPTY:
|
||||
ctx.fillStyle = "#fff";
|
||||
break;
|
||||
case SNAKE:
|
||||
ctx.fillStyle = "#333";
|
||||
break;
|
||||
case FRUIT:
|
||||
ctx.fillStyle = "#009BFF";
|
||||
break;
|
||||
}
|
||||
ctx.fillRect(x*tw, y*th, tw, th);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fillText("SCORE: " + score, 10, canvas.height-10);
|
||||
}
|
||||
|
||||
|
||||
main();
|
||||
</script>
|
||||
<h2 class="gradient-text"><a href="index.html">Wanna go back to the main menu? Don't blame you. Click this text to go back.</a></h2>
|
||||
<h2>Btw this snake game is taken from https://webdevtrick.com so yeah </h2>
|
||||
|
||||
<footer class="site-footer">
|
||||
<ul class="footer-links">
|
||||
<li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
|
||||
<li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
|
||||
<li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
|
||||
<li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
|
||||
<li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
|
||||
<li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<!--Snake Code By WebDevTrick (https://webdevtrick.com)-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>You found the hidden snake game!</title>
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
body {
|
||||
background-image: url('backgroumd.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 5px solid #009BFF;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<audio autoplay id="my-audio" src="hl2.mp3" type="audio/mp3"></audio>
|
||||
|
||||
<div class="controls">
|
||||
<button id="play-pause-button" class="play-pause-button">Play</button>
|
||||
<input id="volume-slider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const audio = document.getElementById("my-audio");
|
||||
const playPauseButton = document.getElementById("play-pause-button");
|
||||
const volumeSlider = document.getElementById("volume-slider");
|
||||
|
||||
playPauseButton.addEventListener("click", function() {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
playPauseButton.textContent = "Pause";
|
||||
} else {
|
||||
audio.pause();
|
||||
playPauseButton.textContent = "Play";
|
||||
}
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener("input", function() {
|
||||
audio.volume = volumeSlider.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<center><h1 class="gradient-text">You found the hidden easter egg congrats🥳</h1>
|
||||
<script>
|
||||
var audio = new Audio('hl2.mp3');
|
||||
audio.play();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
var
|
||||
COLS = 26,
|
||||
ROWS = 26,
|
||||
EMPTY = 0,
|
||||
SNAKE = 1,
|
||||
FRUIT = 2,
|
||||
LEFT = 0,
|
||||
UP = 1,
|
||||
RIGHT = 2,
|
||||
DOWN = 3,
|
||||
KEY_LEFT = 37,
|
||||
KEY_UP = 38,
|
||||
KEY_RIGHT = 39,
|
||||
KEY_DOWN = 40,
|
||||
canvas,
|
||||
ctx,
|
||||
keystate,
|
||||
frames,
|
||||
score;
|
||||
|
||||
grid = {
|
||||
|
||||
width: null,
|
||||
height: null,
|
||||
_grid: null,
|
||||
|
||||
|
||||
init: function(d, c, r) {
|
||||
this.width = c;
|
||||
this.height = r;
|
||||
|
||||
this._grid = [];
|
||||
for (var x=0; x < c; x++) {
|
||||
this._grid.push([]);
|
||||
for (var y=0; y < r; y++) {
|
||||
this._grid[x].push(d);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
set: function(val, x, y) {
|
||||
this._grid[x][y] = val;
|
||||
},
|
||||
|
||||
|
||||
get: function(x, y) {
|
||||
return this._grid[x][y];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
snake = {
|
||||
|
||||
direction: null,
|
||||
last: null,
|
||||
_queue: null,
|
||||
|
||||
|
||||
init: function(d, x, y) {
|
||||
this.direction = d;
|
||||
|
||||
this._queue = [];
|
||||
this.insert(x, y);
|
||||
},
|
||||
|
||||
|
||||
insert: function(x, y) {
|
||||
|
||||
this._queue.unshift({x:x, y:y});
|
||||
this.last = this._queue[0];
|
||||
},
|
||||
|
||||
|
||||
remove: function() {
|
||||
|
||||
return this._queue.pop();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function setFood() {
|
||||
var empty = [];
|
||||
|
||||
for (var x=0; x < grid.width; x++) {
|
||||
for (var y=0; y < grid.height; y++) {
|
||||
if (grid.get(x, y) === EMPTY) {
|
||||
empty.push({x:x, y:y});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
|
||||
grid.set(FRUIT, randpos.x, randpos.y);
|
||||
}
|
||||
|
||||
|
||||
function main() {
|
||||
|
||||
canvas = document.createElement("canvas");
|
||||
canvas.width = COLS*20;
|
||||
canvas.height = ROWS*20;
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
|
||||
ctx.font = "12px Helvetica";
|
||||
|
||||
frames = 0;
|
||||
keystate = {};
|
||||
|
||||
document.addEventListener("keydown", function(evt) {
|
||||
keystate[evt.keyCode] = true;
|
||||
});
|
||||
document.addEventListener("keyup", function(evt) {
|
||||
delete keystate[evt.keyCode];
|
||||
});
|
||||
|
||||
|
||||
init();
|
||||
loop();
|
||||
}
|
||||
|
||||
|
||||
function init() {
|
||||
score = 0;
|
||||
|
||||
grid.init(EMPTY, COLS, ROWS);
|
||||
|
||||
var sp = {x:Math.floor(COLS/2), y:ROWS-1};
|
||||
snake.init(UP, sp.x, sp.y);
|
||||
grid.set(SNAKE, sp.x, sp.y);
|
||||
|
||||
setFood();
|
||||
}
|
||||
|
||||
|
||||
function loop() {
|
||||
update();
|
||||
draw();
|
||||
|
||||
window.requestAnimationFrame(loop, canvas);
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
frames++;
|
||||
|
||||
|
||||
if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
|
||||
snake.direction = LEFT;
|
||||
}
|
||||
if (keystate[KEY_UP] && snake.direction !== DOWN) {
|
||||
snake.direction = UP;
|
||||
}
|
||||
if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
|
||||
snake.direction = RIGHT;
|
||||
}
|
||||
if (keystate[KEY_DOWN] && snake.direction !== UP) {
|
||||
snake.direction = DOWN;
|
||||
}
|
||||
|
||||
|
||||
if (frames%7 === 0) {
|
||||
|
||||
var nx = snake.last.x;
|
||||
var ny = snake.last.y;
|
||||
|
||||
|
||||
switch (snake.direction) {
|
||||
case LEFT:
|
||||
nx--;
|
||||
break;
|
||||
case UP:
|
||||
ny--;
|
||||
break;
|
||||
case RIGHT:
|
||||
nx++;
|
||||
break;
|
||||
case DOWN:
|
||||
ny++;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
if (0 > nx || nx > grid.width-1 ||
|
||||
0 > ny || ny > grid.height-1 ||
|
||||
grid.get(nx, ny) === SNAKE
|
||||
) {
|
||||
return init();
|
||||
}
|
||||
|
||||
if (grid.get(nx, ny) === FRUIT) {
|
||||
|
||||
score++;
|
||||
setFood();
|
||||
} else {
|
||||
|
||||
var tail = snake.remove();
|
||||
grid.set(EMPTY, tail.x, tail.y);
|
||||
}
|
||||
|
||||
grid.set(SNAKE, nx, ny);
|
||||
snake.insert(nx, ny);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
var tw = canvas.width/grid.width;
|
||||
var th = canvas.height/grid.height;
|
||||
|
||||
for (var x=0; x < grid.width; x++) {
|
||||
for (var y=0; y < grid.height; y++) {
|
||||
|
||||
switch (grid.get(x, y)) {
|
||||
case EMPTY:
|
||||
ctx.fillStyle = "#fff";
|
||||
break;
|
||||
case SNAKE:
|
||||
ctx.fillStyle = "#333";
|
||||
break;
|
||||
case FRUIT:
|
||||
ctx.fillStyle = "#009BFF";
|
||||
break;
|
||||
}
|
||||
ctx.fillRect(x*tw, y*th, tw, th);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fillText("SCORE: " + score, 10, canvas.height-10);
|
||||
}
|
||||
|
||||
|
||||
main();
|
||||
</script>
|
||||
<h2 class="gradient-text"><a href="index.html">Wanna go back to the main menu? Don't blame you. Click this text to go back.</a></h2>
|
||||
<h2>Btw this snake game is taken from https://webdevtrick.com so yeah </h2>
|
||||
|
||||
<footer class="site-footer">
|
||||
<ul class="footer-links">
|
||||
<li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
|
||||
<li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
|
||||
<li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
|
||||
<li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
|
||||
<li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
|
||||
<li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user