Skip to content

added game difficulty, game gets harder every 500 points #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jsmankoo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added game difficulty, game gets harder every 500 points #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,514 changes: 1,224 additions & 1,290 deletions dist/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
"start": "webpack-dev-server",
"start:prod": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"has-flag": "^2.0.0",
"konva": "^1.0.3",
"material-ui": "^0.15.3",
"normalize.css": "^5.0.0",
"react": "^15.2.0",
"react-dom": "^15.2.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-konva": "^1.0.5",
"react-redux": "^4.4.5",
"react-tap-event-plugin": "^1.0.0",
Expand Down
41 changes: 25 additions & 16 deletions src/actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const MOVE_DOWN = 'MOVE_DOWN';
export const ADD_TETROMINO = 'ADD_TETROMINO';
export const PAUSE_GAME = 'PAUSE_GAME';
export const UNPAUSE_GAME = 'UNPAUSE_GAME';
export const DIFFICULTY = 'GAME_DIFFICULTY';

export const addTetromino = (currentTetromino, nextTetromino) => {
const { shapesMapping } = gameConstants;
Expand Down Expand Up @@ -89,6 +90,13 @@ export const rotateTetromino = () => (
}
}
);

function updateDifficulty() {
return {
type: DIFFICULTY,
};
}

export const moveTetromino = (direction) => (
function (dispatch, getState) {
const { activeTetrominos, currentTetromino, nextTetromino, gameStatus } = getState();
Expand All @@ -101,32 +109,32 @@ export const moveTetromino = (direction) => (
switch (direction) {
case 'left':
if (collisionCheck === false) {
dispatch(moveLeft());
}
dispatch(moveLeft());
}
return;
case 'right':
if (collisionCheck === false) {
dispatch(moveRight());
}
dispatch(moveRight());
}
return;
case 'down':
if (collisionCheck === false) {
dispatch(moveDown());
} else if (collisionCheck === GAME_OVER) {
dispatch(gameOver());
} else {
const clearedLines = getCompletedLines(activeTetrominos, currentTetromino).length;
dispatch(addScore(clearedLines));
dispatch(addTetromino(currentTetromino, nextTetromino));
}
dispatch(moveDown());
} else if (collisionCheck === GAME_OVER) {
dispatch(gameOver());
} else {
const clearedLines = getCompletedLines(activeTetrominos, currentTetromino).length;
dispatch(addScore(clearedLines));
dispatch(addTetromino(currentTetromino, nextTetromino));
}
return;
default:
return;
}
}
);
export const loadMenu = () => (
function(dispatch) {
function (dispatch) {
function handleSpaceBar(e) {
if (e.keyCode === 32) {
dispatch(loadGame());
Expand Down Expand Up @@ -167,7 +175,7 @@ export const loadGame = () => (
break;
}
}
//test request animation frame
// test request animation frame
dropTetromino(dispatch, Date.now(), getState);
window.addEventListener('keydown', handleMoving);
window.addEventListener('keydown', handleRotation);
Expand All @@ -176,8 +184,9 @@ export const loadGame = () => (

function dropTetromino(dispatch, startTime, getState) {
const currentTime = Date.now();
const { gameStatus } = getState();
if (currentTime - startTime >= 500 && gameStatus !== 'PAUSED' && gameStatus !== 'GAME_OVER') {
const { gameStatus, gameScore } = getState();

if (currentTime - startTime >= gameScore.difficulty && gameStatus !== 'PAUSED' && gameStatus !== 'GAME_OVER') {
startTime = currentTime;
dispatch(moveTetromino('down'));
}
Expand Down
14 changes: 8 additions & 6 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import { createStore, applyMiddleware } from 'redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import ReduxThunk from 'redux-thunk';
import Normalize from 'normalize.css';
import TetrisGame from './components/TetrisGame';
import TetrisApp from './reducers/index.js';

import 'normalize.css';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
TetrisApp,
applyMiddleware(ReduxThunk)
composeEnhancers(
applyMiddleware(ReduxThunk)
)
);

const App = () => (
Expand All @@ -22,6 +27,3 @@ const App = () => (

ReactDOM.render(<App />, document.getElementById('react-app'));




31 changes: 15 additions & 16 deletions src/components/GameField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,22 @@ import style from '../styles/styles.css';
const { fieldHeight, fieldWidth } = gameConstants;

let GameField = ({ isPlaying, isPaused, isGameOver }) => {
if (isPlaying) {
return (
<div style={{display: 'inline'}}>
<div className={style.gameField}>
<Stage width={fieldWidth} height={fieldHeight}>
<Layer>
<CurrentTetromino />
<ActiveTetrominos />
</Layer>
</Stage>
{ isPaused ? <Banner label="PAUSED" color="black" opacity=".5" /> : null}
</div>
{ isGameOver ? <Banner label="GAME OVER" color="red" opacity=".8" /> : null}
if (!isPlaying) return null;

return (
<div style={{ display: 'inline' }}>
<div className={style.gameField}>
<Stage width={fieldWidth} height={fieldHeight}>
<Layer>
<CurrentTetromino />
<ActiveTetrominos />
</Layer>
</Stage>
{isPaused ? <Banner label="PAUSED" color="black" opacity=".5" /> : null}
</div>
);
}
return null;
{isGameOver ? <Banner label="GAME OVER" color="red" opacity=".8" /> : null}
</div>
);
};

const mapStateToProps = ({ gameStatus }) => ({
Expand Down
48 changes: 32 additions & 16 deletions src/reducers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ function nextTetromino(state = {}, action) {
case actions.START_GAME:
case actions.ADD_TETROMINO:
return {
shape: tetrominos[action.nextRandomShape].shape,
name: action.nextRandomShape,
color: tetrominos[action.nextRandomShape].color,
offsetX: 10,
offsetY: blockUnit,
};
shape: tetrominos[action.nextRandomShape].shape,
name: action.nextRandomShape,
color: tetrominos[action.nextRandomShape].color,
offsetX: 10,
offsetY: blockUnit,
};
default:
return state;
}
Expand All @@ -48,12 +48,12 @@ function currentTetromino(state = {}, action) {
switch (action.type) {
case actions.START_GAME:
return {
shape: tetrominos[action.currentRandomShape].shape,
name: action.currentRandomShape,
color: tetrominos[action.currentRandomShape].color,
offsetX: blockUnit * 3,
offsetY: 0,
};
shape: tetrominos[action.currentRandomShape].shape,
name: action.currentRandomShape,
color: tetrominos[action.currentRandomShape].color,
offsetX: blockUnit * 3,
offsetY: 0,
};
case actions.ADD_TETROMINO:
return Object.assign({}, action.nextTetromino, { offsetX: blockUnit * 3, offsetY: 0 });
case actions.MOVE_RIGHT:
Expand All @@ -72,15 +72,30 @@ function gameScore(state = {}, action) {
switch (action.type) {
case actions.START_GAME:
return {
points: 0,
clearedLines: 0,
};
points: 0,
clearedLines: 0,
difficulty: 500,
difficultyPoints: 0,
};
case actions.ADD_SCORE:
return Object.assign({}, state, { points: action.points + state.points, clearedLines: action.clearedLines + state.clearedLines });
{
const delta = 100;
const difficultyPoints = action.points + state.difficultyPoints;
const difficulty = state.difficulty - 50 * Math.floor(difficultyPoints / delta);
Copy link
Owner

@slugo slugo Aug 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the calculation I'm referring to.


return Object.assign({}, state, {
points: action.points + state.points,
clearedLines: action.clearedLines + state.clearedLines,
difficulty,
difficultyPoints: difficultyPoints >= delta ? 0 : difficultyPoints,
});
}
default:
return state;
}
}


const tetrisApp = combineReducers({
activeTetrominos,
currentTetromino,
Expand All @@ -89,4 +104,5 @@ const tetrisApp = combineReducers({
gameStatus,
});


export default tetrisApp;