Skip to content

Commit

Permalink
add mobile mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@s956142
s956142 committed Apr 24, 2024
1 parent b59fd2b commit d20f606
Show file tree
Hide file tree
Showing 3 changed files with 352 additions and 121 deletions.
150 changes: 99 additions & 51 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,117 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="./lib/js/jquery-1.10.2.min.js"></script>
<link rel="icon" href="./img/tetris.png" type="image/x-icon">
<link rel="icon" href="./img/tetris.png" type="image/x-icon" />
</head>
<body style="text-align: center;">
<div class="container">
<div class="flex-row content-center">
<div class="flex-column main-view">
<div class="p-relative">
<canvas id="canvas" width="300" height="600"></canvas>
<img id="game-over" src="./img/gameOver.png" />
</div>

<div class="fs-16 game-group-btn">
<button id="pause">暫停</button>
<button id="continue">繼續</button>
<button id="restart">重新開始</button>
</div>
</div>
<input type="hidden" name="version" value="">
<div class="flex-column score-board fs-16 ta-l">
<div class="mt-10">分數: <span id="score-number">0</span></div>
<div class="mt-10">Combo: <span id="combo-number">0</span></div>
<div class="mt-10">Next</div>
<div class="preview ta-c">
<canvas class="mt-10" id="preview-canvas" width="100" height="100"></canvas>
</div>
<div class="mt-10">Hold</div>
<div class="preview ta-c">
<canvas class="mt-10" id="hold-canvas" width="100" height="100"></canvas>
<body class="flex-column">
<div class="container flex-column align-center flex">
<div class="flex-row content-center align-center w-100 flex">
<div class="flex-row main-view content-center flex h-80">
<div class="flex-column">
<div class="p-relative canvas-wrapper">
<canvas id="canvas" width="300" height="600"></canvas>
<img id="game-over" src="./img/gameOver.png" />
</div>
<div class="fs-16 game-group-btn flex-row">
<div class="square-btn mr-5"><div id="pause">暫停</div></div>
<div class="square-btn mr-5">
<div id="restart">重新開始</div>
</div>
</div>
</div>
<div class="flex-column score-board fs-16 ta-l">
<div class="mt-10">分數: <span id="score-number">0</span></div>
<div class="mt-10">Combo: <span id="combo-number">0</span></div>
<div class="mt-10">Next</div>
<div class="preview ta-c">
<canvas
class="mt-10"
id="preview-canvas"
width="100"
height="100"
></canvas>
</div>
<div class="mt-10">Hold</div>
<div class="preview ta-c">
<canvas
class="mt-10"
id="hold-canvas"
width="100"
height="100"
></canvas>
</div>

<div class="operation-intro mt-10">
<div class="flex-row align-center">
<span class="mr-2">旋轉:</span>
<div class="fs-20 flex-row">
<span class="mr-2">⭡</span>
<div class="operation-intro mt-10">
<div class="flex-row align-center">
<span class="mr-2">旋轉:</span>
<div class="fs-20 flex-row">
<span class="mr-2">⭡</span>
</div>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2">移動:</span>
<div class="fs-20 flex-row">
<span class="mr-2">↓ </span>
<span class="mr-2">←</span>
<span class="mr-2">→</span>
<div class="mt-10 flex-row align-center">
<span class="mr-2">移動:</span>
<div class="fs-20 flex-row">
<span class="mr-2">↓ </span>
<span class="mr-2">←</span>
<span class="mr-2">→</span>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2"> hold/pause:</span>

<div class="fs-20 flex-row">
<span class="mr-2">⇧</span>
<span class="mr-2">/</span>
<span class="mr-2">P</span>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2">速降:</span>
<span> space</span>
</div>
</div>
<div class="mt-10 flex-row align-center">
<span class="mr-2"> hold/pause:</span>

<div class="fs-20 flex-row">
<span class="mr-2">⇧</span>
<span class="mr-2">/</span>
<span class="mr-2">P</span>
</div>
<input type="hidden" name="version" value="" />
</div>
</div>
<div class="flex-column mobile-btns align-center">
<div class="flex-row w-100 content-s-b cube-control">
<div class="flex-row flex">
<div class="square-btn down-arrow">
<div>
<div>◀</div>
</div>
</div>
<div class="mt-10 flex-row align-center ">
<span class="mr-2">速降:</span>
<span> space</span>
</div>
<div class="flex-row">
<div class="square-btn hold-btn">
<div>Hold</div>
</div>
<div class="square-btn rotation">
<div>↻</div>
</div>
</div>
</div>

<div class="arrow-btn flex-row content-s-b">
<div class="square-btn left-arrow">
<div>
<div>◀</div>
</div>
</div>
<div class="square-btn right-arrow">
<div>
<div>◀</div>
</div>
</div>
</div>
<div class="space-wrapper flex-row flex">
<div class="space-btn flex-row flex">
<div class="shape-border space-left flex"></div>
<div class="shape-border space-right flex"></div>
</div>
</div>
</div>
</div>
<script src="./index.js?version=<%= htmlWebpackPlugin.options.templateParameters.version %>"></script>
Expand Down
142 changes: 86 additions & 56 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit d20f606

Please sign in to comment.