卒業試験 提出
カシワザキ| You are currently viewing a revision titled "卒業試験 提出", saved on 2025年1月30日 1:02 AM by カシワザキ | |
|---|---|
| タイトル | 卒業試験 提出 |
| コンテンツ | <!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>テトリス</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1e1e1e;
}
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id=”gameCanvas” width=”300” height=”600”></canvas>
<script>
// テトリスの基本的な要素
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
// 定義
const rows = 20;
const cols = 10;
const blockSize = 30;
const colors = [‘#FF5733’, ‘#33FF57’, ‘#3357FF’, ‘#FF33F6’, ‘#F7FF33’, ‘#33FFF7’, ‘#F733FF’];
let board = Array.from({ length: rows }, () => Array(cols).fill(0));
let tetromino, nextTetromino;
let gameInterval, gameOver = false;
// テトリミノの形
const shapes = [[[1, 1, 1, 1]], // I[[1, 1], [1, 1]], // O[[0, 1, 1], [1, 1, 0]], // S[[1, 1, 0], [0, 1, 1]], // Z[[1, 0, 0], [1, 1, 1]], // L[[0, 0, 1], [1, 1, 1]], // J[[0, 1, 0], [1, 1, 1]], // T
];
function drawBoard() {
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
if (board[r][c] !== 0) {
ctx.fillStyle = colors[board[r][c] – 1];
ctx.fillRect(c * blockSize, r * blockSize, blockSize, blockSize);
ctx.strokeStyle = ‘#333’;
ctx.strokeRect(c * blockSize, r * blockSize, blockSize, blockSize);
}
}
}
}
function drawTetromino() {
for (let r = 0; r < tetromino.shape.length; r++) {
for (let c = 0; c < tetromino.shape[r].length; c++) {
if (tetromino.shape[r][c] !== 0) {
ctx.fillStyle = colors[tetromino.color];
ctx.fillRect((tetromino.x + c) * blockSize, (tetromino.y + r) * blockSize, blockSize, blockSize);
ctx.strokeStyle = ‘#333’;
ctx.strokeRect((tetromino.x + c) * blockSize, (tetromino.y + r) * blockSize, blockSize, blockSize);
}
}
}
}
function rotateTetromino() {
const newShape = [];
for (let r = 0; r < tetromino.shape[0].length; r++) {
newShape[r] = [];
for (let c = 0; c < tetromino.shape.length; c++) {
newShape[r][c] = tetromino.shape[tetromino.shape.length – 1 – c][r];
}
}
if (!collides(newShape, tetromino.x, tetromino.y)) {
tetromino.shape = newShape;
}
}
function collides(shape, xOffset, yOffset) {
for (let r = 0; r < shape.length; r++) {
for (let c = 0; c < shape[r].length; c++) {
if (shape[r][c] !== 0) {
const x = xOffset + c;
const y = yOffset + r;
if (x < 0 || x >= cols || y >= rows || board[y] && board[y][x] !== 0) {
return true;
}
}
}
}
return false;
}
function placeTetromino() {
for (let r = 0; r < tetromino.shape.length; r++) {
for (let c = 0; c < tetromino.shape[r].length; c++) {
if (tetromino.shape[r][c] !== 0) {
board[tetromino.y + r][tetromino.x + c] = tetromino.color + 1;
}
}
}
clearFullLines();
spawnTetromino();
}
function clearFullLines() {
for (let r = 0; r < rows; r++) {
if (board[r].every(cell => cell !== 0)) {
board.splice(r, 1);
board.unshift(Array(cols).fill(0));
}
}
}
function spawnTetromino() {
const shapeIndex = Math.floor(Math.random() * shapes.length);
tetromino = {
shape: shapes[shapeIndex],
x: Math.floor(cols / 2) – Math.floor(shapes[shapeIndex][0].length / 2),
y: 0,
color: shapeIndex,
};
if (collides(tetromino.shape, tetromino.x, tetromino.y)) {
gameOver = true;
clearInterval(gameInterval);
alert(‘ゲームオーバー！’);
}
}
function moveTetrominoDown() {
if (!gameOver && !collides(tetromino.shape, tetromino.x, tetromino.y + 1)) {
tetromino.y++;
} else {
placeTetromino();
}
}
function moveTetrominoLeft() {
if (!collides(tetromino.shape, tetromino.x – 1, tetromino.y)) {
tetromino.x–;
}
}
function moveTetrominoRight() {
if (!collides(tetromino.shape, tetromino.x + 1, tetromino.y)) {
tetromino.x++;
}
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBoard();
drawTetromino();
if (!gameOver) {
moveTetrominoDown();
}
}
// ゲーム開始
spawnTetromino();
gameInterval = setInterval(update, 500);
// キー操作
document.addEventListener(‘keydown’, function(event) {
if (event.key === ‘ArrowLeft’) {
moveTetrominoLeft();
} else if (event.key === ‘ArrowRight’) {
moveTetrominoRight();
} else if (event.key === ‘ArrowDown’) {
moveTetrominoDown();
} else if (event.key === ‘ArrowUp’) {
rotateTetromino();
}
});
</script>
</body>
</html> |
| 抜粋 | |
| 脚注 |
