<canvas id="canvas-background" width="800" height="600"></canvas>
<canvas id="canvas-demo" width="800" height="600"></canvas>
<div id="points">0</div>
<div id="info">Press "space" key to start</div>
<div id="help">The movement is relative to the snake, so you only use the left and right keys.</div>
#canvas-background {
background-color: #f4f4f4;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
#canvas-demo {
background-color: transparent;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
#points {
position: absolute;
left: 20px;
top: 20px;
z-index: 20;
font-size: 25px;
width: 50px;
text-align: right;
border: 1px solid #999999;
padding-left: 10px;
padding-right: 10px;
}
#info {
position: absolute;
left: 530px;
top: 20px;
z-index: 20;
font-size: 20px;
text-align: center;
width: 250px;
}
#help {
position: absolute;
left: 530px;
top: 550px;
z-index: 20;
font-size: 15px;
text-align: center;
width: 250px;
}
var SIZE = 20;
var WIDTH = 20;
var HEIGHT = 20;
var KEY = { LEFT: 37, RIGHT: 39, SPACE: 32 };
var speed = 50;
var gameLoop;
var canvas = document.getElementById("canvas-demo");
var cBackground = document.getElementById("canvas-background");
var point = new obelisk.Point(400, 50);
var pixelView = new obelisk.PixelView(canvas, point);
var pVBackground = new obelisk.PixelView(cBackground, point);
var dimension = new obelisk.CubeDimension(SIZE, SIZE, SIZE);
var matrix;
var snake;
var movX = 0;
var movY = -1;
var grow = 0;
var points = 0;
var playing = false;
var pressed = false;
var gameover = false;
function createArray(width, height) {
var arr = new Array(width);
for (var i = 0; i < width; i++) {
arr[i] = new Array(height);
}
return arr;
}
function init() {
points = 0;
document.getElementById("points").innerHTML = points;
speed = 50;
movX = 0;
movY = -1;
grow = 0;
playing = false;
pressed = false;
matrix = createArray(WIDTH, HEIGHT);
snake = new Array(4);
snake[0] = [Math.floor(WIDTH / 2), Math.floor(HEIGHT / 2)];
snake[1] = [Math.floor(WIDTH / 2), Math.floor(HEIGHT / 2) + 1];
snake[2] = [Math.floor(WIDTH / 2), Math.floor(HEIGHT / 2) + 2];
snake[3] = [Math.floor(WIDTH / 2), Math.floor(HEIGHT / 2) + 3];
putSnake();
putFruit();
//matrix[Math.floor(WIDTH / 2)][Math.floor(HEIGHT / 2) - 5] = 3;
}
function putFruit() {
var oPosX = (posX = Math.floor(Math.random() * WIDTH));
var oPosY = (posY = Math.floor(Math.random() * HEIGHT));
while (matrix[posX][posY]) {
posX = (posX + 1) % WIDTH;
if (posX == WIDTH) {
posX = posX % WIDTH;
posY = (posY + 1) % HEIGHT;
}
if (oPosX == posX && oPosY == posY) {
clearInterval(gameLoop);
playing = false;
document.getElementById("info").innerHTML =
"Awesome!!!<br> You finish the game!!!";
}
}
matrix[posX][posY] = 3;
}
function putSnake(last) {
if (
snake[0][0] < 0 ||
snake[0][0] >= WIDTH ||
snake[0][1] < 0 ||
snake[0][1] >= HEIGHT
) {
document.getElementById("info").innerHTML =
'Game Over <br> You hit the wall <br> Press "space" to restart';
clearInterval(gameLoop);
playing = false;
gameover = true;
} else {
if (matrix[snake[0][0]][snake[0][1]] == 2) {
document.getElementById("info").innerHTML =
'Game Over <br> You eat your own body <br> Press "space" to restart';
clearInterval(gameLoop);
playing = false;
gameover = true;
} else {
if (matrix[snake[0][0]][snake[0][1]] == 3) {
// eat a fruit
grow += 2;
putFruit();
points += 1;
if (speed < 50) {
speed++;
clearInterval(gameLoop);
gameLoop = setInterval(update, 10000 / speed);
}
document.getElementById("points").innerHTML = points;
}
matrix[snake[0][0]][snake[0][1]] = 1;
for (var i = 1; i < snake.length; i++) {
matrix[snake[i][0]][snake[i][1]] = 2;
}
if (last) {
if (!grow) {
matrix[last[0]][last[1]] = 0;
} else {
snake.push([last[0], last[1]]);
grow--;
}
}
}
}
}
function moveSnake() {
var last = [snake[snake.length - 1][0], snake[snake.length - 1][1]];
for (var i = snake.length - 1; i > 0; i--) {
snake[i][0] = snake[i - 1][0];
snake[i][1] = snake[i - 1][1];
}
snake[0][0] = snake[0][0] + movX;
snake[0][1] = snake[0][1] + movY;
return last;
}
function update() {
var last = moveSnake();
putSnake(last);
draw();
pressed = false;
}
var colorBG = new obelisk.SideColor().getByInnerColor(
obelisk.ColorPattern.GRAY
);
function drawBackground() {
pVBackground.clear();
for (var i = 0; i < WIDTH; i++) {
var sideX0 = new obelisk.SideX(dimension, colorBG);
var p3dX0 = new obelisk.Point3D(SIZE * i, 20 * SIZE, -SIZE);
pVBackground.renderObject(sideX0, p3dX0);
var sideY0 = new obelisk.SideY(dimension, colorBG);
var p3dY0 = new obelisk.Point3D(20 * SIZE, i * SIZE, -SIZE);
pVBackground.renderObject(sideY0, p3dY0);
var sideY1 = new obelisk.SideY(dimension, colorBG);
var p3dY1 = new obelisk.Point3D(0 * SIZE, i * SIZE, 0);
pVBackground.renderObject(sideY1, p3dY1);
var sideX1 = new obelisk.SideX(dimension, colorBG);
var p3dX1 = new obelisk.Point3D(SIZE * i, 0 * SIZE, 0);
pVBackground.renderObject(sideX1, p3dX1);
}
for (var i = 0; i < WIDTH; i++) {
for (var j = 0; j < HEIGHT; j++) {
var p3d = new obelisk.Point3D(i * SIZE, j * SIZE, 0);
var brick = new obelisk.Brick(dimension, colorBG);
pVBackground.renderObject(brick, p3d);
}
}
}
var colorBlue = new obelisk.CubeColor().getByHorizontalColor(
obelisk.ColorPattern.BLUE
);
var cubeBlue = new obelisk.Cube(dimension, colorBlue);
var colorGreen = new obelisk.CubeColor().getByHorizontalColor(
obelisk.ColorPattern.GRASS_GREEN
);
var cubeGreen = new obelisk.Cube(dimension, colorGreen);
var colorRed = new obelisk.PyramidColor().getByRightColor(
obelisk.ColorPattern.WINE_RED
);
var pyramidRed = new obelisk.Pyramid(dimension, colorRed);
function draw() {
pixelView.clear();
for (var i = 0; i < WIDTH; i++) {
for (var j = 0; j < HEIGHT; j++) {
switch (matrix[i][j]) {
case 1:
// draw head snake
var p3d = new obelisk.Point3D(i * SIZE, j * SIZE, 0);
pixelView.renderObject(cubeBlue, p3d);
break;
case 2:
// draw body snake
var p3d = new obelisk.Point3D(i * SIZE, j * SIZE, 0);
pixelView.renderObject(cubeGreen, p3d);
break;
case 3:
// draw apple
var p3d = new obelisk.Point3D(i * SIZE, j * SIZE, 0);
pixelView.renderObject(pyramidRed, p3d);
break;
default:
break;
}
}
}
}
function onkeydown(e) {
if (e.keyCode < 112 || e.keyCode > 123) {
e.preventDefault();
}
if (playing) {
if (!pressed) {
switch (e.keyCode) {
case KEY.LEFT:
pressed = true;
if (movY) {
movX = movY;
movY = 0;
} else {
movY = -movX;
movX = 0;
}
break;
case KEY.RIGHT:
pressed = true;
if (movY) {
movX = -movY;
movY = 0;
} else {
movY = movX;
movX = 0;
}
break;
}
}
} else {
if (e.keyCode == KEY.SPACE) {
if (gameover && e.keyCode == KEY.SPACE) {
init();
draw();
}
playing = true;
pressed = true;
gameLoop = setInterval(update, 10000 / speed);
document.getElementById("info").innerHTML = "Eat all the fruit that you can";
}
}
}
document.addEventListener("keydown", onkeydown, false);
init();
drawBackground();
draw();
This Pen doesn't use any external CSS resources.