diff --git a/levels/1.json b/levels/1.json index ae2c92d..3d9e2e7 100644 --- a/levels/1.json +++ b/levels/1.json @@ -1,16 +1,17 @@ { - "dimensions": [80, 40], + "dimensions": [40, 40], "delay": 200, "walls": [ - [5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35] + [5,5], [5,6], [5,7], [5,8], [40, 35], [38, 35], [23, 35] ], "food": [ - [10,10] + [10,10], + [20, 20] ], "snake": [ - [60,60], - [60,59], - [60,58] + [6,10], + [6,11], + [6,12] ] } \ No newline at end of file diff --git a/script.js b/script.js index 75abe5c..e283cff 100644 --- a/script.js +++ b/script.js @@ -2,11 +2,43 @@ * Game config */ const number_levels = 2; -const cell_width = 10; -const cell_height = 10; +const cell_width = 20; +const cell_height = 20; -function byId(el) { - return document.getElementById(el); +/** + * Cells content + */ +let i = 0; +const EMPTY = i++; +const SNAKE = i++; +const WALL = i++; +const FOOD = i++; +delete i; + +/** + * Get & return an element by its ID + * + * @param {String} id The ID of the element to get + * @return {HTMLElement} The target element + */ +function byId(id) { + return document.getElementById(id); +} + +/** + * Draw a line in a canvas rendering context + * + * @param {CanvasRenderingContext2D} ctx Target context + * @param {Number} x1 Starting x + * @param {Number} y1 Starting y + * @param {Number} x2 Ending x + * @param {Number} y2 Ending y + */ +function drawLine(ctx, x1, y1, x2, y2) { + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2,y2); + ctx.stroke(); } // Get elements @@ -28,6 +60,9 @@ function showMainScreen() { /** * Start a new game + * + * The scope of the function is the main + * game scope */ async function startGame(gameID) { startScreen.style.display = "none"; @@ -45,9 +80,87 @@ async function startGame(gameID) { // Create & apply the canvas const canvas = document.createElement("canvas"); - canvas.width = cell_width * level.dimensions[0]; - canvas.height = cell_height * level.dimensions[1]; + canvas.width = cell_width * level.dimensions[1]; + canvas.height = cell_height * level.dimensions[0]; canvasTarget.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + + // Initialize the map & snake arrays + let map = []; + let snake = []; + + /// First with empty cells... + for(let i = 0; i < level.dimensions[0]; i++) { + let cell = []; + for(let j = 0; j < level.dimensions[1]; j++) { + cell.push(EMPTY); + } + map.push(cell) + } + + /// ... then with cells content + level.walls.forEach((w) => { + map[w[0]-1][w[1]-1] = WALL + }) + + level.food.forEach((f) => { + map[f[0]-1][f[1]-1] = FOOD + }) + + level.snake.forEach((s) => { + map[s[0]-1][s[1]-1] = SNAKE + snake.push([s[0]-1, s[1]-1]); + }) + + + /** + * Step function + * + * I placed this function here to inherit + * the map, snake, canvas & ctx variables... + */ + let interval = setInterval(() => step(), level.delay); + function step() { + + + // Redraw screen + ctx.clearRect(0, 0, canvas.width, canvas.height) + + // First, draw the grid + for(let i = 0; i <= level.dimensions[1]; i++) { + drawLine(ctx, i*cell_width, 0, i*cell_width, canvas.height) + } + for(let i = 0; i <= level.dimensions[0]; i++) { + drawLine(ctx, 0, i*cell_height, canvas.width, i*cell_height, canvas.height) + } + + + // Now draw the map + for(let y = 0; y < map.length; y++) { + for(let x = 0; x < map[y].length; x++) { + + switch(map[y][x]) { + + case WALL: + ctx.fillStyle = "darkRed"; + ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height) + break; + + case FOOD: + ctx.fillStyle = "darkGreen"; + ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height) + break; + + case SNAKE: + + + + } + + } + } + } } /**