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