今回もJSでクソゲーを作ってみました
解説動画はこちら
クソゲー作ってみた
その名も
「ずっこんテトリス」
です
普通のテトリスを改変して
少し面白くなるようにしてみました
こちらからプレイできます。
ずっこんテトリス
上下左右キーの操作のみの
シンプル設計で
長いテトリス棒を追加しました
こやつは「ずっこんテトリス棒」ですね
コードはこんな感じになっています。
ここでレアなテトリス棒として定義し
出現確率を画面上のスライダーの値で設定しています。
ここを上げると、出現確率も上がります。
どの確率が一番面白くなるかは分かりませんので
色々変えて試していただければと思います。
コードも改変すると
面白くなるかもしれないので
色々遊んでみてください
それでは
解説動画はこちら
クソゲー作ってみた
その名も
「ずっこんテトリス」
です
普通のテトリスを改変して
少し面白くなるようにしてみました
こちらからプレイできます。
ずっこんテトリス
上下左右キーの操作のみの
シンプル設計で
長いテトリス棒を追加しました
こやつは「ずっこんテトリス棒」ですね
コードはこんな感じになっています。
const game = document.getElementById("game");
const rareChanceInput = document.getElementById("rareChance");
const chanceValueDisplay = document.getElementById("chanceValue");
const ROWS = 20;
const COLS = 10;
// グリッドを初期化
const grid = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
// 通常のテトリミノ
const tetrominoes = [
[[1, 1, 1, 1]], // I
[
[1, 1],
[1, 1],
], // O
[
[0, 1, 0],
[1, 1, 1],
], // T
[
[1, 1, 0],
[0, 1, 1],
], // S
[
[0, 1, 1],
[1, 1, 0],
], // Z
[
[1, 1, 1],
[1, 0, 0],
], // L
[
[1, 1, 1],
[0, 0, 1],
], // J
];
// レアな「ロング棒」長さを8に変更
const rareTetromino = [
[[1, 1, 1, 1, 1, 1, 1, 1]], // 長さ8の棒
];
// テトリミノの状態
let currentTetromino = getRandomTetromino();
let currentRow = 0;
let currentCol = Math.floor((COLS - currentTetromino[0].length) / 2);
// グリッドを描画
function drawGrid() {
game.innerHTML = "";
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = document.createElement("div");
cell.classList.add("cell");
if (grid[row][col] === 1) {
cell.classList.add("filled");
}
game.appendChild(cell);
}
}
}
// テトリミノを描画
function drawTetromino() {
currentTetromino.forEach((row, r) => {
row.forEach((value, c) => {
if (value && currentRow + r >= 0) {
grid[currentRow + r][currentCol + c] = 1;
}
});
});
}
// テトリミノを削除
function clearTetromino() {
currentTetromino.forEach((row, r) => {
row.forEach((value, c) => {
if (value && currentRow + r >= 0) {
grid[currentRow + r][currentCol + c] = 0;
}
});
});
}
// 衝突判定
function isValidMove(newRow, newCol, newTetromino) {
return newTetromino.every((row, r) =>
row.every((value, c) => {
const x = newCol + c;
const y = newRow + r;
return (
!value ||
(y >= 0 && y < ROWS && x >= 0 && x < COLS && grid[y][x] === 0)
);
})
);
}
// ラインを削除
function clearLines() {
for (let row = ROWS - 1; row >= 0; row--) {
if (grid[row].every((cell) => cell === 1)) {
grid.splice(row, 1);
grid.unshift(Array(COLS).fill(0));
row++;
}
}
}
// ランダムなテトリミノを取得（レア形状の低確率出現を含む）
function getRandomTetromino() {
const rareChance = parseFloat(rareChanceInput.value); // スライダーの値を取得
if (Math.random() < rareChance) { // ロング棒の出現確率
return rareTetromino[0];
} else {
return tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
}
}
// テトリミノを回転
function rotateTetromino() {
const newTetromino = currentTetromino[0].map((_, colIndex) =>
currentTetromino.map((row) => row[colIndex]).reverse()
);
if (isValidMove(currentRow, currentCol, newTetromino)) {
currentTetromino = newTetromino;
}
}
// ゲームのループ
function gameLoop() {
clearTetromino();
if (isValidMove(currentRow + 1, currentCol, currentTetromino)) {
currentRow++;
} else {
drawTetromino();
clearLines();
// 次のテトリミノを生成
currentTetromino = getRandomTetromino();
currentRow = 0;
currentCol = Math.floor((COLS - currentTetromino[0].length) / 2);
// ゲームオーバー判定
if (!isValidMove(currentRow, currentCol, currentTetromino)) {
alert("Game Over");
grid.forEach((row) => row.fill(0));
currentTetromino = getRandomTetromino();
currentRow = 0;
currentCol = Math.floor((COLS - currentTetromino[0].length) / 2);
}
}
drawTetromino();
drawGrid();
}
// キー操作
document.addEventListener("keydown", (e) => {
clearTetromino();
if (e.key === "ArrowLeft" && isValidMove(currentRow, currentCol - 1, currentTetromino)) {
currentCol--;
} else if (e.key === "ArrowRight" && isValidMove(currentRow, currentCol + 1, currentTetromino)) {
currentCol++;
} else if (e.key === "ArrowDown") {
if (isValidMove(currentRow + 1, currentCol, currentTetromino)) {
currentRow++;
}
} else if (e.key === "ArrowUp") {
rotateTetromino();
}
drawTetromino();
drawGrid();
});
// スライダーの値を表示
rareChanceInput.addEventListener("input", () => {
chanceValueDisplay.textContent = parseFloat(rareChanceInput.value).toFixed(2);
});
// ゲーム開始
setInterval(gameLoop, 500);
drawGrid();
ここでレアなテトリス棒として定義し
出現確率を画面上のスライダーの値で設定しています。
ここを上げると、出現確率も上がります。
どの確率が一番面白くなるかは分かりませんので
色々変えて試していただければと思います。
コードも改変すると
面白くなるかもしれないので
色々遊んでみてください
それでは
