1st draft README including flowchart and pseudo code #31
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,53 @@ | ||
| # Project #1 | ||
| <!--- | ||
| Read Me Contents | ||
| --> | ||
|
|
||
|
|
||
| # Cubix : The Matching Game | ||
|
|
||
| Live prototype here: https://raywtham.github.io/project-1/ | ||
|
|
||
| ### Overview | ||
|
|
||
| Cubix as the title suggests, is a matching game. | ||
|
|
||
| The player is presented with a game board which is a 4 x 4 grid of cells. Each cell is one of 3 random colours. | ||
|
|
||
| The goal of the game is to find matching sequences of 3 cells of the same colour. | ||
|
|
||
| ### How to play | ||
|
|
||
| Click on the first cell in a row or column where 3 cells are of the same colour. Each matching triplet will score 3 points. | ||
|
|
||
| Progress to the next level when all possible matches on the grid are found. | ||
|
|
||
| There is a time limit of 60 seconds. Once the time is up, the game will end. | ||
|
|
||
| Try to get a higher score each time! | ||
|
|
||
| --- | ||
|
|
||
| ### Flowchart | ||
|  | ||
|
|
||
| --- | ||
|
|
||
| ### Initial Project Planning : Pseudo codes | ||
|
|
||
| * Use a function to create a 2D array “grid” which is an array with 16 null values to represent a 4 x 4 grid of cells. | ||
|
|
||
| * Function gameStart: Generate random numbers between 1 to 3 to populate the array. 1,2,3 will represent “Red”,”Yellow”, “Blue” cells respectively. | ||
| Function Scoring: a function to check scoring condition | ||
| check row: 2 adjacent cells on left or right are the same as active cell -> score | ||
| check column : 2 adjacent cells on top or bottom are the same as active cell - > score change values of cells which met scoring to 0 | ||
| call function isLevelOver | ||
|
|
||
| * On click on a cell, run check scoring function | ||
|
|
||
| * Function to replenish cells : Loop: Check the array for any cells with value 0. Populate these with the value of the cell above it then change the value of the cell above it to 0. | ||
| If there is no cells above i.e top row, generate random numbers to populate cell | ||
|
|
||
| * Function to check if game is over: check if there are any matching 3s left on the grid. If yes return false else return true. Add 1 to level counter. If level counter = 7, game ends. | ||
|
|
||
| * Function to move to next level: Clears all values in the grid then calls function gameStart. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| body { | ||
| color: white; | ||
| background-color: #00AFC2; | ||
| transition: background-color 10s ease; | ||
| } | ||
|
|
||
| .container { | ||
| width: 330px; | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| position: relative; | ||
| font-family: 'Helvetica', sans-serif; | ||
| display: block; | ||
|
|
||
| } | ||
|
|
||
| .wrapper { | ||
| margin: 0 auto; | ||
| border: 3px solid white; | ||
| width: 324px; | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| } | ||
|
|
||
| h1 { | ||
| font-family: 'Orbitron', sans-serif; | ||
| font-weight: bold; | ||
| font-size: 60px; | ||
| position: relative; | ||
| top: 30px | ||
| } | ||
|
|
||
| h3 { | ||
| font-family: 'Orbitron', sans-serif; | ||
| font-size: 30px; | ||
| display: block; | ||
| margin: 15px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-family: 'Orbitron', sans-serif; | ||
| margin: 20px 15px; | ||
| display: block; | ||
| height: 20px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| button { | ||
| font-family: 'Orbitron', sans-serif; | ||
| font-weight: bold; | ||
| border: none; | ||
| background-color: white; | ||
| padding: 10px 5px 8px 5px; | ||
| font-size: 15px; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #00AFC2; | ||
| color: white; | ||
| } | ||
|
|
||
| .cell { | ||
| width: 80px; | ||
| height: 80px; | ||
| border: 0.5px solid beige; | ||
| transition: background-color 0.1s linear; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| $(function () { | ||
|
|
||
| var grid = [] //game board | ||
| var colorList =['#3772FF','#FED766','#FE5F55'] | ||
| var matrix = 4 //length & breadth of board | ||
| var $cell = $('.cell') | ||
| var score = 0 // starting score | ||
| var time = 60 // time limit of the game | ||
| var checker = [] //to store player matches | ||
| var gameChecker =[] //to store whole board matches | ||
|
|
||
| function generateLevel () { | ||
| //creates a new 2Darray specified by 'matrix' | ||
| //create rows then columns, grid can be accessed with grid[row][column] | ||
| for (i = 0; i < matrix; i++) { | ||
| grid.push([]) | ||
| for (j = 0; j < matrix; j++) { | ||
| grid[i].push(generateColor()) | ||
|
|
||
| //populate cells in css | ||
| var pos = i +","+ j | ||
| $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[i][j]) | ||
| } | ||
| } | ||
| if (checkForMatches() < 3 ) restart() //if less than 3 available moves, regenerate level | ||
| } | ||
|
|
||
| function playerMatchCells() { | ||
| //for player to make matches | ||
| var index = ($(this).data('position')) //index[0], index[2] | ||
| var index1 = parseInt(index[0]) | ||
| var index2 = parseInt(index[2]) | ||
|
|
||
| //check if cell and next 2 cells match, then push into checker array | ||
| //horizontal check | ||
| if( grid[index1][index2]===grid[index1][index2+1] && grid[index1][index2]===grid[index1][index2+2]) { | ||
| checker.push([index1, index2,'h']) | ||
| score +=3 | ||
| } | ||
| //vertical check | ||
| if(grid[index1+2]) { | ||
| if( grid[index1][index2]===grid[index1+1][index2] && grid[index1][index2]===grid[index1+2][index2]) { | ||
| checker.push([index1, index2,'v']) | ||
| score +=3 | ||
| } | ||
| } | ||
|
|
||
| //future functionality to check backwards | ||
| // if( grid[index1][index2]===grid[index1][index2-1] && grid[index1][index2]===grid[index1][index2-2]) { | ||
| // checker.push([index1, index2,'h']) | ||
| // } | ||
| // if(grid[index1-2]){ | ||
| // if( grid[index1][index2]===grid[index1-1][index2] && grid[index1][index2]===grid[index1-2][index2]) { | ||
| // checker.push([index1, index2,'v']) | ||
| // } | ||
| // } | ||
|
|
||
| //change cells to '0' when they match | ||
| if (checker.length > 0) { | ||
| for(var i = 0; i < checker.length; i++) { | ||
| if (checker[i][2] === 'h') { | ||
| grid[checker[i][0]][checker[i][1]] = 0 | ||
| grid[checker[i][0]][checker[i][1] + 1] = 0 | ||
| grid[checker[i][0]][checker[i][1] + 2] = 0 | ||
| } | ||
| if (checker[i][2] === 'v') { | ||
| grid[checker[i][0]][checker[i][1]] = 0 | ||
| grid[checker[i][0] + 1][checker[i][1]] = 0 | ||
| grid[checker[i][0] + 2][checker[i][1]] = 0 | ||
| } | ||
| } | ||
| //reset checker | ||
| checker = [] | ||
| } | ||
| replenishCells() | ||
| } | ||
|
|
||
|
|
||
| function checkForMatches() { | ||
| //checks if any matches exist on the whole board | ||
| gameChecker = [] | ||
| for (var x = 0 ; x < matrix; x++) { | ||
| for (var y = 0; y < matrix; y++) { | ||
|
|
||
| //check for horizontal matches | ||
| if (grid[x][y] === grid[x][y+1] && grid[x][y] === grid[x][y+2]) { | ||
| gameChecker.push([x,y,'h']) | ||
| } | ||
| //check for vertical matches | ||
| if (grid[x+2]) { | ||
| if (grid[x][y] === grid[x+1][y] && grid[x][y] === grid[x+2][y]) { | ||
| gameChecker.push([x,y,'v']) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return gameChecker.length | ||
| } | ||
|
|
||
| function replenishCells() { | ||
| //replenish the empty cells where matches were found by the player | ||
| var pos = x +","+ y | ||
|
|
||
| //replenish from bottom | ||
| for (var x = matrix - 1 ; x >= 0 ; x--) { | ||
| for (var y = matrix - 1; y >= 0 ; y--) { | ||
| if (grid[x-1] && grid[x][y] === 0) { | ||
| ;[ grid[x][y],grid[x-1][y] ] = [grid[x-1][y], grid[x][y] ] | ||
|
There was a problem hiding this comment. May I know why did you put semicolone here? |
||
| pos = x +","+ y | ||
| $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) | ||
| } | ||
| } | ||
| } | ||
| //run again to replenish adjacent empty | ||
| for (var x = 0 ; x < matrix ; x++) { | ||
| for (var y = 0; y < matrix ; y++) { | ||
| if (grid[x-1] && grid[x][y] === 0) { | ||
| ;[ grid[x][y],grid[x-1][y] ] = [grid[x-1][y], grid[x][y] ] | ||
| pos = x +","+ y | ||
| $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) | ||
| } | ||
|
|
||
| } | ||
| } | ||
| //replenish last adjacent empty | ||
| for (var x = 0 ; x < matrix ; x++) { | ||
| for (var y = 0; y < matrix ; y++) { | ||
| if (grid[x][y] === 0) { | ||
| grid[x][y] = generateColor() | ||
| pos = x +","+ y | ||
| $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (checkForMatches() === 0 ) { | ||
| //if no matches remain on the board, start a new level | ||
| alert('Level Complete!') | ||
| restart() | ||
| } | ||
| } | ||
|
|
||
| function generateColor() { | ||
| return colorList[Math.floor(Math.random() * colorList.length)] | ||
| } | ||
|
|
||
| function restart() { | ||
| //restarts level | ||
| grid = [] | ||
| generateLevel() | ||
| } | ||
|
|
||
| function resetAll() { | ||
| //resets the game & starts a new game | ||
| clearInterval(timer) | ||
| time = 60 | ||
| score = 0 | ||
| scoreboard() | ||
| timer = setInterval(timerFn, 1000) | ||
| restart() | ||
| } | ||
|
|
||
| function scoreboard() { | ||
| //display score | ||
| $('h3').text('Score: ' + score) | ||
| } | ||
|
|
||
| function bgChanger(){ | ||
| //background color changer | ||
| var r = Math.floor(Math.random() * 255) | ||
| var g = Math.floor(Math.random() * 255) | ||
| var b = Math.floor(Math.random() * 255) | ||
| var $body = $('body') | ||
|
There was a problem hiding this comment. You may move line 173 to outside of the function. Then what will be the benefit? |
||
| var bgColorArray = "rgb("+r+","+g+","+b+")" | ||
| $body.css('backgroundColor', bgColorArray) | ||
| } | ||
|
|
||
| function timerFn () { | ||
| //countdown timer | ||
| if (time !==0) { | ||
| time-- | ||
| $('h2').text('Time left: ' + time +'s') | ||
| } | ||
| if(time === 0) { | ||
| alert('Time is up! Click ok to start new game.') | ||
| clearInterval(timer) | ||
| resetAll() | ||
| } | ||
| } | ||
|
|
||
| generateLevel() | ||
| $cell.on('click', playerMatchCells) | ||
| $('body').on('click', scoreboard) | ||
| $('button').on('click', resetAll) | ||
| setInterval(bgChanger,4000) | ||
| var timer = setInterval(timerFn, 1000) | ||
|
|
||
| }) | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You may try : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
and need double quote mark there?