<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
< type="text/java">
// 뱀이 이동하는 속도 : 0.15초
var interval = 150;
// 먹이가 생성되는 시간 : 3초
var foodInterval = 3000;
// 키보드 키 중 상하좌우키의 값
var LEFT = 37;
var UP = 38;
var RIGHT = 39;
var DOWN = 40;
// 현재 뱀이 움직이는 방향
var behavior = LEFT;
// 게임 시작 할 때 뱀의 위치
var pointX = 7;
var pointY = 7;
// 게임판의 크기 15 X 15
var width = 15;
var height = 15;
// 게임 시작 할 때 뱀의 길이
var snakeSize = 3;
// 뱀의 좌표.
var snakePoint = new Array();
// 뱀을 이동시키는 Interval
var move = null;
// 먹이를 생성시키는 Interval
var dropPoint = null;
window.onkeyup = function(evt) {
keyCode = evt.which ? evt.which : event.keyCode;
if( keyCode == LEFT ) {
if ( behavior != LEFT && behavior != RIGHT ) {
behavior = LEFT;
clearInterval(move);
move = setInterval(goLeft, interval);
}
}
else if( keyCode == UP ) {
if ( behavior != UP && behavior != DOWN ) {
behavior = UP;
clearInterval(move);
move = setInterval(goUp, interval);
}
}
else if( keyCode == RIGHT ) {
if ( behavior != RIGHT && behavior != LEFT ) {
behavior = RIGHT;
clearInterval(move);
move = setInterval(goRight, interval);
}
}
else if( keyCode == DOWN ) {
if ( behavior != DOWN && behavior != UP) {
behavior = DOWN;
clearInterval(move);
move = setInterval(goDown, interval);
}
}
}
window.onload = function() {
setGameBoard();
setSnake();
startGame();
};
/**
* 게임판을 셋팅함.
*/
function setGameBoard() {
var gameBoard = document.getElementById("gameboard");
for(var i = 0; i < width; i++) {
var row = gameBoard.insertRow(i);
for(var j = 0; j < height; j++) {
var cell = row.insertCell(j);
}
}
}
/**
* 뱀을 초기화 함
*/
function setSnake() {
var gameBoard = document.getElementById("gameboard");
var row = gameBoard.rows[pointX];
for(var i = 0; i < snakeSize; i++) {
setSnakePoint(pointX, pointY + i);
var cell = row.cells[pointY + i];
cell.style.backgroundColor = "black";
}
}
/**
* 뱀위 위치 정보를 기록함.
*/
function setSnakePoint(x, y) {
var snake = {};
snake.x = x;
snake.y = y;
snakePoint.push(snake);
}
/**
* 게임을 시작한다.
*/
function startGame(event) {
move = setInterval(goLeft, interval);
dropPoint = setInterval(drawPoint, foodInterval);
}
/**
* 뱀의 먹이를 그린다.
*/
function drawPoint() {
var x = Math.floor(Math.random() * width) + 1;
var y = Math.floor(Math.random() * height) + 1;
var gameBoard = document.getElementById("gameboard");
var row = gameBoard.rows[x];
var cell = row.cells[y];
if ( cell.style.backgroundColor == "black" ) {
return;
}
cell.style.backgroundColor = "red";
}
/**
* 뱀이 왼쪽으로 움직인다.
*/
function goLeft() {
removeTail();
var gameBoard = document.getElementById("gameboard");
for (var i = snakePoint.length-1; i > 0; i--) {
snakePoint[i].x = snakePoint[i-1].x;
snakePoint[i].y = snakePoint[i-1].y;
}
snakePoint[0].x = snakePoint[1].x;
snakePoint[0].y = snakePoint[1].y-1;
crashSnake();
drawSnake();
}
/**
* 뱀이 위쪽으로 움직인다.
*/
function goUp() {
removeTail();
var gameBoard = document.getElementById("gameboard");
for (var i = snakePoint.length-1; i > 0; i--) {
snakePoint[i].x = snakePoint[i-1].x;
snakePoint[i].y = snakePoint[i-1].y;
}
snakePoint[0].x = snakePoint[1].x-1;
snakePoint[0].y = snakePoint[1].y;
crashSnake();
drawSnake();
}
/**
* 뱀이 아래쪽으로 움직인다.
*/
function goDown() {
removeTail();
var gameBoard = document.getElementById("gameboard");
for (var i = snakePoint.length-1; i > 0; i--) {
snakePoint[i].x = snakePoint[i-1].x;
snakePoint[i].y = snakePoint[i-1].y;
}
snakePoint[0].x = snakePoint[1].x+1;
snakePoint[0].y = snakePoint[1].y;
crashSnake();
drawSnake();
}
/**
* 뱀이 오른쪽으로 움직인다.
*/
function goRight() {
removeTail();
var gameBoard = document.getElementById("gameboard");
for (var i = snakePoint.length-1; i > 0; i--) {
snakePoint[i].x = snakePoint[i-1].x;
snakePoint[i].y = snakePoint[i-1].y;
}
snakePoint[0].x = snakePoint[1].x;
snakePoint[0].y = snakePoint[1].y+1;
crashSnake();
drawSnake();
}
/**
* 뱀이 벽에 부딪혔는지 체크한다.
*/
function crashSnake() {
if ( snakePoint[0].x < 0 || snakePoint[0].y < 0) {
gameOver();
}
else if ( snakePoint[0].x > height || snakePoint[0].y > width) {
gameOver();
}
}
/**
* 게임을 끝낸다.
*/
function gameOver() {
clearInterval(move);
clearInterval(dropPoint);
document.getElementById("gameOver").style.display = "block";
}
// 잘린 꼬리, 먹이를 먹으면 잘린 꼬리에 뱀의 길이가 늘어난다.
var snakeTail = null;
/**
* 뱀의 꼬리를 삭제한다.
*/
function removeTail() {
var gameBoard = document.getElementById("gameboard");
snakeTail = snakePoint[snakePoint.length - 1];
var row = gameBoard.rows[snakeTail.x];
var cell = row.cells[snakeTail.y];
cell.style.backgroundColor = "#FFFFFF";
}
/**
* 뱀의 꼬리를 붙힌다.
*/
function appendTail() {
setSnakePoint(snakeTail.x, snakeTail.y);
}
/**
* 뱀을 그린다.
*/
function drawSnake() {
var gameBoard = document.getElementById("gameboard");
for(var i = 0; i < snakePoint.length; i++) {
var row = gameBoard.rows[snakePoint[i].x];
var cell = row.cells[snakePoint[i].y];
if ( i == 0 && cell.style.backgroundColor == "red" ) {
appendTail();
}
else if ( i == 0 && cell.style.backgroundColor == "black" ) {
gameOver();
}
cell.style.backgroundColor = "black";
}
}
</>
<style type="text/css">
table#gameboard {
border-collapse: collapse;
}
table#gameboard td {
border: 1px solid #CCC;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div id="gameOver" style="display:none;"><h1>GAME OVER!</h1></div>
<table id="gameboard" >
</table>
</body>
</html>
