window.onload = function() { document.body.innerHTML += '

Sssnake

'; document.body.innerHTML += '

'; const board = []; const boardWidth = 12, boardHeight = 12; var snakeX; var snakeY; var snakeLength; var snakeDirection; function initGame() { const boardElement = document.getElementById('board'); for (var y = 0; y < boardHeight; ++y) { var row = []; for (var x = 0; x < boardWidth; ++x) { var cell = {}; // Create a

and store it in the cell object cell.element = document.createElement('div'); // Add it to the board boardElement.appendChild(cell.element); // Add to list of all row.push(cell); } // Add this row to the board board.push(row); } // Start the game loop (it will call itself with timeout) startGame(); gameLoop(); } function placeApple() { // A random coordinate for the apple var appleX = Math.floor(Math.random() * boardWidth); var appleY = Math.floor(Math.random() * boardHeight); board[appleY][appleX].apple = 1; } function startGame() { // Default position for the snake in the middle of the board. snakeX = Math.floor(boardWidth / 2); snakeY = Math.floor(boardHeight / 2); snakeLength = 1; snakeDirection = ''; // Clear the board for (var y = 0; y < boardHeight; ++y) { for (var x = 0; x < boardWidth; ++x) { board[y][x].snake = 0; board[y][x].apple = 0; } } // Set the center of the board to contain a snake board[snakeY][snakeX].snake = snakeLength; // Place the first apple on the board. placeApple(); } function gameLoop() { // Update position depending on which direction the snake is moving. switch (snakeDirection) { case 'Up': snakeY--; break; case 'Down': snakeY++; break; case 'Left': snakeX--; break; case 'Right': snakeX++; break; } // Check for walls, and restart if we collide with any if (snakeX < 0 || snakeY < 0 || snakeX >= boardWidth || snakeY >= boardHeight) { startGame(); } // Tail collision if (board[snakeY][snakeX].snake > 0) { startGame(); } // Collect apples if (board[snakeY][snakeX].apple === 1) { snakeLength++; board[snakeY][snakeX].apple = 0; placeApple(); } // Update the board at the new snake position board[snakeY][snakeX].snake = snakeLength; // Loop over the entire board, and update every cell for (var y = 0; y < boardHeight; ++y) { for (var x = 0; x < boardWidth; ++x) { var cell = board[y][x]; if (cell.snake > 0) { cell.element.className = 'snake'; cell.snake -= 1; } else if (cell.apple === 1) { cell.element.className = 'apple'; } else { cell.element.className = ''; } } } // This function calls itself, with a timeout of 1000 milliseconds setTimeout(gameLoop, 200 /* / snakeLength*/); } function enterKey(event) { // Update direction depending on key hit switch (event.key) { case 'ArrowUp': snakeDirection = 'Up'; break; case 'ArrowDown': snakeDirection = 'Down'; break; case 'ArrowLeft': snakeDirection = 'Left'; break; case 'ArrowRight': snakeDirection = 'Right'; break; default: break; } // This prevents the arrow keys from scrolling the window event.preventDefault(); } /*---------------------------------------------------*/ // Handling touches || mouse touches var xDown = null, yDown = null; // Handle touches function handleTouchStart(evt) { xDown = evt.clientX || evt.touches[0].clientX; yDown = evt.clientY || evt.touches[0].clientY; } function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.clientX || evt.touches[0].clientX; var yUp = evt.clientY || evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { if ( xDiff > 0 && snakeDirection != 'Right' ) { // Left swipe snakeDirection = 'Left'; } else if (xDiff < 0 && snakeDirection != 'Left') { // Right swipe snakeDirection = 'Right'; } } else { if ( yDiff > 0 && snakeDirection != 'Down' ) { // Up swipe snakeDirection = 'Up'; } else if (yDiff < 0 && snakeDirection != 'Up') { // Down swipe snakeDirection = 'Down'; } } // Reset values xDown = null; yDown = null; } // End of handleTouchMove const boardElement1 = document.getElementById('board') && document.body; boardElement1.addEventListener("touchstart", handleTouchStart, false); boardElement1.addEventListener("touchmove", handleTouchMove, false); boardElement1.addEventListener("mousedown", handleTouchStart, false); boardElement1.addEventListener("mousemove", handleTouchMove, false); /*---------------------------------------------------*/ // Run game initGame(); document.addEventListener("keydown", enterKey); }; // Onload