diff --git a/README.md b/README.md index 317a3e58..e5e5fb8e 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,53 @@ -# Project Name (Start editing here) +# Project #1 -# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game -### Overview - -Let's start out with something fun - **a game!** - -Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. - -**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! - - ---- - -### Technical Requirements - -Your app must: +# Cubix : The Matching Game -* **Render a game in the browser** -* **Any number of players** will be okay, switch turns will be great -* **Design logic for winning** & **visually display which player won** -* **Include separate HTML / CSS / JavaScript files** -* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles -* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory -* **Deploy your game online**, where the rest of the world can access it -* Use **semantic markup** for HTML and CSS (adhere to best practices) -* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please +Live prototype here: https://raywtham.github.io/project-1/ ---- - -### Necessary Deliverables +### Overview -* A **working game, built by you**, hosted somewhere on the internet -* A **link to your hosted working game** in the URL section of your GitHub repo -* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project -* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. +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. -### Suggested Ways to Get Started +The goal of the game is to find matching sequences of 3 cells of the same colour. -* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! -* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems -* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. -* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. -* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. -* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. +### 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. -### Potential Project Ideas +Progress to the next level when all possible matches on the grid are found. -##### Blackjack -Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! +There is a time limit of 60 seconds. Once the time is up, the game will end. -##### Self-scoring Trivia -Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! +Try to get a higher score each time! --- -### Useful Resources - -* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ -* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ -* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ -* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ -* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ +### Flowchart +![flowchart](/assets/flowchart.png) --- -### Project Feedback + Evaluation - -* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? - -* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? +### Initial Project Planning : Pseudo codes -* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? +* 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. -* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? +* 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 -* __Deployment__: Did you deploy your application to a public url using GitHub Pages? +* On click on a cell, run check scoring function -* __Total__: Your instructors will give you a total score on your project between: +* 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 - Score | Expectations - ----- | ------------ - **0** | _Incomplete._ - **1** | _Does not meet expectations._ - **2** | _Meets expectations, good job!_ - **3** | _Exceeds expectations, you wonderful creature, you!_ +* 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. - This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! +* Function to move to next level: Clears all values in the grid then calls function gameStart. diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css index e69de29b..bd65fc08 100644 --- a/assets/css/stylesheet.css +++ b/assets/css/stylesheet.css @@ -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; +} diff --git a/assets/flowchart.png b/assets/flowchart.png new file mode 100644 index 00000000..a015f91c Binary files /dev/null and b/assets/flowchart.png differ diff --git a/assets/js/script.js b/assets/js/script.js index e69de29b..df28658a 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -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] ] + 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') + 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) + +}) diff --git a/assets/js/script2.js b/assets/js/script2.js new file mode 100644 index 00000000..38d598f0 --- /dev/null +++ b/assets/js/script2.js @@ -0,0 +1,286 @@ +//experimental file - not in use + +$(function () { + + var grid = [] //this is the game board + + //var colorList = ['blue','yellow','red'] //for testing + var colorList =['#3772FF','#FED766','#FE5F55'] + var cellColor = "" + var matrix = 4 + var $cell = $('.cell') + var score = 0 + var $divCell = $('
') + + + + + //create cells + for (var counter = 0; counter < matrix ** 2 ; counter++) { + $('.wrapper').append($divCell.clone()) + } + + + for (i = 0; i < matrix; i++) { + grid.push([]) + // grid[i] = new Array(matrix) + for (j = 0; j < matrix; j++) { + grid[i][j] = '[' + i + ', ' + j + ']' + } + } + + + for (var x = 0 ; x < matrix; x++) { + for (var y = 0; y < matrix; y++) { + $.each($('.cell'), function() { + $('.cell').attr('data-position', grid[x][y]) + }) + } + } + + + + function generateLevel () { + + // create a 2D array + //creates a new array of height & width specified by var 'matrix' + //create rows then columns, grid can be accessed with grid[row][column] + // grid = new Array(matrix) + for (i = 0; i < matrix; i++) { + grid.push([]) + // grid[i] = new Array(matrix) + for (j = 0; j < matrix; j++) { + + //populate cells in game logic + // grid[i][j] = generateColor() + grid[i].push(generateColor()) + + + + //populate cells in css + var pos = i +","+ j + $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[i][j]) + + } + + } + + //for testing + // grid[0][0] = "red" + // $('.cell[data-position= "0,0"]').css('backgroundColor', grid[0][0]) + // grid[0][1] = "red" + // $('.cell[data-position= "0,1"]').css('backgroundColor', grid[0][1]) + // grid[0][2] = "red" + // $('.cell[data-position= "0,2"]').css('backgroundColor', grid[0][2]) + // grid[0][3] = "blue" + // $('.cell[data-position= "0,3"]').css('backgroundColor', grid[0][3]) + // grid[1][0] = "blue" + // $('.cell[data-position= "1,0"]').css('backgroundColor', grid[1][0]) + // grid[1][1] = "blue" + // $('.cell[data-position= "1,1"]').css('backgroundColor', grid[1][1]) + // grid[1][2] = "blue" + // $('.cell[data-position= "1,2"]').css('backgroundColor', grid[1][2]) + // grid[1][3] = "yellow" + // $('.cell[data-position= "1,3"]').css('backgroundColor', grid[1][3]) + // grid[2][0] = "yellow" + // $('.cell[data-position= "2,0"]').css('backgroundColor', grid[2][0]) + // grid[2][1] = "yellow" + // $('.cell[data-position= "2,1"]').css('backgroundColor', grid[2][1]) + // grid[2][2] = "yellow" + // $('.cell[data-position= "2,2"]').css('backgroundColor', grid[2][2]) + // grid[3][0] = "red" + // $('.cell[data-position= "3,0"]').css('backgroundColor', grid[3][0]) + // grid[3][1] = "red" + // $('.cell[data-position= "3,1"]').css('backgroundColor', grid[3][1]) + // grid[3][2] = "red" + // $('.cell[data-position= "3,2"]').css('backgroundColor', grid[3][2]) + // grid[3][3] = "yellow" + // $('.cell[data-position= "3,3"]').css('backgroundColor', grid[3][3]) + // grid[2][3] = "yellow" + // $('.cell[data-position= "2,3"]').css('backgroundColor', grid[2][3]) + // console.log(grid) + if (checkForMatches() < 3 ) restart() + } + + $cell.on('click', playerMatchCells) + + + function playerMatchCells() { + var index = ($(this).data('position')) //index[0], index[2] + var index1 = parseInt(index[0]) + var index2 = parseInt(index[2]) + + + if( grid[index1][index2]===grid[index1][index2+1] && grid[index1][index2]===grid[index1][index2+2]) { + checker.push([index1, index2,'h']) + score +=3 + } + 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 + } + } + + // 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']) + // } + // } + + 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 + } + } + checker = [] + } + + console.log(grid) + replenishCells() + + } + + var checker = [] + var gameChecker =[] + + function checkForMatches() { + + 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']) + } + } + } + } + + // if (checker.length > 0) { + // return true + // } + + //console.log (gameChecker.length) + return gameChecker.length + + + } + + + function replenishCells() { + var pos; + + for (var x = matrix - 1 ; x >= 0 ; x--) { + for (var y = matrix - 1; y >= 0 ; y--) { + // for (var x = 0 ; x < matrix ; x++) { + // for (var y = 0; y < matrix ; y++) { + pos = x +","+ y + + if (grid[x-1] && grid[x][y] === 0) { + ;[ grid[x][y],grid[x-1][y] ] = [grid[x-1][y], grid[x][y] ] + $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) + } + } + } + + for (var x = 0 ; x < matrix ; x++) { + for (var y = 0; y < matrix ; y++) { + pos = x +","+ y + + if (grid[x-1] && grid[x][y] === 0) { + ;[ grid[x][y],grid[x-1][y] ] = [grid[x-1][y], grid[x][y] ] + $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) + } + + } + } + + for (var x = 0 ; x < matrix ; x++) { + for (var y = 0; y < matrix ; y++) { + + if (grid[x][y] === 0) { + pos = x +","+ y + grid[x][y] = generateColor() + $('.cell[data-position= "'+ pos +'"]').css('backgroundColor', grid[x][y]) + } + } + } + + if (checkForMatches() === 0 ) { + + alert('Level Complete!') + restart() + //console.log(grid) + } + } + // } + // } + // } + // console.log(grid) + // } + // function highlight(){ + // $(this).css('border', '0.5px solid red') + // } + + function generateColor() { + return colorList[Math.floor(Math.random() * colorList.length)] + } + + function restart() { + grid = [] + generateLevel() + } + + function resetAll() { + score = 0 + restart() + } + + function scoreboard() { + console.log(score) + $('h3').text('Score: ' + score) + } + + function bgChanger(){ + + var r = Math.floor(Math.random() * 255) + var g = Math.floor(Math.random() * 255) + var b = Math.floor(Math.random() * 255) + var $body = $('body') + var bgColorArray = "rgb("+r+","+g+","+b+")" + console.log(bgColorArray) + + $body.css('backgroundColor', bgColorArray) + //simple assignment => create random color within rbg + //2nd assignment => changing gradually + } + + + //generateLevel() + $('body').on('click', scoreboard) + $('button').on('click', resetAll) + setInterval(bgChanger,4000) + + + //$cell.on('mouseover', highlight) + + +}) diff --git a/index.html b/index.html index 5b002212..37deba21 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,38 @@ - + + + - +
+

Cubix

+

Match 3 colours in a row or column by clicking the first cube

+

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ +
+ +