Skip to content

Instantly share code, notes, and snippets.

@darjanin

darjanin/back_side.png

Last active August 29, 2015 14:14
Show Gist options
  • Save darjanin/537d3c1a12fcb73f2831 to your computer and use it in GitHub Desktop.
Save darjanin/537d3c1a12fcb73f2831 to your computer and use it in GitHub Desktop.
Download ZIP
Snake game written in JS; Created in 2011 for Webovská grafika @matfyz
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>square SNAKE</title>
<style>
button{
border: 1px solid #d7d7d7;
padding: 5px;
background-color: #f3f3f3;
font-size: 2em;
width: 120px;
margin-left: 3px;
}
</style>
</head>
<body style="background: url('desk.png') no-repeat;">
<div id="position" style="margin: 0px auto 0 auto; width: 708px;">
<div id="title" style="background: url('name.png') no-repeat;height: 92px;"></div>
<div id="display" style="background: url('display.png') no-repeat; height: 561px; z-index: -10; width: 708px; position: absolute;"></div>
<canvas id="c" height="360" width="500" style="float: left; border: none; z-index: 10; margin: 34px 0px 0px 34px;"></canvas>
<div id="debugTools" style="float: left; margin: 34px 0px 0px 0px; border-left: 1px solid #d7d7d7;width: 127px; height: 350px; background: url('back_side.png') repeat-x; padding: 5px;">
Score: <span id="score"></span><br />
Lives: <span id="lives"></span><br />
<!--Walls: <span id="walls"></span><br />
X: <span id="x"></span><br />
Y: <span id="y"></span><br />
Debug: <span id="debug"></span><br />-->
<button onclick="start()">Start</button><br />
<button onclick="stop()">Pause</button>
<p>Snake is controlled with arrow keys. Goal of game is to eat the red food. Simple :)</p>
<p><small>&copy; 2011 Milan Darjanin</small></p>
</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("c"),
context = canvas.getContext("2d");
context.fillStyle = 'white';
context.strokeStyle = '#fa00ff';
context.lineCap = 'round';
context.fillStyle = 'red';
//context.fillRect(10,15,15,15);
//context.fillRect(0,15,0,15);
var i = 0;
var x=0;
var y=0;
var food = [0,0];
var intervalId = 0;
var dir = [1,0];
var map = new Array();
var walls = [0,0,0,0];
var outX = document.getElementById('x');
var outY = document.getElementById('y');
var outWalls = document.getElementById('walls');
var outDebug = document.getElementById('debug');
var outScore = document.getElementById('score');
var outLives = document.getElementById('lives');
var canvasSize = [500,360];
var snakeSize = 10;
var snakeColor = 'green';
var backColor = 'white';
var score = 0;
var lives = 3;
var interval = 200;
var countFood = 0;
var snake = new Array();
function render(){
//i++;
document.onkeyup = handleArrowKeys;
move();
context.fillStyle = backColor;
context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
context.fillStyle = snakeColor;
for (j = 0; j < snake.length; j++){
context.fillRect(snake[j][0]*snakeSize,snake[j][1]*snakeSize,snakeSize,snakeSize);
//document.write(j+': '+snake[j][0]+', '+snake[j][1]+'<br />');
}
if (countFood == 0) {placeFood();}
context.fillStyle = 'red';
context.fillRect(food[0]*snakeSize,food[1]*snakeSize,snakeSize,snakeSize);
//outDebug.innerHTML =outDebug.innerHTML + '<br/>' + snake[0]+' <> '+food;
if (snake[0][0]==food[0] && snake[0][1]==food[1]){
snake.push([0,0]);
score++;
countFood = 0;
if (score % 10 == 0 && score > 0) {changeSpeed();}
//alert('food');
}
if (lives == 0) {
endGame();
}
outScore.innerHTML = score;
outLives.innerHTML = lives;
//outWalls.innerHTML = wallsHits();
//if (i == 10) {stop();}
}
function changeSpeed(){
if (interval > 10){
interval = interval - 20;
stop();
start();
}
}
function move(){
x += dir[0];
y += dir[1];
old = snake;
for (j = snake.length-1; j > 0; j--){
snake[j] = old[j-1];
}
snake[0] = [x,y];
handleCrashes();
//document.write(snake[0] + ':' + snake[1] + ':' + snake[2] +'||' + old[0] + ':' + old[1] + ':' + old[2] + '<br />');
//outX.innerHTML = x;
//outY.innerHTML = y;
//if (x >= 64) {dir[0] = -1;walls[1]++;}
//if (x <= 0) {dir[0] = 1;walls[3]++;}
//if (y >= 48) {dir[1] = -1;walls[2]++;}
//if (y <= 0) {dir[1] = 1;walls[0]++;}
}
function endGame(){
stop();
alert('Game over. '+ '\n' +' Your score is '+score);
resetSnake();
score=0;
lives=3;
}
function resetSnake(){
x=0;
y=0;
dir =[1,0];
snake = [];
createSnake();
}
function handleCrashes(){
if (snake[0][0] < 0 || snake[0][0]>49){
lives--;
resetSnake();
}
if (snake[0][1] < 0 || snake[0][1]>35){
lives--;
resetSnake();
}
for (i=1; i<snake.length;i++){
if (snake[0] == snake[i]) {
lives--;
resetSnake();
}
// return;
// return contains(snake,snake[0]);
}
}
function createSnake(){
snake[0] = [x,y];
snake[1] = [x-dir[0],y-dir[1]];
snake[2] = [x-2*dir[0],y-2*dir[1]];
//document.write('Snake: ' + snake[0] + ':' + snake[1] + ':' + snake[2] + '<br />');
}
function createMap(){
for (i = 0; i<(canvasSize[0]/snakeSize);i++){
for (j = 0; j<(canvasSize[1]/snakeSize);j++){
map[i][j] = '#';
}
}
}
function placeFood(){
posX = Math.round(Math.random()*100);
if (posX > 49) {
posX = posX / 5;
}
posY = Math.round(Math.random()*100);
if (posY > 34) {
posY = posY / 5;
}
food = [Math.round(posX),Math.round(posY)];
//outDebug.innerHTML = food + '<br />';
countFood = 1;
}
function handleArrowKeys(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
switch (evt.keyCode) {
case 37:
dir[0] = -1;
dir[1] = 0;
break;
case 38:
dir[0] = 0;
dir[1] = -1;
break;
case 39:
dir[0] = 1;
dir[1] = 0;
break;
case 40:
dir[0] = 0;
dir[1] = 1;
break;
}
}
}
document.onkeyup = handleArrowKeys;
function stop(){
clearInterval(intervalId);
intervalId=0;
}
function wallsHits(){
return walls[0] + ',' + walls[1] + ',' + walls[2] + ',' + walls[3];
}
function start(){
if (intervalId == 0){
createSnake();
intervalId = setInterval('render()',interval);
}
}
//alert(i);
//context.fillRect(10,15,15,15);
context.stroke();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment