old-src-backup/snake.html

155 lines
3.9 KiB
HTML
Raw Permalink Normal View History

2017-07-12 00:14:14 -04:00
<!DOCTYPE html>
<html lang="en">
<head>
<li><a href="index.html">Home</a></li>
<meta charset="utf-8" />
<link href='https://fonts.google.com/specimen/Taviraj?selection.family=Taviraj' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background:#4289f4;
text-align:center;
}
canvas {
background:#415ff4;
-webkit-box-shadow:0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
box-shadow:0 0 20px #000;
}
h1 { font-family: 'Cabin Sketch', arial, serif; font-size:50px;
text-indent: -100px;margin-bottom:20;margin-top:30px}
</style>
<script type="text/javascript">
/**
* @license HTML5 experiment Snake
* http://www.xarg.org/project/html5-snake/
*
* Copyright (c) 2011, Robert Eisele (robert@xarg.org)
* Dual licensed under the MIT or GPL Version 2 licenses.
**/
function init() {
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var X = 5 + (Math.random() * (45 - 10))|0;
var Y = 5 + (Math.random() * (30 - 10))|0;
var direction = Math.random() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0, easy = 0;
var i, dir;
var canvas = document.createElement('canvas');
for (i = 0; i < 45; i++) {
map[i] = [];
}
canvas.setAttribute('width', 45 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function placeFood() {
var x, y;
do {
x = Math.random() * 45|0;
y = Math.random() * 30|0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock() {
if (easy) {
X = (X+45)%45;
Y = (Y+30)%30;
}
--inc_score;
if (turn.length) {
dir = turn.pop();
if ((dir % 2) !== (direction % 2)) {
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
&& 2 !== map[X][Y]) {
if (1 === map[X][Y]) {
score+= Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X+= xV[direction];
Y+= yV[direction];
if (elements < queue.length) {
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length) {
if (confirm("You lost! Play again?")) {
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (Math.random() * (45 - 10))|0;
Y = 5 + (Math.random() * (30 - 10))|0;
direction = Math.random() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 45; i++) {
map[i] = [];
}
placeFood();
} else {
window.clearInterval(interval);
window.location = "/index.html";
}
}
}
interval = window.setInterval(clock, 60);
document.onkeydown = function(e) {
var code = e.keyCode - 37;
/*
* 0: left
* 1: up
* 2: right
* 3: down
**/
if (0 <= code && code < 4 && code !== turn[0]) {
turn.unshift(code);
} else if (-5 == code) {
if (interval) {
window.clearInterval(interval);
interval = null;
} else {
interval = window.setInterval(clock, 60);
}
} else { // O.o
dir = sum + code;
if (dir == 44||dir==94||dir==126||dir==171) {
sum+= code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</head>
<body onload="init()">
<header><title>Hello World</title></header>
</body>
</html>