Cleanup
This commit is contained in:
@@ -1,192 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML_Snake</title>
|
||||
</head>
|
||||
|
||||
<body onkeydown='return keyDown(event)'; style="background-color: #333;">
|
||||
<h1 id="Score" style="width: 100%; text-align: center; color:#fff;">Score : 0</h1>
|
||||
<div id="BODY" style="position: relative; margin-bottom: 5px; margin-left: 50%; right: 300px; background-color: #666; width: 600px; height: 600px;">
|
||||
<script>
|
||||
var snake = [];
|
||||
var score = 0;
|
||||
var posX = 12;
|
||||
var posY = 15;
|
||||
var colX, colY;
|
||||
var saves = "";
|
||||
var paused = false;
|
||||
var direction = 2;
|
||||
var wasCollected = false;
|
||||
var body = document.getElementById("BODY");
|
||||
|
||||
function set(name,value) {
|
||||
var expires = "";
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (9999*24*60*60*1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
|
||||
function get(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
function hsl2rgb(h,s,l) {
|
||||
let a=s*Math.min(l,1-l);
|
||||
let f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);
|
||||
return [f(0),f(8),f(4)];
|
||||
}
|
||||
|
||||
var degree = 0;
|
||||
function newTail(x, y){
|
||||
degree += 5;
|
||||
if(degree > 359){
|
||||
degree = 0;
|
||||
}
|
||||
|
||||
var color = hsl2rgb(degree, .6, .5);
|
||||
var r = Math.floor(color[0] * 255).toString(16);
|
||||
var g = Math.floor(color[1] * 255).toString(16);
|
||||
var b = Math.floor(color[2] * 255).toString(16);
|
||||
|
||||
var nX = (10*x)-10;
|
||||
var nY = (10*y)-10;
|
||||
var id = x + "," + y;
|
||||
if (x == colX){
|
||||
if (y == colY){
|
||||
var item = document.getElementById("collectable");
|
||||
item.parentNode.removeChild(item);
|
||||
wasCollected = true;
|
||||
newCollectable();
|
||||
score += 1;
|
||||
document.getElementById("Score").innerHTML = "Score : " + score;
|
||||
}
|
||||
}
|
||||
|
||||
body.innerHTML = body.innerHTML + "<div id='" + id + "'; style='position: absolute; left: " + nX + "px; top:" + nY + "px; width: 10px; height: 10px; background-color: #" + r+g+b + "; border: 0; padding: 0; margin: 0;'></div>";
|
||||
return id;
|
||||
}
|
||||
|
||||
function randInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function newCollectable(){
|
||||
colX = randInt(1, 59);
|
||||
colY = randInt(1, 59);
|
||||
body.innerHTML = body.innerHTML + "<div id='collectable'; style='position: absolute; left: " + (colX*10-10) + "px; top:" + (colY*10-10) + "px; width: 10px; height: 10px; background-color: #f00; border: 0; padding: 0; margin: 0;'></div>";
|
||||
}
|
||||
|
||||
function isBound(x, y){
|
||||
if (x > 0 && x < 61){
|
||||
if (y > 0 && y < 61){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function die(){
|
||||
set("data", saves + "|" + score );
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function update(){
|
||||
if (paused == false){
|
||||
if (direction == 1){
|
||||
posY -= 1;
|
||||
}else if(direction == 2){
|
||||
posX += 1;
|
||||
}else if(direction == 3){
|
||||
posY += 1;
|
||||
}else if(direction == 4){
|
||||
posX -= 1;
|
||||
}
|
||||
if (isBound(posX, posY)){
|
||||
function func(item, index, arr){
|
||||
var x = item.split(",")[0];
|
||||
var y = item.split(",")[1];
|
||||
if(posX == x){
|
||||
if(posY == y){
|
||||
die();
|
||||
}
|
||||
}
|
||||
}
|
||||
snake.forEach(func);
|
||||
|
||||
snake.push(newTail(posX, posY));
|
||||
if(wasCollected == false){
|
||||
var rem = snake.shift();
|
||||
var remObj = document.getElementById(rem);
|
||||
remObj.parentNode.removeChild(remObj);
|
||||
}else{
|
||||
wasCollected = false;
|
||||
}
|
||||
}else{
|
||||
die();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function keyDown(event){
|
||||
if (event.key == "w"){
|
||||
direction = 1;
|
||||
}else if(event.key == "d"){
|
||||
direction = 2;
|
||||
}else if(event.key == "s"){
|
||||
direction = 3;
|
||||
}else if(event.key == "a"){
|
||||
direction = 4;
|
||||
}else if(event.key == "p"){
|
||||
if (paused == true){
|
||||
paused = false;
|
||||
document.getElementById("PauseScreen").style.display = "none";
|
||||
}else{
|
||||
paused = true;
|
||||
document.getElementById("PauseScreen").style.display = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadLeaderboard(){
|
||||
if (get("data") != null){
|
||||
saves = get("data");
|
||||
function func(item, index, arr){
|
||||
document.getElementById("Scoreboard").innerHTML += '<div><h2 id="' + item + '"; style="text-align: center; font-size: 20px; padding: 0; margin: 0; border: 0;">' + item.toString() + '</h2></div>';
|
||||
}
|
||||
saves.split("|").forEach(func);
|
||||
}
|
||||
}
|
||||
|
||||
function start(){
|
||||
newCollectable();
|
||||
snake.push(newTail(10, 15));
|
||||
snake.push(newTail(11, 15));
|
||||
snake.push(newTail(12, 15));
|
||||
setTimeout(loadLeaderboard, 100);
|
||||
setInterval(update, 100);
|
||||
}
|
||||
|
||||
start();
|
||||
</script>
|
||||
</div>
|
||||
<div id="PauseScreen"style="position: relative; display: none; width: 500px; margin-left: 50%; right: 250px;">
|
||||
<h2 style="text-align: center; color: #f00; ">Game Paused</h2>
|
||||
</div>
|
||||
<div style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;">
|
||||
<h3 style="text-align: center; font-size: 25px; color: #0f0; padding: 0; margin: 0; border: 0;">LEADERBOARD</h3>
|
||||
</div>
|
||||
<hr style="margin: 0px; width:calc(100% - 82px);" />
|
||||
<div id="Scoreboard" style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;"></div>
|
||||
<h3 style="position: absolute; right: 10px; bottom: 3px; color: #fff;">Designed by Derek in California</h3>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user