disabled openers for now. added disable background.
parent
4556a33818
commit
fc9d7ca801
|
@ -2,12 +2,16 @@ html,body{
|
||||||
height:100%;
|
height:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ul{height:200px; width:80%;}
|
||||||
|
nav ul{overflow:hidden; overflow-y:scroll;}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
background: #3f3f3f;
|
background: #3f3f3f;
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-family: 'American Typewriter','Marker Felt';
|
font-family: 'American Typewriter','Marker Felt';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tetris{
|
#tetris{
|
||||||
|
@ -15,7 +19,7 @@ body{
|
||||||
top:50%;
|
top:50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #555;
|
background: #555;
|
||||||
background:rgba(0.2,0.2,0.2,.70);
|
background:rgba(.9,.9,.9,.60);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,8 +27,8 @@ body{
|
||||||
height:100%;
|
height:100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #2f2f2f;
|
background: #2f2f2f;
|
||||||
left:120px;
|
left:210px;
|
||||||
background:rgba(.9,.9,.9,.50);
|
background:rgba(.9,.9,.9,.80);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -33,31 +37,32 @@ body{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0px;
|
top:0px;
|
||||||
left:0px;
|
left:0px;
|
||||||
width:120px;
|
width:210px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background:rgba(.9,.9,.9,.80);
|
background:rgba(.9,.9,.9,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
#leftInfo{
|
#leftInfo{
|
||||||
height:100%;
|
height:100%;
|
||||||
width:120px;
|
width:210px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
background:rgba(.9,.9,.9,.80);
|
background:rgba(.9,.9,.9,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
#hold{
|
#hold{
|
||||||
position:relative;
|
position:relative;
|
||||||
width:80px;
|
width:80px;
|
||||||
height:360px;
|
height:435px;
|
||||||
background: #2f2f2f;
|
background: #2f2f2f;
|
||||||
margin:10px auto;
|
margin:10px auto;
|
||||||
background:rgba(.9,.9,.9,.80);
|
background:rgba(.9,.9,.9,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
#gameOver{
|
#gameOver{
|
||||||
height:100%;
|
height:100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right:120px;
|
right:120px;
|
||||||
|
left:210px;
|
||||||
background:rgba(0,0,0,.75);
|
background:rgba(0,0,0,.75);
|
||||||
z-index:999;
|
z-index:999;
|
||||||
color:#ffe100;
|
color:#ffe100;
|
||||||
|
@ -83,20 +88,23 @@ body{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
right:0;
|
right:0;
|
||||||
|
left:560px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background:rgba(.9,.9,.9,.70);
|
background:rgba(.9,.9,.9,.70);
|
||||||
}
|
}
|
||||||
|
|
||||||
#info{
|
#info{
|
||||||
width:120px;
|
width:210px;
|
||||||
|
left:210px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
background:rgba(.9,.9,.9,.70);
|
background:rgba(.9,.9,.9,.70);
|
||||||
}
|
}
|
||||||
|
|
||||||
#preview{
|
#preview{
|
||||||
width:80px;
|
width:80px;
|
||||||
height:360px;
|
height:468px;
|
||||||
top:0px;
|
top:0px;
|
||||||
|
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
margin:10px auto;
|
margin:10px auto;
|
||||||
background:rgba(.9,.9,.9,.90);
|
background:rgba(.9,.9,.9,.90);
|
||||||
|
|
|
@ -531,6 +531,7 @@ var UserInputs = {
|
||||||
this.processKeyDown(90); // Z
|
this.processKeyDown(90); // Z
|
||||||
this.processKeyDown(16); // shift
|
this.processKeyDown(16); // shift
|
||||||
this.processKeyDown(17); // ctrl
|
this.processKeyDown(17); // ctrl
|
||||||
|
this.processKeyDown(81); // q
|
||||||
},
|
},
|
||||||
|
|
||||||
// keyboard keys z,x,space
|
// keyboard keys z,x,space
|
||||||
|
@ -801,6 +802,10 @@ Tetris.prototype = {
|
||||||
this._fireShape();
|
this._fireShape();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
setTKIFonzieVar: function()
|
||||||
|
{
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
//Reset game
|
//Reset game
|
||||||
reset: function() {
|
reset: function() {
|
||||||
this.running = false;
|
this.running = false;
|
||||||
|
@ -813,15 +818,16 @@ Tetris.prototype = {
|
||||||
this.currentTime = this.startTime;
|
this.currentTime = this.startTime;
|
||||||
this.prevTime = this.startTime;
|
this.prevTime = this.startTime;
|
||||||
this.levelTime = this.startTime;
|
this.levelTime = this.startTime;
|
||||||
this.shapeQueue = [];
|
this.shapeQueue = this.shapeQueue || [];
|
||||||
this.hintQueue = [];
|
this.hintQueue = this.hintQueue || [];
|
||||||
this.holdQueue = [];
|
this.holdQueue = this.holdQueue || [];
|
||||||
this.canPullFromHoldQueue = false;
|
this.canPullFromHoldQueue = false;
|
||||||
clearMatrix(this.matrix);
|
clearMatrix(this.matrix);
|
||||||
views.setLevel(this.level);
|
views.setLevel(this.level);
|
||||||
views.setScore(this.score);
|
views.setScore(this.score);
|
||||||
views.setGameOver(this.isGameOver);
|
views.setGameOver(this.isGameOver);
|
||||||
openers.reset();
|
//openers.reset();
|
||||||
|
|
||||||
this._draw();
|
this._draw();
|
||||||
},
|
},
|
||||||
//Start game
|
//Start game
|
||||||
|
@ -883,16 +889,16 @@ Tetris.prototype = {
|
||||||
|
|
||||||
while(this.shapeQueue.length <= 4)
|
while(this.shapeQueue.length <= 4)
|
||||||
{
|
{
|
||||||
this.preparedShape = openers.getNextMino();
|
this.preparedShape = shapes.randomShape();//openers.getNextMino();
|
||||||
this.shapeQueue.push(this.preparedShape);
|
this.shapeQueue.push(this.preparedShape);
|
||||||
}
|
}
|
||||||
while(this.hintQueue.length <= 4)
|
/*while(this.hintQueue.length <= 4)
|
||||||
{
|
{
|
||||||
this.preparedShape = openers.getNextHint(this.matrix);
|
this.preparedShape = openers.getNextHint(this.matrix);
|
||||||
this.hintQueue.push(this.preparedShape);
|
this.hintQueue.push(this.preparedShape);
|
||||||
}
|
}*/
|
||||||
|
|
||||||
this.hintMino = this.hintQueue.shift();
|
//this.hintMino = this.hintQueue.shift();
|
||||||
this.shape = this.shapeQueue.shift();// shapes.randomShape();
|
this.shape = this.shapeQueue.shift();// shapes.randomShape();
|
||||||
|
|
||||||
this._draw();
|
this._draw();
|
||||||
|
@ -905,7 +911,7 @@ Tetris.prototype = {
|
||||||
canvas.drawShape(this.shape);
|
canvas.drawShape(this.shape);
|
||||||
canvas.drawHoldShape(this.holdQueue);
|
canvas.drawHoldShape(this.holdQueue);
|
||||||
canvas.drawPreviewShape(this.shapeQueue);
|
canvas.drawPreviewShape(this.shapeQueue);
|
||||||
canvas.drawHintShape(this.hintMino);
|
//canvas.drawHintShape(this.hintMino);
|
||||||
if(this.shape != undefined) {
|
if(this.shape != undefined) {
|
||||||
|
|
||||||
|
|
||||||
|
@ -1023,6 +1029,12 @@ Tetris.prototype = {
|
||||||
this.popHoldStack();
|
this.popHoldStack();
|
||||||
this._update();
|
this._update();
|
||||||
}
|
}
|
||||||
|
if(curkey == 81) {
|
||||||
|
if(document.getElementById("bg").style.display == "none")
|
||||||
|
document.getElementById("bg").style.display = "initial";
|
||||||
|
else
|
||||||
|
document.getElementById("bg").style.display="none";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
inputs.inputqueue = [];
|
inputs.inputqueue = [];
|
||||||
}
|
}
|
||||||
|
@ -1048,7 +1060,6 @@ Tetris.prototype = {
|
||||||
// Update game data
|
// Update game data
|
||||||
_update: function() {
|
_update: function() {
|
||||||
|
|
||||||
if(this.shape != undefined) //TODO delete
|
|
||||||
if (this.shape.canDown(this.matrix)) {
|
if (this.shape.canDown(this.matrix)) {
|
||||||
this.shape.goDown(this.matrix);
|
this.shape.goDown(this.matrix);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1179,6 +1190,7 @@ var OpenerGenerator = {
|
||||||
this.idx = 0;
|
this.idx = 0;
|
||||||
this.isInit = 0;
|
this.isInit = 0;
|
||||||
}
|
}
|
||||||
|
console.log("mino: " + mino);
|
||||||
|
|
||||||
return mino;
|
return mino;
|
||||||
//return this.shapeQueue[this.idx%=6];
|
//return this.shapeQueue[this.idx%=6];
|
||||||
|
@ -1946,8 +1958,8 @@ var layoutView = function(container,maxW,maxH){
|
||||||
if (sideW < SIDE_WIDTH ){
|
if (sideW < SIDE_WIDTH ){
|
||||||
info.style.width = side.style.width;
|
info.style.width = side.style.width;
|
||||||
}
|
}
|
||||||
|
side.style.height = 500 + 'px';
|
||||||
hold.style.top = 200+'px';//preview.top + 10px pad
|
hold.style.top = 10+'px';//preview.top + 10px pad
|
||||||
|
|
||||||
|
|
||||||
preview.width = 80;
|
preview.width = 80;
|
||||||
|
|
60
index.html
60
index.html
|
@ -4,28 +4,76 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>Tetrion Opening Trainer</title>
|
<title>Tetrion Opening Trainer</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/4lBGDh?gui=false&t=10&paused=false&muted=false" allowfullscreen></iframe>
|
|
||||||
|
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/4lBGDh?gui=&t=10&paused=false&muted=false" allowfullscreen></iframe>
|
||||||
<script>
|
<script>
|
||||||
var txt = "";
|
|
||||||
<!--txt += "<p>innerWidth: " + window.innerWidth + "</p>";
|
|
||||||
<!--txt += "<p>innerHeight: " + window.innerHeight + "</p>";-->
|
|
||||||
<!--txt += "<p>outerWidth: " + window.outerWidth + "</p>";-->
|
|
||||||
<!--txt += "<p>outerHeight: " + window.outerHeight + "</p>";-->
|
|
||||||
|
|
||||||
document.getElementById("bg").width = window.innerWidth;
|
document.getElementById("bg").width = window.innerWidth;
|
||||||
document.getElementById("bg").height = window.innerHeight;
|
document.getElementById("bg").height = window.innerHeight;
|
||||||
</script>
|
</script>
|
||||||
<div id="tetris">
|
<div id="tetris">
|
||||||
|
|
||||||
<canvas id="scene"></canvas>
|
<canvas id="scene"></canvas>
|
||||||
<div id="leftSide">
|
<div id="leftSide">
|
||||||
|
|
||||||
|
<!--<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="setTKIFonzieVar">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>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- <footer>footer area</footer>-->
|
||||||
<canvas id="hold"></canvas>
|
<canvas id="hold"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div id="gameOver">
|
<div id="gameOver">
|
||||||
|
|
|
@ -111,6 +111,7 @@ var UserInputs = {
|
||||||
this.processKeyDown(90); // Z
|
this.processKeyDown(90); // Z
|
||||||
this.processKeyDown(16); // shift
|
this.processKeyDown(16); // shift
|
||||||
this.processKeyDown(17); // ctrl
|
this.processKeyDown(17); // ctrl
|
||||||
|
this.processKeyDown(81); // q
|
||||||
},
|
},
|
||||||
|
|
||||||
// keyboard keys z,x,space
|
// keyboard keys z,x,space
|
||||||
|
|
30
src/main.js
30
src/main.js
|
@ -157,6 +157,10 @@ Tetris.prototype = {
|
||||||
this._fireShape();
|
this._fireShape();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
setTKIFonzieVar: function()
|
||||||
|
{
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
//Reset game
|
//Reset game
|
||||||
reset: function() {
|
reset: function() {
|
||||||
this.running = false;
|
this.running = false;
|
||||||
|
@ -169,15 +173,16 @@ Tetris.prototype = {
|
||||||
this.currentTime = this.startTime;
|
this.currentTime = this.startTime;
|
||||||
this.prevTime = this.startTime;
|
this.prevTime = this.startTime;
|
||||||
this.levelTime = this.startTime;
|
this.levelTime = this.startTime;
|
||||||
this.shapeQueue = [];
|
this.shapeQueue = this.shapeQueue || [];
|
||||||
this.hintQueue = [];
|
this.hintQueue = this.hintQueue || [];
|
||||||
this.holdQueue = [];
|
this.holdQueue = this.holdQueue || [];
|
||||||
this.canPullFromHoldQueue = false;
|
this.canPullFromHoldQueue = false;
|
||||||
clearMatrix(this.matrix);
|
clearMatrix(this.matrix);
|
||||||
views.setLevel(this.level);
|
views.setLevel(this.level);
|
||||||
views.setScore(this.score);
|
views.setScore(this.score);
|
||||||
views.setGameOver(this.isGameOver);
|
views.setGameOver(this.isGameOver);
|
||||||
openers.reset();
|
//openers.reset();
|
||||||
|
|
||||||
this._draw();
|
this._draw();
|
||||||
},
|
},
|
||||||
//Start game
|
//Start game
|
||||||
|
@ -239,16 +244,16 @@ Tetris.prototype = {
|
||||||
|
|
||||||
while(this.shapeQueue.length <= 4)
|
while(this.shapeQueue.length <= 4)
|
||||||
{
|
{
|
||||||
this.preparedShape = openers.getNextMino();
|
this.preparedShape = shapes.randomShape();//openers.getNextMino();
|
||||||
this.shapeQueue.push(this.preparedShape);
|
this.shapeQueue.push(this.preparedShape);
|
||||||
}
|
}
|
||||||
while(this.hintQueue.length <= 4)
|
/*while(this.hintQueue.length <= 4)
|
||||||
{
|
{
|
||||||
this.preparedShape = openers.getNextHint(this.matrix);
|
this.preparedShape = openers.getNextHint(this.matrix);
|
||||||
this.hintQueue.push(this.preparedShape);
|
this.hintQueue.push(this.preparedShape);
|
||||||
}
|
}*/
|
||||||
|
|
||||||
this.hintMino = this.hintQueue.shift();
|
//this.hintMino = this.hintQueue.shift();
|
||||||
this.shape = this.shapeQueue.shift();// shapes.randomShape();
|
this.shape = this.shapeQueue.shift();// shapes.randomShape();
|
||||||
|
|
||||||
this._draw();
|
this._draw();
|
||||||
|
@ -261,7 +266,7 @@ Tetris.prototype = {
|
||||||
canvas.drawShape(this.shape);
|
canvas.drawShape(this.shape);
|
||||||
canvas.drawHoldShape(this.holdQueue);
|
canvas.drawHoldShape(this.holdQueue);
|
||||||
canvas.drawPreviewShape(this.shapeQueue);
|
canvas.drawPreviewShape(this.shapeQueue);
|
||||||
canvas.drawHintShape(this.hintMino);
|
//canvas.drawHintShape(this.hintMino);
|
||||||
if(this.shape != undefined) {
|
if(this.shape != undefined) {
|
||||||
|
|
||||||
|
|
||||||
|
@ -379,6 +384,12 @@ Tetris.prototype = {
|
||||||
this.popHoldStack();
|
this.popHoldStack();
|
||||||
this._update();
|
this._update();
|
||||||
}
|
}
|
||||||
|
if(curkey == 81) {
|
||||||
|
if(document.getElementById("bg").style.display == "none")
|
||||||
|
document.getElementById("bg").style.display = "initial";
|
||||||
|
else
|
||||||
|
document.getElementById("bg").style.display="none";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
inputs.inputqueue = [];
|
inputs.inputqueue = [];
|
||||||
}
|
}
|
||||||
|
@ -404,7 +415,6 @@ Tetris.prototype = {
|
||||||
// Update game data
|
// Update game data
|
||||||
_update: function() {
|
_update: function() {
|
||||||
|
|
||||||
if(this.shape != undefined) //TODO delete
|
|
||||||
if (this.shape.canDown(this.matrix)) {
|
if (this.shape.canDown(this.matrix)) {
|
||||||
this.shape.goDown(this.matrix);
|
this.shape.goDown(this.matrix);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -76,6 +76,7 @@ var OpenerGenerator = {
|
||||||
this.idx = 0;
|
this.idx = 0;
|
||||||
this.isInit = 0;
|
this.isInit = 0;
|
||||||
}
|
}
|
||||||
|
console.log("mino: " + mino);
|
||||||
|
|
||||||
return mino;
|
return mino;
|
||||||
//return this.shapeQueue[this.idx%=6];
|
//return this.shapeQueue[this.idx%=6];
|
||||||
|
|
|
@ -76,8 +76,8 @@ var layoutView = function(container,maxW,maxH){
|
||||||
if (sideW < SIDE_WIDTH ){
|
if (sideW < SIDE_WIDTH ){
|
||||||
info.style.width = side.style.width;
|
info.style.width = side.style.width;
|
||||||
}
|
}
|
||||||
|
side.style.height = 500 + 'px';
|
||||||
hold.style.top = 200+'px';//preview.top + 10px pad
|
hold.style.top = 10+'px';//preview.top + 10px pad
|
||||||
|
|
||||||
|
|
||||||
preview.width = 80;
|
preview.width = 80;
|
||||||
|
|
Loading…
Reference in New Issue