timer, 7 bag, fixes

This commit is contained in:
PolicyChanges1@gmail.com 2021-02-28 02:57:23 -05:00
parent 3a48117175
commit bf1dba8d47
6 changed files with 117 additions and 124 deletions

View File

@ -2,51 +2,6 @@ html,body{
height:100%;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
body{
background: #000000;
@ -87,7 +42,7 @@ body{
top:0px;
left:0px;
width:210px;
text-align: center;
text-align: left;
background:rgba(1,1,1,.20);
}
@ -103,6 +58,7 @@ body{
#leftInfo ul {padding:2%;}
#hold{
text-align:right;
position:relative;
width:80px;
height:435px;
@ -118,7 +74,7 @@ body{
left:210px;
background:rgba(0,0,0,.75);
z-index:999;
color:#ffe100;
color:#2f2f2f;
text-align: center;
display: none;
}
@ -128,12 +84,12 @@ body{
}
#gameOver a,#gameOver a:visited{
color:#66bc29;
color:dodgerblue;
text-decoration: none;
}
#gameOver h3{
color:orange;
color:AliceBlue;
}
#side{
@ -171,7 +127,7 @@ body{
background:rgba(.9,.9,.9,.70);
}
#level{
color:orange;
color:dodgerblue;
font-size:32px;
background:rgba(.9,.9,.9,.70);
}
@ -184,59 +140,15 @@ body{
}
#score{
color:orange;
font-family: 'Chalkboard SE';
color:dodgerblue;
font-family: 'Arial';
background:rgba(.9,.9,.9,.70);
}#linesInfo{
color:#fff;
font-size: 18px;
margin-top:0;
background:rgba(.9,.9,.9,.70);
}
#lines{
color:orange;
font-family: 'Chalkboard SE';
background:rgba(.9,.9,.9,.70);
}
#rewardInfo{
color:yellow;
font-weight: bold;
height:20px;
}
.invisible{
visibility: hidden;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
background:rgba(.9,.9,.9,.70);c
}
100% {

56
dist/tetrion.js vendored
View File

@ -457,6 +457,7 @@ var UserInputs = {
},
incTickCounter() {
this.ticks++;
if(this.ticks > 1200000)this.ticks = 0; // set to 0 every 12 seconds?
},
getTickCounter() {
return this.ticks;
@ -682,17 +683,17 @@ var UserInputs = {
"Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold",
"Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate",
"Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background",
"path", "SameSite"],
"path", "High Score"],
settingsDefault: ["true",
"65.0", "20.0", "32", "16",
"50.0", "16.0", "32", "16",
"37", "39", "90", "88",
"40", "17", "82", "81",
"65.0", "20.0", "RB", "LB",
"50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "",
"=/", "Strict"],
"=/"],
settingsMap: []
};
@ -859,7 +860,8 @@ Tetris.prototype = {
inputs.init();
this.createSettings();
// if true no openers. just random tetrinos
this.isFreePlay = true;
this.isFreePlay = true;1
this.isTimerOn = false;
this.currentOpener = 0;
this.doTest = false;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
@ -870,8 +872,15 @@ Tetris.prototype = {
this._fireShape();
},
toggleTimer: function() {
document.getElementById("Timer").value = (this.isTimerOn = !this.isTimerOn) ? "Seconds:" : "Timer Off";
},
setFreePlay: function()
{
document.getElementById("Timer").value = "Timer Off";
document.getElementById("Time").value = "";
document.getElementById("besttime").value = "";
this.isTimerOn = false;
this.isFreePlay = true;
this.doTest = false;
this.hintQueue = [];
@ -883,6 +892,7 @@ Tetris.prototype = {
},
setCurrentOpener(opener)
{
document.getElementById("besttime").value = "";
this.isFreePlay = false;
this.doTest = false;
this.currentOpener = opener;
@ -928,6 +938,7 @@ Tetris.prototype = {
this.startTime = new Date().getTime();
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.sequencePrevTime = this.startTime;
//todo:get rid of extra
this.levelTime = this.startTime;
this.prevInputTime = this.startTime;
@ -943,6 +954,7 @@ Tetris.prototype = {
// timer for srs extened piece lockdown
this.lockdownTimer = 0;
this.landed = false;
this.isSequenceCompleted = false;
clearMatrix(this.matrix);
views.setLevel(this.level);
@ -1019,9 +1031,20 @@ Tetris.prototype = {
this.currentMinoInx++;
// Opener sequence completed
if(this.currentMinoInx > openers.getLength()) {
if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime;
if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {
document.getElementById("besttime").value = (deltaTime/1000.0).toString();
}
this.isSequenceCompleted = true;
}
this.hintQueue = [];
this.shapeQueue = [];
// Recursion warning
this._restartHandler();
}
@ -1083,11 +1106,13 @@ Tetris.prototype = {
canvas.drawGhostShape(clone, bottomY);
}
canvas.drawMatrix(this.matrix);
},
// tick input data
_processTick: async function() {
var deltaTime = 1.0; // 1 millisecond
var deltaTime = 1.0; // 1 millisecond
var tenthOfFrame = 1.0 //1.6; // 1.6ms = 1 fram
var halfFrame = 5.0 //8.0;
var halfFramePlus = 10.0;
@ -1107,6 +1132,15 @@ Tetris.prototype = {
// Don't process game related events if game over
if(this.isGameOver) return;
if(this.isTimerOn) {
var deltaPlayTime = new Date().getTime() - this.sequencePrevTime;
if(inputs.getTickCounter() >= 20) {
document.getElementById("Time").value = (deltaPlayTime/1000).toString();
}
}
// drain gamepad queue
if(inputs.getTickCounter() > halfFrame) // 8 millisecons
{
@ -1249,8 +1283,6 @@ Tetris.prototype = {
if (!this.isGameOver) {
window.requestAnimationFrame(utils.proxy(this._refresh, this));
}
},
// check if the current piece is in the same location as the hint piece
_checkHint: function() {
@ -1307,7 +1339,8 @@ Tetris.prototype = {
side1 = 1;
if(matrix[side2Y][side2X] != 0)
side2 = 1;
if(matrix[side3Y][side3X] != 0)
// TODO: figure out why this occasionally is undefined
if(matrix[side3Y] != undefined && matrix[side3Y][side3X] != 0)
side3 = 1;
if(matrix[side4Y][side4X] != 0)
side4 = 1;
@ -1800,6 +1833,7 @@ module.exports.reset = reset;
},{"./shapes.js":7}],7:[function(require,module,exports){
var consts = require('./consts.js');
var utils = require('./utils.js');
// import * as consts from './const.js';
var COLORS = consts.COLORS;
var COLUMN_COUNT = consts.COLUMN_COUNT;
@ -2489,7 +2523,7 @@ ShapeZR.prototype = {
// 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right
kickShape: function(matrix, rotationDirection) {
let clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this);
let clone = utils.deepClone(this);
for(var j = 0; j < 4; j++) {
if(this.state == j) {
@ -2744,7 +2778,7 @@ module.exports.getShape = getShape;
// export randomShape;
// export getShape;
},{"./consts.js":2}],8:[function(require,module,exports){
},{"./consts.js":2,"./utils.js":8}],8:[function(require,module,exports){
var exports = module.exports = {};

View File

@ -38,7 +38,12 @@
<div id="divbg">
<!-- https://www.shadertoy.com/view/3tXBWj# -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/Xlf3Rj?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/tdjyzz?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3lVfDm?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe>
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sy3Wy?gui=true&t=10&paused=true&muted=false" ></iframe> -->
<script>
document.getElementById("bg").width = window.innerWidth;
document.getElementById("bg").height = window.innerHeight;
@ -114,6 +119,13 @@ document.getElementById("divbg").removeAttribute("tabIndex");
</div>
<canvas id="hold"></canvas>
<br>
<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="button" id="Timer" value="Timer Off"/>
<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/>
<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/>
</div>
<div id="gameOver">
@ -135,9 +147,9 @@ document.getElementById("divbg").removeAttribute("tabIndex");
<option selected="">Settings:</option>
</select>
<input style="width:80px;font-size:13px;background:black;color:dodgerblue;text-align:left;" type="text" id="setting_value">
<input id="submitsetting" type="submit" value="Set Setting">
<input id="test" type="submit" value="Test Yourself">
<input style="width:80px;font-size:13px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="setting_value">
<input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="submitsetting" type="submit" value="Set Setting"></input>
<input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
</div>
@ -160,6 +172,7 @@ document.getElementById("divbg").removeAttribute("tabIndex");
document.getElementById("setAlbatrossVar").addEventListener("click", function() { tetrion.setCurrentOpener(7); } );
document.getElementById("setNumberOneVar").addEventListener("click", function() { tetrion.setCurrentOpener(8); } );
document.getElementById("Timer").addEventListener("click", function() { tetrion.toggleTimer(); } );
document.getElementById("test").addEventListener("click", function() { tetrion.setDoTest(); } );
document.getElementById("settings").addEventListener("change", function() { tetrion.updateSettingTextBox(); } );

View File

@ -33,6 +33,7 @@ var UserInputs = {
},
incTickCounter() {
this.ticks++;
if(this.ticks > 1200000)this.ticks = 0; // set to 0 every 12 seconds?
},
getTickCounter() {
return this.ticks;
@ -258,17 +259,17 @@ var UserInputs = {
"Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold",
"Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate",
"Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background",
"path", "SameSite"],
"path", "High Score"],
settingsDefault: ["true",
"65.0", "20.0", "32", "16",
"50.0", "16.0", "32", "16",
"37", "39", "90", "88",
"40", "17", "82", "81",
"65.0", "20.0", "RB", "LB",
"50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "",
"=/", "Strict"],
"=/"],
settingsMap: []
};

View File

@ -158,7 +158,8 @@ Tetris.prototype = {
inputs.init();
this.createSettings();
// if true no openers. just random tetrinos
this.isFreePlay = true;
this.isFreePlay = true;1
this.isTimerOn = false;
this.currentOpener = 0;
this.doTest = false;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
@ -169,8 +170,15 @@ Tetris.prototype = {
this._fireShape();
},
toggleTimer: function() {
document.getElementById("Timer").value = (this.isTimerOn = !this.isTimerOn) ? "Seconds:" : "Timer Off";
},
setFreePlay: function()
{
document.getElementById("Timer").value = "Timer Off";
document.getElementById("Time").value = "";
document.getElementById("besttime").value = "";
this.isTimerOn = false;
this.isFreePlay = true;
this.doTest = false;
this.hintQueue = [];
@ -182,6 +190,7 @@ Tetris.prototype = {
},
setCurrentOpener(opener)
{
document.getElementById("besttime").value = "";
this.isFreePlay = false;
this.doTest = false;
this.currentOpener = opener;
@ -227,6 +236,7 @@ Tetris.prototype = {
this.startTime = new Date().getTime();
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.sequencePrevTime = this.startTime;
//todo:get rid of extra
this.levelTime = this.startTime;
this.prevInputTime = this.startTime;
@ -242,6 +252,7 @@ Tetris.prototype = {
// timer for srs extened piece lockdown
this.lockdownTimer = 0;
this.landed = false;
this.isSequenceCompleted = false;
clearMatrix(this.matrix);
views.setLevel(this.level);
@ -318,9 +329,20 @@ Tetris.prototype = {
this.currentMinoInx++;
// Opener sequence completed
if(this.currentMinoInx > openers.getLength()) {
if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime;
if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {
document.getElementById("besttime").value = (deltaTime/1000.0).toString();
}
this.isSequenceCompleted = true;
}
this.hintQueue = [];
this.shapeQueue = [];
// Recursion warning
this._restartHandler();
}
@ -382,11 +404,13 @@ Tetris.prototype = {
canvas.drawGhostShape(clone, bottomY);
}
canvas.drawMatrix(this.matrix);
},
// tick input data
_processTick: async function() {
var deltaTime = 1.0; // 1 millisecond
var deltaTime = 1.0; // 1 millisecond
var tenthOfFrame = 1.0 //1.6; // 1.6ms = 1 fram
var halfFrame = 5.0 //8.0;
var halfFramePlus = 10.0;
@ -406,6 +430,15 @@ Tetris.prototype = {
// Don't process game related events if game over
if(this.isGameOver) return;
if(this.isTimerOn) {
var deltaPlayTime = new Date().getTime() - this.sequencePrevTime;
if(inputs.getTickCounter() >= 20) {
document.getElementById("Time").value = (deltaPlayTime/1000).toString();
}
}
// drain gamepad queue
if(inputs.getTickCounter() > halfFrame) // 8 millisecons
{
@ -548,8 +581,6 @@ Tetris.prototype = {
if (!this.isGameOver) {
window.requestAnimationFrame(utils.proxy(this._refresh, this));
}
},
// check if the current piece is in the same location as the hint piece
_checkHint: function() {
@ -606,7 +637,8 @@ Tetris.prototype = {
side1 = 1;
if(matrix[side2Y][side2X] != 0)
side2 = 1;
if(matrix[side3Y][side3X] != 0)
// TODO: figure out why this occasionally is undefined
if(matrix[side3Y] != undefined && matrix[side3Y][side3X] != 0)
side3 = 1;
if(matrix[side4Y][side4X] != 0)
side4 = 1;

View File

@ -1,4 +1,5 @@
var consts = require('./consts.js');
var utils = require('./utils.js');
// import * as consts from './const.js';
var COLORS = consts.COLORS;
var COLUMN_COUNT = consts.COLUMN_COUNT;
@ -688,7 +689,7 @@ ShapeZR.prototype = {
// 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right
kickShape: function(matrix, rotationDirection) {
let clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this);
let clone = utils.deepClone(this);
for(var j = 0; j < 4; j++) {
if(this.state == j) {