-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
分數: 0
- Combo: 0
- Next
-
-
-
- Hold
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
暫停
+
+ 重新開始
+
+
分數: 0
+ Combo: 0
+ Next
+
+
+
+ Hold
+
+
+
-
-
- 旋轉:
-
- ⭡
+
+
-
+ 旋轉:
+
-
+ ⭡
+
- 移動:
-
+
- ↓
- ←
- →
+
-
+ 移動:
+
+
+ ↓
+ ←
+ →
+
+
+ hold/pause:
+
+
+
+ ⇧
+ /
+ P
+
+
+ 速降:
+ space
- hold/pause:
-
-
+
- ⇧
- /
- P
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
index d214324..3e3f6d1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -376,14 +376,18 @@ type CubeAndType = {
previewSize: 3,
},
};
+ const checkMobileMode = () => {
+ const operationIntro = $('.operation-intro').get(0);
+ const mobileBtns = $('.mobile-btns').get(0);
+ if (operationIntro && mobileBtns) {
+ if (isMobile()) operationIntro.style.display = 'none';
+ else mobileBtns.style.display = 'none';
+ }
+ };
const init = function () {
initData();
initEvent();
- if (!isMobile()) {
- // TODO somethingg
- }
-
- // fillOneRect(0,5,colorSet.red);
+ checkMobileMode();
set.startX = Math.round(set.grid_cols / 2);
$('input[name="version"]').val(process.env.VERSION || '');
start();
@@ -817,65 +821,82 @@ type CubeAndType = {
logger = Logger();
initMap();
};
+ const moveDown = () => {
+ if (canMoveGroup(MOVE_DIRECTION.DOWN)) {
+ moveGroup(MOVE_DIRECTION.DOWN);
+ reSetView();
+ }
+ };
+ const moveLeft = () => {
+ if (canMoveGroup(MOVE_DIRECTION.LEFT)) {
+ moveGroup(MOVE_DIRECTION.LEFT);
+ reSetView();
+ }
+ };
+ const moveRight = () => {
+ if (canMoveGroup(MOVE_DIRECTION.RIGHT)) {
+ moveGroup(MOVE_DIRECTION.RIGHT);
+ reSetView();
+ }
+ };
+ const rotate = () => {
+ if (canRotation()) {
+ reSetView();
+ }
+ };
+ const hold = () => {
+ if (canSwitch()) {
+ drawHoldCube();
+ reSetView();
+ }
+ };
+ const moveToBottom = () => {
+ goToHell();
+ };
+ const pauseOrContinue = () => {
+ if (timer) {
+ shouldStop = true;
+ stop();
+ } else {
+ shouldStop = false;
+ timeController();
+ }
+ };
const initEvent = function () {
$(document).on('keydown', function (e) {
const groupArray = Object.keys(map);
-
logger.log('e.keyCode', e.key);
if (groupArray.length === 0) return;
- if (e.key === 'ArrowLeft') {
- //left
- if (canMoveGroup(MOVE_DIRECTION.LEFT)) {
- moveGroup(MOVE_DIRECTION.LEFT);
- reSetView();
- }
- } else if (e.key === 'ArrowRight') {
- //right
- if (canMoveGroup(MOVE_DIRECTION.RIGHT)) {
- moveGroup(MOVE_DIRECTION.RIGHT);
- reSetView();
- }
- } else if (e.key === 'ArrowDown') {
- //down
- if (canMoveGroup(MOVE_DIRECTION.DOWN)) {
- moveGroup(MOVE_DIRECTION.DOWN);
- reSetView();
- }
- } else if (e.key === 'ArrowUp') {
- //up
- if (canRotation()) {
- reSetView();
- }
- } else if (e.key === ' ') {
- goToHell();
- } else if (e.key === 'Shift') {
- //shift
- if (canSwitch()) {
- drawHoldCube();
- reSetView();
- }
- } else if (e.key === 'p') {
- // pause
- if (timer) {
- shouldStop = true;
- stop();
- } else {
- shouldStop = false;
- timeController();
- }
+ switch (e.key) {
+ case 'ArrowLeft':
+ moveLeft();
+ break;
+ case 'ArrowRight':
+ moveRight();
+ break;
+ case 'ArrowDown':
+ moveDown();
+ break;
+ case 'ArrowUp':
+ rotate();
+ break;
+ case ' ':
+ moveToBottom();
+ break;
+ case 'Shift':
+ hold();
+ break;
+ case 'p':
+ pauseOrContinue();
+ break;
}
});
- $('#pause').click(function () {
- shouldStop = true;
- stop();
- });
- $('#continue').click(function () {
- if (!timer) {
- shouldStop = false;
- timeController();
- }
+ $('#pause').on('click', function () {
+ pauseOrContinue();
+ updatePauseBtn();
});
- $('#restart').click(function () {
+
+ $('#restart').on('click', function () {
$('#game-over').hide();
stop();
shouldStop = false;
@@ -885,6 +906,12 @@ type CubeAndType = {
score = 0;
timeController();
});
+ $('.hold-btn').on('click', hold);
+ $('.rotation').on('click', rotate);
+ $('.left-arrow').on('click', moveLeft);
+ $('.right-arrow').on('click', moveRight);
+ $('.down-arrow').on('click', moveDown);
+ $('.space-btn').on('click', moveToBottom);
};
const drawGridView = function (
c?: HTMLCanvasElement,
@@ -1088,6 +1115,9 @@ type CubeAndType = {
$('#score-number').text(score);
$('#combo-number').text(combo.times);
};
+ const updatePauseBtn = () => {
+ $('#pause').text(shouldStop ? '繼續' : '暫停');
+ };
const Logger = () => {
return set.showLog
? console
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 53a29ee..63e34ec 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,26 +1,39 @@
+$startSpaceHeight: 40px; // 定义动画开始时的高度变量
+$endSpaceHeight: 37px; // 定义动画结束时的高度变量
+$squareWidth: 28px;
+html,
+body {
+ height: 100%;
+ margin: 0px;
+}
.container {
- margin: 0px auto;
padding: 5px;
position: relative;
background-color: #fffff4;
.main-view {
- #canvas {
- margin: 0px auto;
- padding: 10px;
- text-align: center;
- background: #fffff4;
- }
- #game-over {
- width: 310px;
- height: 620px;
- position: absolute;
- top: 0px;
- left: 0px;
- display: none;
+ // height: 80%;
+
+ .canvas-wrapper {
+ margin-right: 10px;
+ height: calc(100% - 40px);
+ #canvas {
+ height: 100%;
+ text-align: center;
+ background: #fffff4;
+ }
+ #game-over {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ display: none;
+ height: 100%;
+ width: 100%;
+ }
}
.game-group-btn {
+ margin-top: 3px;
}
}
@@ -34,8 +47,110 @@
padding: 10px;
}
}
+ .mobile-btns {
+ margin-bottom: 20px;
+ width: 80%;
+ .cube-control {
+ .down-arrow > div > div {
+ transform: rotate(270deg);
+ }
+ .hold-btn {
+ margin-right: 10px;
+ > div {
+ padding: 11px 19px;
+ border-radius: 30px !important;
+ }
+ }
+ .rotation {
+ > div {
+ padding: 11px 19px;
+ border-radius: 30px !important;
+ }
+ }
+ }
+
+ .arrow-btn {
+ width: 100%;
+ .left-arrow {
+ }
+ .right-arrow {
+ }
+ .right-arrow > div > div {
+ transform: rotate(180deg);
+ }
+ }
+
+ .space-wrapper {
+ height: 50px;
+ width: 100%;
+
+ .space-btn {
+ align-items: end;
+ padding: 10px 20px;
+ height: $startSpaceHeight;
+ position: relative;
+ &:hover {
+ animation: changeHeight 0.2s ease-in-out forwards;
+ // margin-top: 2px;
+ }
+ &::after {
+ content: " ";
+ height: 80px;
+ }
+ .shape-border {
+ width: 50%;
+ height: 100%;
+ border: 1px solid;
+ border-radius: 10px;
+ }
+
+ .space-left {
+ border-right: 0px;
+ transform: skewX(-20deg);
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ box-shadow: -5px 3px 4px rgba(0, 0, 0, 0.4);
+ }
+
+ .space-right {
+ margin-left: -30px;
+ border-left: 0px;
+ transform: skewX(20deg);
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.4);
+ }
+ }
+ }
+ }
+}
+
+.square-btn {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ height: 40px;
+ > div {
+ display: flex;
+ width: 100%;
+ padding: 2px 10px;
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ border: 1px solid #000;
+ border-radius: 5px;
+ font-size: 20px;
+ &:hover {
+ animation: clickSquareBtn 0.1s ease-in-out forwards;
+ }
+ }
}
+.flex {
+ flex: 1;
+}
.flex-row {
display: flex;
flex-direction: row;
@@ -50,7 +165,22 @@
.content-center {
justify-content: center;
}
+.content-end {
+ justify-content: end;
+}
+.content-s-b {
+ justify-content: space-between;
+}
+.h-100 {
+ height: 100%;
+}
+.h-80 {
+ height: 100%;
+}
+.w-100 {
+ width: 100%;
+}
.p-relative {
position: relative;
}
@@ -76,3 +206,26 @@
.mr-2 {
margin-right: 2px;
}
+.mr-5 {
+ margin-right: 5px;
+}
+@keyframes changeHeight {
+ from {
+ margin-top: 0px;
+ height: $startSpaceHeight;
+ }
+ to {
+ margin-top: 3px;
+ height: $endSpaceHeight;
+ }
+}
+@keyframes clickSquareBtn {
+ from {
+ margin-top: 0px;
+ height: $squareWidth;
+ }
+ to {
+ margin-top: 3px;
+ height: 25px;
+ }
+}
+
+
-
+
+
-
+
◀
- 速降:
- space
+
+
+
+
+ Hold
+
+
↻
+
+
+
+
+
+ ◀
+
+
+
+
+ ◀
+
+
+
+
+
+