319 lines
6.4 KiB
HTML
Executable File
319 lines
6.4 KiB
HTML
Executable File
<!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>
|