PolicyChanges/policychanges
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

completed srs, added dt cannon, lotta fixes

Browse Source
This commit is contained in:
PolicyChanges1@gmail.com 2021-02-23 16:56:54 -05:00
parent af1c9149d2
commit ed8abd95e0
8 changed files with 935 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -5,18 +5,18 @@
# [Tetrion](http://policychanges.github.io)
# Tetris
Tetris
This is a small html5 tetris game , written by pure javascript and html5 canvas,modular by browserify.
Just a practice, if you are interested in writing html5 games,check the code and have fun!
# Demo
Demo
[Tetris Game](http://sandywalker.github.io/Tetris/)
# License
License
# MIT © Sandy Duan
MIT © Sandy Duan

32
css/styles.css
View File

@ -2,25 +2,27 @@ html,body{
height:100%;
}
nav ul{height:200px; width:80%;}
nav ul{overflow:hidden; overflow-y:scroll;}
body{
background: #000000;
margin:0;
padding:0;
position: relative;
font-family: 'American Typewriter','Marker Felt';
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
}
#divbg {
pointer-events: none;
}
#bg {
pointer-events: none;
}
#tetris{
left:50%;
left:42%;
top:50%;
position: absolute;
background: #555;
background:rgba(.9,.9,.9,.60);
background:rgba(1,1,1,.10);
}
@ -29,7 +31,7 @@ body{
position: absolute;
background: #2f2f2f;
left:210px;
background:rgba(.9,.9,.9,.80);
background:rgba(1,1,1,.10);
}
@ -40,23 +42,27 @@ body{
left:0px;
width:210px;
text-align: center;
background:rgba(.9,.9,.9,.60);
background:rgba(1,1,1,.20);
}
#leftInfo{
height:100%;
width:210px;
overflow:hidden;
overflow-y:scroll;
height:200px;
width:200px;
margin:0 auto;
background:rgba(.9,.9,.9,.60);
background:rgba(255,255,255,.20);
}
#leftInfo ul {padding:2%;}
#hold{
position:relative;
width:80px;
height:435px;
background: #2f2f2f;
margin:10px auto;
background:rgba(.9,.9,.9,.60);
background:rgba(5,5,5,.60);
}
#gameOver{

479
dist/tetrion.js vendored
View File

@ -418,7 +418,6 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
module.exports = gamepadAPI;
},{}],4:[function(require,module,exports){
var gamepad = require('./gamepad.js');
var UserInputs = {
@ -610,6 +609,12 @@ var UserInputs = {
//}
},
keyDown(event) {
// Disable space scrolling etc
//if (event.keyCode === 32) {
event.preventDefault();
//}
this.keyboardKeys[event.keyCode] = true;
this.isKeyBoardKeyDown = true;
},
@ -801,6 +806,9 @@ Tetris.prototype = {
init: function(options) {
// Initialize function calls
//document.getElementById("TKIFonzieVar").onclick = function() { this._restartHandler() };
var cfg = this.config = utils.extend(options, defaults);
this.interval = consts.DEFAULT_INTERVAL;
@ -808,8 +816,8 @@ Tetris.prototype = {
views.init(this.id, cfg.maxWidth, cfg.maxHeight);
canvas.init(views.scene, views.preview, views.hold);
inputs.init();
//openers.init();
this.currentOpener = 0;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
this.reset();
setInterval(() => {this._processInput();}, 1);
@ -820,7 +828,19 @@ Tetris.prototype = {
},
setTKIFonzieVar: function()
{
this.reset();
this._restartHandler();
this.currentOpener = 1;
this._fireShape();
//this._update();
},
setDTCannonVar: function()
{
this._restartHandler();
this.currentOpener = 2;
this._fireShape();
//this._update();
},
//Reset game
reset: function() {
@ -829,12 +849,12 @@ Tetris.prototype = {
this.level = 1;
this.score = 0;
this.lines = 0;
this.currentMinoInx = 0;
this.startTime = new Date().getTime();
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.levelTime = this.startTime;
this.prevInputTime = this.startTime;
this.currentMinoInx = 0;
this.shapeQueue = [];
this.hintQueue = [];
this.holdQueue = [];
@ -851,7 +871,6 @@ Tetris.prototype = {
start: function() {
this.running = true;
window.requestAnimationFrame(utils.proxy(this._refresh, this));
//window.requestAnimationFrame(utils.proxy(this._refresh, this));}
},
//Pause game
@ -907,20 +926,31 @@ Tetris.prototype = {
//this.shape = this.shapeQueue.shift() || shapes.randomShape();
while(this.shapeQueue.length <= 4)
{
this.preparedShape = openers.getNextMino();
this.preparedShape = openers.getNextMino(this.currentOpener);
this.shapeQueue.push(this.preparedShape);
}
while(this.hintQueue.length <= 4)
{
this.preparedShape = openers.getNextHint(this.matrix);
this.preparedShape = openers.getNextHint(this.currentOpener);
this.hintQueue.push(this.preparedShape);
}
this.hintMino = this.hintQueue.shift();
this.shape = this.shapeQueue.shift();// shapes.randomShape();
this.currentMinoInx++;
if(this.currentMinoInx > openers.getLength()) {
this.hintQueue = [];
this.shapeQueue = [];
this._restartHandler();
this._fireShape();
}
// Reset matrix at successful end of opener
//if(this.shapeQueue.length == openers.length) {
// this.matrix = [];
@ -930,10 +960,6 @@ Tetris.prototype = {
this._draw();
},
/*_processCollisions: function {
},*/
// Draw game data
_draw: function() {
canvas.drawScene();
@ -1110,31 +1136,11 @@ Tetris.prototype = {
this.currentTime = new Date().getTime();
var curInputTime = new Date().getTime();
var prevCounterTime = curInputTime;
var deltaInputTime = 0;
var deltaCounterTime = 0;
// Process input as many times as possible in a frame--60hz hopefully
/*while(deltaCounterTime <= 16) { // 16.666ms = 1 frame
deltaCounterTime = curInputTime - prevCounterTime;
deltaInputTime = curInputTime - this.prevInputTime;
this._processInput(deltaInputTime);
await this.sleep(1);
curInputTime = new Date().getTime();
}*/
this.prevInputTime = curInputTime;
var deltaLevelTime = this.currentTime - this.prevTime;
//this._processInput(deltaLevelTime);
//if(deltaGameTime < 16) this._refresh();
// Render Level
if (deltaLevelTime > this.interval) {
this._update();
@ -1155,10 +1161,6 @@ Tetris.prototype = {
new Audio('./dist/Failed.ogg').play();
this._restartHandler();
}
/*if(this.shape.y != this.hintMino.y || this.shape.x != this.hintMino.x) {
//new Audio('./dist/Failed.ogg').play();
this._restartHandler();
}*/
},
// Update game data
_update: function() {
@ -1264,52 +1266,6 @@ window.Tetris = Tetris;
},{"./canvas.js":1,"./consts.js":2,"./input.js":4,"./openers.js":6,"./shapes.js":7,"./utils.js":8,"./views.js":9}],6:[function(require,module,exports){
var shapes = require("./shapes.js");
/*
function TKI3FonzieVariation() {
this.shapeQueue = new Array(7);
this.shapeQueue.push(new shapes.ShapeL());
this.shapeQueue.push(new shapes.ShapeI());
this.shapeQueue.push(new shapes.ShapeO());
this.shapeQueue.push(new shapes.ShapeZR());
this.shapeQueue.push(new shapes.ShapeZ());
this.shapeQueue.push(new shapes.ShapeLR());
this.shapeQueue.push(new shapes.ShapeT());
//this.hintShapeQueue = [];
}
TKI3FonzieVariation.prototype = {
getShapeQueue: function () {
return this.shapeQueue;
}
getHintQueue: function() {
this.hintShapeQueue.push(new shapes.ShapeL());
this.hintShapeQueue.push(new shapes.ShapeI());
this.hintShapeQueue.push(new shapes.ShapeO());
this.hintShapeQueue.push(new shapes.ShapeZR());
this.hintShapeQueue.push(new shapes.ShapeZ());
this.hintShapeQueue.push(new shapes.ShapeLR());
this.hintShapeQueue.push(new shapes.ShapeT());
return this.hintShapeQueue;
},
init: function () {
//todo: switch to queue builder
//this.getShapeQueue();
//this.getHintQueue();
}
//hintShape
}
*/
// L O Z T LR/J ZR/S I
var OpenerGenerator = {
shapeQueue: [],
hintQueue: [],
@ -1317,18 +1273,26 @@ var OpenerGenerator = {
hintIdx: 0,
isInit: 0,
isHintInit: 0,
init() {
// Current Tetriminos
init(opener) {
if(!this.isInit || this.shapeQueue == undefined) {
switch(opener) {
case 0:
case 1:
// Fonzie Variation
this.shapeQueue = new Array(
/*
shapes.getShape(0),
shapes.getShape(6),
shapes.getShape(1),
shapes.getShape(5),
shapes.getShape(2),
shapes.getShape(4),
shapes.getShape(3));*/
// O I L S J Z T O I L J T O T
shapes.getShape(3));
break;
case 2:
// DTCannon -- O I L S J Z T O I L J T O T
this.shapeQueue = new Array(
shapes.getShape(1),
shapes.getShape(6),
shapes.getShape(0),
@ -1343,14 +1307,19 @@ var OpenerGenerator = {
shapes.getShape(3),
shapes.getShape(1),
shapes.getShape(3));
break;
default:
return;
}
}
this.isInit = 1;
return;
},
getNextMino() {
this.init();
getNextMino(opener) {
this.init(opener);
var mino = this.shapeQueue[this.idx];
this.idx++;
if(this.idx == this.shapeQueue.length) {
@ -1360,9 +1329,15 @@ var OpenerGenerator = {
return mino;
},
// L O Z T LR ZR I
/* initHint(matrix) {
// Hint Tetrimions
initHint(opener) {
if(!this.isHintInit || this.hintQueue == undefined) {
switch(opener) {
case 0:
case 1:
// Fonzie Variation
this.hintQueue = new Array(
shapes.getShape(0),
shapes.getShape(6),
@ -1397,27 +1372,12 @@ var OpenerGenerator = {
// T
this.hintQueue[6].x = 1;
this.hintQueue[6].y = 17;
this.hintQueue[6].state = this.hintQueue[6].nextState(1)
this.hintQueue[6].state = this.hintQueue[6].nextState(1)
this.hintQueue[6].state = this.hintQueue[6].nextState(2);
}
this.isHintInit = 1;
return;
},*/
// L O Z T LR ZR I
initHint(matrix) {
if(!this.isHintInit || this.hintQueue == undefined) {
break;
case 2:
this.hintQueue = new Array(
/*shapes.getShape(0),
shapes.getShape(6),
shapes.getShape(1),
shapes.getShape(5),
shapes.getShape(2),
shapes.getShape(4),
shapes.getShape(3)
*/
shapes.getShape(1),
shapes.getShape(6),
shapes.getShape(0),
@ -1433,16 +1393,13 @@ var OpenerGenerator = {
shapes.getShape(1),
shapes.getShape(3));
// O I L S J Z T O I L J T O T
// DT Cannon -- O I L S J Z T O I L J T O T
// O
this.hintQueue[0].x = -2;
this.hintQueue[0].y = 18;
// I
this.hintQueue[1].x = 6;
this.hintQueue[1].y = 16;
//this.hintQueue[1].state = this.hintQueue[1].nextState(1);
// L
this.hintQueue[2].x = 6;
this.hintQueue[2].y = 17;
@ -1455,57 +1412,55 @@ var OpenerGenerator = {
this.hintQueue[4].x = 4;
this.hintQueue[4].y = 17;
this.hintQueue[4].state = this.hintQueue[4].nextState(-1);
// Z
this.hintQueue[5].x = 3;
this.hintQueue[5].y = 17;
this.hintQueue[5].state = this.hintQueue[5].nextState(2);
this.hintQueue[5].state = this.hintQueue[5].nextState(3);
// T
this.hintQueue[6].x = 3;
this.hintQueue[6].y = 15;
// O
this.hintQueue[7].x = 5;
this.hintQueue[7].y = 15;
// I
this.hintQueue[8].x = 9;
this.hintQueue[8].y = 14;
//this.hintQueue[8].state = this.hintQueue[8].nextState(1);
// L
this.hintQueue[9].x = 2;
this.hintQueue[9].y = 13;
this.hintQueue[9].state = this.hintQueue[9].nextState(-1);
// J
this.hintQueue[10].x = -1;
this.hintQueue[10].y = 15;
this.hintQueue[10].state = this.hintQueue[10].nextState(1);
// T
this.hintQueue[11].x = 1;
this.hintQueue[11].y = 16;
this.hintQueue[11].state = this.hintQueue[11].nextState(2);
// O
this.hintQueue[12].x = 3;
this.hintQueue[12].y = 16;
this.hintQueue[12].state = this.hintQueue[12].nextState(1);
// T
this.hintQueue[13].x = 1;
this.hintQueue[13].y = 17;
this.hintQueue[13].state = this.hintQueue[13].nextState(-1);
break;
default:
return;
}
}
this.isHintInit = 1;
return;
},
getNextHint(matrix) {
this.initHint(matrix);
// End initHint
getNextHint(opener) {
this.initHint(opener);
var mino = this.hintQueue[this.hintIdx];
this.hintIdx++;
if(this.hintIdx == this.hintQueue.length) {
@ -1514,6 +1469,7 @@ var OpenerGenerator = {
}
return mino;
},
reset() {
this.shapeQueue = [];
this.hintQueue = [];
@ -1521,6 +1477,9 @@ var OpenerGenerator = {
this.hintIdx = 0;
this.isInit = 0;
this.isHintInit = 0;
},
getLength() {
return this.hintQueue.length;
}
};
@ -1528,16 +1487,20 @@ function reset() {
OpenerGenerator.reset();
}
function getNextMino() {
var mino = OpenerGenerator.getNextMino();
function getNextMino(opener) {
var mino = OpenerGenerator.getNextMino(opener);
return mino;
}
function getNextHint(matrix) {
var mino = OpenerGenerator.getNextHint(matrix);
function getNextHint(opener) {
var mino = OpenerGenerator.getNextHint(opener);
return mino;
}
function getLength() {
return OpenerGenerator.getLength();
}
module.exports.getNextMino = getNextMino;
module.exports.getNextHint = getNextHint;
module.exports.getLength = getLength;
module.exports.reset = reset;
@ -1559,21 +1522,18 @@ function ShapeL() {
[0, 0, 0, 0],
[0, 0, 0, 0]
];
var state2 = [
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
];
var state3 = [
[0, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 0],
[0, 0, 0, 0]
];
var state4 = [
[1, 1, 0, 0],
[0, 1, 0, 0],
@ -1581,6 +1541,38 @@ function ShapeL() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -3;
@ -1617,6 +1609,36 @@ function ShapeLR() {
[0, 0, 0, 0]
];
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2,
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -3;
@ -1651,8 +1673,38 @@ function ShapeO() {
[0, 0, 0, 0]
];
this.states = [state1];
this.x = 4;
var state1RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 2;
this.y = -2;
this.originY = -2;
this.flag = 'O';
@ -1689,8 +1741,39 @@ function ShapeI() {
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
];1
];
var state1RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -2, 0,
2, 0, 1, 0,
-1, 2, -2, -1,
2, -1, 1, 2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
2, 0, -1, 0,
-1, 0, 2, 0,
2, 1, -1, 2,
-1, -2, 2, -1
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 2, 0,
-2, 0, -1, 0,
1, -2, 2, 1,
-2, 1, -1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-2, 0, 1, 0,
1, 0, -2, 0,
-2, -1, 1, -2,
1, 2, -2, 1
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 5;
@ -1755,34 +1838,8 @@ function ShapeT() {
-1, 2, -1, 2
];
var side1 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side2 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side3 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side4 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.sides = [side1, side2, side4, side4];
this.x = 4;
this.y = -2;
@ -1804,9 +1861,9 @@ function ShapeZ() {
[0, 0, 0, 0]
];
var state3 = [
[0, 1, 0, 0],
[0, 0, 0, 0],
[1, 1, 0, 0],
[1, 0, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
];
var state4 = [
@ -1816,6 +1873,38 @@ function ShapeZ() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -2;
@ -1849,6 +1938,38 @@ function ShapeZR() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -2
@ -2071,32 +2192,32 @@ ShapeZR.prototype = {
//Rotate shape
rotate: function(matrix) {
// TODO: rest of pieces
if(this.flag == 'T')
//if(this.flag == 'T' || this.flag == 'L')
this.kickShape(matrix, -1);
else if (isShapeCanMove(this, matrix, 'rotate')){
this.state = this.nextState(-1);
//else if (isShapeCanMove(this, matrix, 'rotate')){
//this.state = this.nextState(-1);
//fix position if shape is out of right border
var right = this.getRight();
if ( right >= COLUMN_COUNT){
this.x -= right - COLUMN_COUNT + 1;
}
//var right = this.getRight();
//if ( right >= COLUMN_COUNT){
// this.x -= right - COLUMN_COUNT + 1;
//}
/*var left = this.getLeft();
if(left <= 0)
this.x += 1;*/
}
//}
},
//Rotate shape clockwise
rotateClockwise: function(matrix) {
if(this.flag == 'T')
//if(this.flag == 'T')
this.kickShape(matrix, 1);
else if (isShapeCanMove(this, matrix, 'rotateclockwise')) {
this.state = this.nextState(1);
//else if (isShapeCanMove(this, matrix, 'rotateclockwise')) {
//this.state = this.nextState(1);
//fix position if shape is out of right border
var right = this.getRight();
if (right >= COLUMN_COUNT) {
this.x -= right - COLUMN_COUNT + 1;
}
}
//var right = this.getRight();
//if (right >= COLUMN_COUNT) {
// this.x -= right - COLUMN_COUNT + 1;
//}
//}
},
//Caculate the max column of the shape
getColumnCount: function() {

98
index.html
View File

@ -26,59 +26,89 @@
<title>Tetrion Opening Trainer</title>
<link rel="stylesheet" href="css/styles.css">
<script>
function setOpener() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--insert shadertoy background-->
<!--https://www.shadertoy.com/embed/wttfW2?gui=&t=10&paused=false&muted=false-->
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&t=10&paused=false&muted=false" allowfullscreen></iframe>
<div id="divbg">
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe>
<script>
document.getElementById("bg").width = window.innerWidth;
document.getElementById("bg").height = window.innerHeight;
//document.getElementById("bg").setAttribute("tabIndex", "-1");
//document.getElementById("divbg").setAttribute("tabIndex", "-1");
document.getElementById("bg").removeAttribute("tabIndex");
document.getElementById("divbg").removeAttribute("tabIndex");
</script>
</div>
<div id="tetris">
<canvas id="scene"></canvas>
<div id="leftSide">
<div id="leftInfo">
<!--<header>header area</header>-->
<nav>
<ul>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Fonzie variation) </a></li>
<!--<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Flat Top variation) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Castle Top variation) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Ajanba TSD </a></li> -->
<li style="font-size:12px";><a href="#" id="setTKIDTCannonVar">DT Cannon (LS / JZ base)</a></li>
<!--<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">MKO Stacking</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Pokemino's STD </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Mr. T-Spin's STD (reversed) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Hachispin</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Albatross</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Number One </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Pelican</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">DT Cannon (TSZ base) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">BT Cannon </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">C-Spin </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Hummingbird</a></li>-->
<ul style="font-size:16px;color:dodgerblue;text-align:left;" id="Openers">Openers:
<ul style="font-size:14px;color:powderblue;text-align:left;" id="TSpinOpeners">T-Spin Openers:
<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyIPiece">Early I Piece:
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setTKIFonzieVar">TKI 3 (Fonzie variation) </a></li>
<li style="font-size:12px;padding-left:1em;";><a href="#" id="setTKIFTVar">TKI 3 (Flat Top variation) </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setTKICTVar">TKI 3 (Castle Top variation) </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setAjanbaTSDVar">Ajanba TSD </a></li>
</ul>
<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early L or J Piece:
<li style="font-size:12px;padding-left:1em";><a href="#" id="setDTCannonVar">DT Cannon (LS / JZ base)</a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setMKOStackingVar">MKO Stacking</a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setPokeminosSTD Var">Pokemino's STD </a></li>
</ul>
<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early O Piece:
<li style="font-size:12px;padding-left:1em";><a href="#" id="setMrTSpinsSTDreversedVar">Mr. T-Spin's STD (reversed) </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setHachispinVar">Hachispin</a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setAlbatrossVar">Albatross</a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setNumberOneVar">Number One </a></li>
</ul>
<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlySZOrJPiece">Early S, Z, or T Piece:
<li style="font-size:12px;padding-left:1em";><a href="#" id="setPelicanVar">Pelican</a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setDTCannonTSZbaseVar">DT Cannon (TSZ base) </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setBTCannonVar">BT Cannon </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setCSpinVar">C-Spin </a></li>
<li style="font-size:12px;padding-left:1em";><a href="#" id="setHummingbirdVar">Hummingbird</a></li>
</ul>
</ul>
</nav>
<!-- <footer>footer area</footer>-->
<!--
<ul style="font-size:14px;color:powderblue;text-align:left;" id="ComboOpeners">Combo Openers
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setTKIFonzieVar">Side 4 Wide </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setTKIFonzieVar">Center 4 Wide </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setTKIFonzieVar">6 Residuals </a></li>
</ul>
-->
<ul style="font-size:16px;color:dodgerblue;text-align:left;" >
<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="setPCOpenersVar">Perfect Clear Openers:
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setStdPCOpenerVar">The Standard PC Opener </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setSecondPCVar">Second Perfect Clear </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setLoJVar">Either L or J </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setLnJVar">Neither L nor J </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setLaJVar">Both L and J </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setPCTPieceVar">T piece </a></li>
<li style="font-size:12px;padding-left:1em;"><a href="#" id="setSAVar">see also </a></li>
</ul>
</ul>
</ul>
</div>
<canvas id="hold"></canvas>
</div>
<div id="gameOver">
<h1>Game Over !</h1>
<h3>Score: <span id="finalScore">0</span></h3>
@ -101,8 +131,12 @@ document.getElementById("bg").height = window.innerHeight;
<script src="dist/tetrion.js"></script>
<script>
(function(){
var tetris = new Tetris('tetris');
tetris.start();
var tetrion = new Tetris('tetris');
document.getElementById("setTKIFonzieVar").addEventListener("click", function() { tetrion.setTKIFonzieVar(); } );
document.getElementById("setDTCannonVar").addEventListener("click", function() { tetrion.setDTCannonVar(); } );
tetrion.start();
})();
</script>
</html>

7
src/input.js
View File

@ -1,4 +1,3 @@
var gamepad = require('./gamepad.js');
var UserInputs = {
@ -190,6 +189,12 @@ var UserInputs = {
//}
},
keyDown(event) {
// Disable space scrolling etc
//if (event.keyCode === 32) {
event.preventDefault();
//}
this.keyboardKeys[event.keyCode] = true;
this.isKeyBoardKeyDown = true;
},

65
src/main.js
View File

@ -142,6 +142,9 @@ Tetris.prototype = {
init: function(options) {
// Initialize function calls
//document.getElementById("TKIFonzieVar").onclick = function() { this._restartHandler() };
var cfg = this.config = utils.extend(options, defaults);
this.interval = consts.DEFAULT_INTERVAL;
@ -149,8 +152,8 @@ Tetris.prototype = {
views.init(this.id, cfg.maxWidth, cfg.maxHeight);
canvas.init(views.scene, views.preview, views.hold);
inputs.init();
//openers.init();
this.currentOpener = 0;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
this.reset();
setInterval(() => {this._processInput();}, 1);
@ -161,7 +164,19 @@ Tetris.prototype = {
},
setTKIFonzieVar: function()
{
this.reset();
this._restartHandler();
this.currentOpener = 1;
this._fireShape();
//this._update();
},
setDTCannonVar: function()
{
this._restartHandler();
this.currentOpener = 2;
this._fireShape();
//this._update();
},
//Reset game
reset: function() {
@ -170,12 +185,12 @@ Tetris.prototype = {
this.level = 1;
this.score = 0;
this.lines = 0;
this.currentMinoInx = 0;
this.startTime = new Date().getTime();
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.levelTime = this.startTime;
this.prevInputTime = this.startTime;
this.currentMinoInx = 0;
this.shapeQueue = [];
this.hintQueue = [];
this.holdQueue = [];
@ -192,7 +207,6 @@ Tetris.prototype = {
start: function() {
this.running = true;
window.requestAnimationFrame(utils.proxy(this._refresh, this));
//window.requestAnimationFrame(utils.proxy(this._refresh, this));}
},
//Pause game
@ -248,20 +262,31 @@ Tetris.prototype = {
//this.shape = this.shapeQueue.shift() || shapes.randomShape();
while(this.shapeQueue.length <= 4)
{
this.preparedShape = openers.getNextMino();
this.preparedShape = openers.getNextMino(this.currentOpener);
this.shapeQueue.push(this.preparedShape);
}
while(this.hintQueue.length <= 4)
{
this.preparedShape = openers.getNextHint(this.matrix);
this.preparedShape = openers.getNextHint(this.currentOpener);
this.hintQueue.push(this.preparedShape);
}
this.hintMino = this.hintQueue.shift();
this.shape = this.shapeQueue.shift();// shapes.randomShape();
this.currentMinoInx++;
if(this.currentMinoInx > openers.getLength()) {
this.hintQueue = [];
this.shapeQueue = [];
this._restartHandler();
this._fireShape();
}
// Reset matrix at successful end of opener
//if(this.shapeQueue.length == openers.length) {
// this.matrix = [];
@ -271,10 +296,6 @@ Tetris.prototype = {
this._draw();
},
/*_processCollisions: function {
},*/
// Draw game data
_draw: function() {
canvas.drawScene();
@ -451,31 +472,11 @@ Tetris.prototype = {
this.currentTime = new Date().getTime();
var curInputTime = new Date().getTime();
var prevCounterTime = curInputTime;
var deltaInputTime = 0;
var deltaCounterTime = 0;
// Process input as many times as possible in a frame--60hz hopefully
/*while(deltaCounterTime <= 16) { // 16.666ms = 1 frame
deltaCounterTime = curInputTime - prevCounterTime;
deltaInputTime = curInputTime - this.prevInputTime;
this._processInput(deltaInputTime);
await this.sleep(1);
curInputTime = new Date().getTime();
}*/
this.prevInputTime = curInputTime;
var deltaLevelTime = this.currentTime - this.prevTime;
//this._processInput(deltaLevelTime);
//if(deltaGameTime < 16) this._refresh();
// Render Level
if (deltaLevelTime > this.interval) {
this._update();
@ -496,10 +497,6 @@ Tetris.prototype = {
new Audio('./dist/Failed.ogg').play();
this._restartHandler();
}
/*if(this.shape.y != this.hintMino.y || this.shape.x != this.hintMino.x) {
//new Audio('./dist/Failed.ogg').play();
this._restartHandler();
}*/
},
// Update game data
_update: function() {

149
src/openers.js
View File

@ -1,51 +1,5 @@
var shapes = require("./shapes.js");
/*
function TKI3FonzieVariation() {
this.shapeQueue = new Array(7);
this.shapeQueue.push(new shapes.ShapeL());
this.shapeQueue.push(new shapes.ShapeI());
this.shapeQueue.push(new shapes.ShapeO());
this.shapeQueue.push(new shapes.ShapeZR());
this.shapeQueue.push(new shapes.ShapeZ());
this.shapeQueue.push(new shapes.ShapeLR());
this.shapeQueue.push(new shapes.ShapeT());
//this.hintShapeQueue = [];
}
TKI3FonzieVariation.prototype = {
getShapeQueue: function () {
return this.shapeQueue;
}
getHintQueue: function() {
this.hintShapeQueue.push(new shapes.ShapeL());
this.hintShapeQueue.push(new shapes.ShapeI());
this.hintShapeQueue.push(new shapes.ShapeO());
this.hintShapeQueue.push(new shapes.ShapeZR());
this.hintShapeQueue.push(new shapes.ShapeZ());
this.hintShapeQueue.push(new shapes.ShapeLR());
this.hintShapeQueue.push(new shapes.ShapeT());
return this.hintShapeQueue;
},
init: function () {
//todo: switch to queue builder
//this.getShapeQueue();
//this.getHintQueue();
}
//hintShape
}
*/
// L O Z T LR/J ZR/S I
var OpenerGenerator = {
shapeQueue: [],
hintQueue: [],
@ -53,18 +7,26 @@ var OpenerGenerator = {
hintIdx: 0,
isInit: 0,
isHintInit: 0,
init() {
// Current Tetriminos
init(opener) {
if(!this.isInit || this.shapeQueue == undefined) {
switch(opener) {
case 0:
case 1:
// Fonzie Variation
this.shapeQueue = new Array(
/*
shapes.getShape(0),
shapes.getShape(6),
shapes.getShape(1),
shapes.getShape(5),
shapes.getShape(2),
shapes.getShape(4),
shapes.getShape(3));*/
// O I L S J Z T O I L J T O T
shapes.getShape(3));
break;
case 2:
// DTCannon -- O I L S J Z T O I L J T O T
this.shapeQueue = new Array(
shapes.getShape(1),
shapes.getShape(6),
shapes.getShape(0),
@ -79,14 +41,19 @@ var OpenerGenerator = {
shapes.getShape(3),
shapes.getShape(1),
shapes.getShape(3));
break;
default:
return;
}
}
this.isInit = 1;
return;
},
getNextMino() {
this.init();
getNextMino(opener) {
this.init(opener);
var mino = this.shapeQueue[this.idx];
this.idx++;
if(this.idx == this.shapeQueue.length) {
@ -96,9 +63,15 @@ var OpenerGenerator = {
return mino;
},
// L O Z T LR ZR I
/* initHint(matrix) {
// Hint Tetrimions
initHint(opener) {
if(!this.isHintInit || this.hintQueue == undefined) {
switch(opener) {
case 0:
case 1:
// Fonzie Variation
this.hintQueue = new Array(
shapes.getShape(0),
shapes.getShape(6),
@ -133,27 +106,12 @@ var OpenerGenerator = {
// T
this.hintQueue[6].x = 1;
this.hintQueue[6].y = 17;
this.hintQueue[6].state = this.hintQueue[6].nextState(1)
this.hintQueue[6].state = this.hintQueue[6].nextState(1)
this.hintQueue[6].state = this.hintQueue[6].nextState(2);
}
this.isHintInit = 1;
return;
},*/
// L O Z T LR ZR I
initHint(matrix) {
if(!this.isHintInit || this.hintQueue == undefined) {
break;
case 2:
this.hintQueue = new Array(
/*shapes.getShape(0),
shapes.getShape(6),
shapes.getShape(1),
shapes.getShape(5),
shapes.getShape(2),
shapes.getShape(4),
shapes.getShape(3)
*/
shapes.getShape(1),
shapes.getShape(6),
shapes.getShape(0),
@ -169,16 +127,13 @@ var OpenerGenerator = {
shapes.getShape(1),
shapes.getShape(3));
// O I L S J Z T O I L J T O T
// DT Cannon -- O I L S J Z T O I L J T O T
// O
this.hintQueue[0].x = -2;
this.hintQueue[0].y = 18;
// I
this.hintQueue[1].x = 6;
this.hintQueue[1].y = 16;
//this.hintQueue[1].state = this.hintQueue[1].nextState(1);
// L
this.hintQueue[2].x = 6;
this.hintQueue[2].y = 17;
@ -191,57 +146,55 @@ var OpenerGenerator = {
this.hintQueue[4].x = 4;
this.hintQueue[4].y = 17;
this.hintQueue[4].state = this.hintQueue[4].nextState(-1);
// Z
this.hintQueue[5].x = 3;
this.hintQueue[5].y = 17;
this.hintQueue[5].state = this.hintQueue[5].nextState(2);
this.hintQueue[5].state = this.hintQueue[5].nextState(3);
// T
this.hintQueue[6].x = 3;
this.hintQueue[6].y = 15;
// O
this.hintQueue[7].x = 5;
this.hintQueue[7].y = 15;
// I
this.hintQueue[8].x = 9;
this.hintQueue[8].y = 14;
//this.hintQueue[8].state = this.hintQueue[8].nextState(1);
// L
this.hintQueue[9].x = 2;
this.hintQueue[9].y = 13;
this.hintQueue[9].state = this.hintQueue[9].nextState(-1);
// J
this.hintQueue[10].x = -1;
this.hintQueue[10].y = 15;
this.hintQueue[10].state = this.hintQueue[10].nextState(1);
// T
this.hintQueue[11].x = 1;
this.hintQueue[11].y = 16;
this.hintQueue[11].state = this.hintQueue[11].nextState(2);
// O
this.hintQueue[12].x = 3;
this.hintQueue[12].y = 16;
this.hintQueue[12].state = this.hintQueue[12].nextState(1);
// T
this.hintQueue[13].x = 1;
this.hintQueue[13].y = 17;
this.hintQueue[13].state = this.hintQueue[13].nextState(-1);
break;
default:
return;
}
}
this.isHintInit = 1;
return;
},
getNextHint(matrix) {
this.initHint(matrix);
// End initHint
getNextHint(opener) {
this.initHint(opener);
var mino = this.hintQueue[this.hintIdx];
this.hintIdx++;
if(this.hintIdx == this.hintQueue.length) {
@ -250,6 +203,7 @@ var OpenerGenerator = {
}
return mino;
},
reset() {
this.shapeQueue = [];
this.hintQueue = [];
@ -257,6 +211,9 @@ var OpenerGenerator = {
this.hintIdx = 0;
this.isInit = 0;
this.isHintInit = 0;
},
getLength() {
return this.hintQueue.length;
}
};
@ -264,15 +221,19 @@ function reset() {
OpenerGenerator.reset();
}
function getNextMino() {
var mino = OpenerGenerator.getNextMino();
function getNextMino(opener) {
var mino = OpenerGenerator.getNextMino(opener);
return mino;
}
function getNextHint(matrix) {
var mino = OpenerGenerator.getNextHint(matrix);
function getNextHint(opener) {
var mino = OpenerGenerator.getNextHint(opener);
return mino;
}
function getLength() {
return OpenerGenerator.getLength();
}
module.exports.getNextMino = getNextMino;
module.exports.getNextHint = getNextHint;
module.exports.getLength = getLength;
module.exports.reset = reset;

258
src/shapes.js
View File

@ -15,21 +15,18 @@ function ShapeL() {
[0, 0, 0, 0],
[0, 0, 0, 0]
];
var state2 = [
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
];
var state3 = [
[0, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 0],
[0, 0, 0, 0]
];
var state4 = [
[1, 1, 0, 0],
[0, 1, 0, 0],
@ -37,6 +34,38 @@ function ShapeL() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -3;
@ -73,6 +102,36 @@ function ShapeLR() {
[0, 0, 0, 0]
];
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2,
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -3;
@ -107,8 +166,38 @@ function ShapeO() {
[0, 0, 0, 0]
];
this.states = [state1];
this.x = 4;
var state1RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 2;
this.y = -2;
this.originY = -2;
this.flag = 'O';
@ -145,8 +234,39 @@ function ShapeI() {
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
];1
];
var state1RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -2, 0,
2, 0, 1, 0,
-1, 2, -2, -1,
2, -1, 1, 2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
2, 0, -1, 0,
-1, 0, 2, 0,
2, 1, -1, 2,
-1, -2, 2, -1
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 2, 0,
-2, 0, -1, 0,
1, -2, 2, 1,
-2, 1, -1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-2, 0, 1, 0,
1, 0, -2, 0,
-2, -1, 1, -2,
1, 2, -2, 1
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 5;
@ -211,34 +331,8 @@ function ShapeT() {
-1, 2, -1, 2
];
var side1 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side2 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side3 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
var side4 = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[1, 0, 1, 0],
[0, 0, 0, 0]
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.sides = [side1, side2, side4, side4];
this.x = 4;
this.y = -2;
@ -260,9 +354,9 @@ function ShapeZ() {
[0, 0, 0, 0]
];
var state3 = [
[0, 1, 0, 0],
[0, 0, 0, 0],
[1, 1, 0, 0],
[1, 0, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
];
var state4 = [
@ -272,6 +366,38 @@ function ShapeZ() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -2;
@ -305,6 +431,38 @@ function ShapeZR() {
[0, 0, 0, 0]
];
// Rotation point offsets: clockwise<point1, point2>, counterclockwise<point3, point4>, <newline>
// In guidline Tetris each piece has 5 possible rotation points with respect to each state/orientation. Iterate through all every rotation.
var state1RotationPointsOffset = [
0, 0, 0, 0,
1, 0, -1, 0,
1, 1, -1, 1,
0, -2, 0, -2,
1, -2, -1, -2
];
var state2RotationPointsOffset = [
0, 0, 0, 0,
1, 0, 1, 0,
1, -1, 1, -1,
0, 2, 0, 2,
1, 2, 1, 2
];
var state3RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, 1, 0,
-1, 1, 1, 1,
0, -2, 0, -2,
-1, -2, 1, -2
];
var state4RotationPointsOffset = [
0, 0, 0, 0,
-1, 0, -1, 0,
-1, -1, -1, -1,
0, 2, 0, 2,
-1, 2, -1, 2
];
this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
this.states = [state1, state2, state3, state4];
this.x = 4;
this.y = -2
@ -527,32 +685,32 @@ ShapeZR.prototype = {
//Rotate shape
rotate: function(matrix) {
// TODO: rest of pieces
if(this.flag == 'T')
//if(this.flag == 'T' || this.flag == 'L')
this.kickShape(matrix, -1);
else if (isShapeCanMove(this, matrix, 'rotate')){
this.state = this.nextState(-1);
//else if (isShapeCanMove(this, matrix, 'rotate')){
//this.state = this.nextState(-1);
//fix position if shape is out of right border
var right = this.getRight();
if ( right >= COLUMN_COUNT){
this.x -= right - COLUMN_COUNT + 1;
}
//var right = this.getRight();
//if ( right >= COLUMN_COUNT){
// this.x -= right - COLUMN_COUNT + 1;
//}
/*var left = this.getLeft();
if(left <= 0)
this.x += 1;*/
}
//}
},
//Rotate shape clockwise
rotateClockwise: function(matrix) {
if(this.flag == 'T')
//if(this.flag == 'T')
this.kickShape(matrix, 1);
else if (isShapeCanMove(this, matrix, 'rotateclockwise')) {
this.state = this.nextState(1);
//else if (isShapeCanMove(this, matrix, 'rotateclockwise')) {
//this.state = this.nextState(1);
//fix position if shape is out of right border
var right = this.getRight();
if (right >= COLUMN_COUNT) {
this.x -= right - COLUMN_COUNT + 1;
}
}
//var right = this.getRight();
//if (right >= COLUMN_COUNT) {
// this.x -= right - COLUMN_COUNT + 1;
//}
//}
},
//Caculate the max column of the shape
getColumnCount: function() {