disabled openers for now. added disable background.

pull/1/head
PolicyChanges1@gmail.com 2021-02-13 08:22:26 -05:00
parent 4556a33818
commit fc9d7ca801
7 changed files with 123 additions and 43 deletions

View File

@ -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);

38
dist/tetrion.js vendored
View File

@ -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;
@ -1955,7 +1967,7 @@ var layoutView = function(container,maxW,maxH){
hold.width = 80; hold.width = 80;
hold.height = 380; hold.height = 380;
gameOver.style.width = scene.width +'px'; gameOver.style.width = scene.width +'px';

View File

@ -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">

View File

@ -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

View File

@ -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 {

View File

@ -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];

View File

@ -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;
@ -85,7 +85,7 @@ var layoutView = function(container,maxW,maxH){
hold.width = 80; hold.width = 80;
hold.height = 380; hold.height = 380;
gameOver.style.width = scene.width +'px'; gameOver.style.width = scene.width +'px';