Skip to content
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

Change Models, new Game Button and Score #4

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Change Models, new Game Button and Score #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
689fbcb
Change rotation, new Game Button and Score
Jun 19, 2017
87a3009
Adding Pause
Jun 20, 2017
87d9572
Update Readme
Jun 20, 2017
a2dc622
Cleaning up Code
Jul 6, 2017
50dd9c3
Code Cleanup
Jul 6, 2017
819f945
Code Cleanup
Jul 6, 2017
96e1583
Code Cleanup
Jul 6, 2017
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
13 changes: 13 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,23 @@
<link rel='stylesheet' href='style.css' />
</head>
<body>

<p></p>
<button id="newgame"> New Game</button>
<p></p>
<div style="font-weight: bold" id="score"> </div>
<p></p>
<audio id="clearsound" src="sound/pop.ogg" preload="auto"></audio>
<canvas width='300' height='600'></canvas>
<script src='js/tetris.js'></script>
<script src='js/controller.js'></script>
<script src='js/render.js'></script>


<div class="container">
<p>Press P to Pause</p>
<p>Press Spacebar to rotate Shape</p>
</div>

</body>
</html>
4 changes: 3 additions & 1 deletion js/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ document.body.onkeydown = function( e ) {
37: 'left',
39: 'right',
40: 'down',
38: 'rotate'
38: 'rotate',
32: 'rotate',
80: 'pause'
};
if ( typeof keys[ e.keyCode ] != 'undefined' ) {
keyPress( keys[ e.keyCode ] );
Expand Down
7 changes: 7 additions & 0 deletions js/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@ var ctx = canvas.getContext( '2d' );
var W = 300, H = 600;
var BLOCK_W = W / COLS, BLOCK_H = H / ROWS;


var score = 0;
var pause = false;
var button = document.getElementById( "newgame" );
button.addEventListener( "click", newGame );
Copy link
Owner

Choose a reason for hiding this comment

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

Use single quotes to be consistent with the rest of the coding style.



// draw a single square at (x, y)
function drawBlock( x, y ) {
ctx.fillRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 );
Expand Down
98 changes: 63 additions & 35 deletions js/tetris.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,34 @@ var lose;
var interval;
var current; // current moving shape
var currentX, currentY; // position of current shape

var shapes = [
[ 1, 1, 1, 1 ],
[ 1, 1, 1, 0,
1 ],
[ 1, 1, 1, 0,
0, 0, 1 ],
[ 1, 1, 0, 0,
1, 1 ],
[ 1, 1, 0, 0,
0, 1, 1 ],
[ 0, 1, 1, 0,
1, 1 ],
[ 0, 1, 0, 0,
1, 1, 1 ]

[0,0,0,0,
0,0,0,0,
1,1,1,1],

[0,0,0,0,
1,1,1,0,
1,0,0,0],

[0,0,0,0,
1,1,1,0,
0,0,1,0],

[0,0,0,0,
0,1,1,0,
0,1,1,0],

[0,0,0,0,
0,0,1,1,
0,1,1,0],

[0,0,0,0,
0,1,0,0,
1,1,1,0]


Copy link
Owner

Choose a reason for hiding this comment

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

Not sure why the 0's are necessary here?

Copy link
Author

@ghost ghost Jul 6, 2017 •
edited by ghost
Loading

Choose a reason for hiding this comment

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

For centering the objects and understanding

];
var colors = [
'cyan', 'orange', 'blue', 'yellow', 'red', 'green', 'purple'
Expand Down Expand Up @@ -59,19 +73,25 @@ function init() {

// keep the element moving down, creating new shapes and clearing lines
function tick() {
if ( valid( 0, 1 ) ) {
++currentY;

if(pause) {
Copy link
Owner

Choose a reason for hiding this comment

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

Use a space after if

return;
}
Copy link
Owner

Choose a reason for hiding this comment

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

Please be consistent in your indentation method

// if the element settled
else {
freeze();
clearLines();
if (lose) {
newGame();
return false;

if (valid(0, 1)) {
++currentY;
}
newShape();
}
// if the element settled
else {
freeze();
clearLines();
if (lose) {
newGame();
return false;
}
newShape();
}

}

// stop shape at its position and fix it to board
Expand All @@ -87,19 +107,19 @@ function freeze() {

// returns rotates the rotated shape 'current' perpendicularly anticlockwise
function rotate( current ) {
var newCurrent = [];
for ( var y = 0; y < 4; ++y ) {
newCurrent[ y ] = [];
for ( var x = 0; x < 4; ++x ) {
newCurrent[ y ][ x ] = current[ 3 - x ][ y ];
var newCurrent = [];
for (var y = 0; y < 4; ++y) {
newCurrent[y] = [];
for (var x = 0; x < 4; ++x) {
newCurrent[y][x] = current[3 - x][y];
}
}
Copy link
Owner

Choose a reason for hiding this comment

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

Not sure why you are making these changes? If you want to change the existing coding style into something else, please do so in a separate PR and do it across the whole project, not only incidentally.

}

return newCurrent;
}

// check if any lines are filled and clear them
function clearLines() {

Copy link
Owner

Choose a reason for hiding this comment

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

Do not begin a function with an empty line

for ( var y = ROWS - 1; y >= 0; --y ) {
var rowFilled = true;
for ( var x = 0; x < COLS; ++x ) {
Expand All @@ -109,6 +129,9 @@ function clearLines() {
}
}
if ( rowFilled ) {

score = score + 1;
document.getElementById("score").innerHTML = "Score: " + score.toString();
Copy link
Owner

Choose a reason for hiding this comment

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

use single quotes

document.getElementById( 'clearsound' ).play();
for ( var yy = y; yy > 0; --yy ) {
for ( var x = 0; x < COLS; ++x ) {
Expand All @@ -123,26 +146,29 @@ function clearLines() {
function keyPress( key ) {
switch ( key ) {
case 'left':
if ( valid( -1 ) ) {
if ( valid( -1 ) && !pause ) {
--currentX;
}
break;
case 'right':
if ( valid( 1 ) ) {
if ( valid( 1 ) && !pause ) {
++currentX;
}
break;
case 'down':
if ( valid( 0, 1 ) ) {
if ( valid( 0, 1 ) && !pause ) {
++currentY;
}
break;
case 'rotate':
var rotated = rotate( current );
if ( valid( 0, 0, rotated ) ) {
if ( valid( 0, 0, rotated ) && !pause ) {
Copy link
Owner

Choose a reason for hiding this comment

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

This code can be made simpler by moving the check for a pause key to the beginning of the function before the switch is ran. Then you won't need to repeat yourself in each case, as you can return early.

current = rotated;
}
break;
case 'pause':
pause = !pause;
break;
}
}

Expand Down Expand Up @@ -175,6 +201,8 @@ function valid( offsetX, offsetY, newCurrent ) {
}

function newGame() {
score = 0;
document.getElementById("score").innerHTML = "Score: " + score.toString();
Copy link
Owner

Choose a reason for hiding this comment

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

Move to renderer

Copy link
Author

@ghost ghost Jul 6, 2017 •
edited by ghost
Loading

Choose a reason for hiding this comment

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

Not sure how to move this to renderer without creating a reference anyway, since renderer doesn´t get information about a new Game or ?

Copy link
Owner

Choose a reason for hiding this comment

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

Yes, you need to create a reference. The score variable will need to live in tetris.js, but the HTML update will need to be in render.js. This makes for better architecture and modularity.

clearInterval(interval);
init();
newShape();
Expand Down
16 changes: 16 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,19 @@ canvas {
margin: auto;
border: 1px solid black;
}

div{
Copy link
Owner

Choose a reason for hiding this comment

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

space after div

font-family: sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
}

Button {
Copy link
Owner

Choose a reason for hiding this comment

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

lower-case button

display: block;
margin: auto;
}