※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
⚠お酒は二十歳になってから。
WordPressにテトリス風ゲームを実装するのは難しいことではありません。
たった、以下の3ステップでWordPressにテトリス風ゲームを実装することができるのです。
- HTML・CSS・JavaScriptでテトリス風ゲームを作る（サンプルコードあり）！
- WordPressのメディアに作成したファイルをアップロード！
- テカスタムHTMLに「iframe」を記述し、ファイルのURLを記載するだけ！
iframe（アイフレーム）とは・・・Webページ内に別のWebページを埋め込むことのできる機能です。この機能により、元のWebページと別のWebページの影響を防ぐことができ、簡単に実装することができます。
ゲームというと思った以上にたいへんだと思われるかも知れませんが、この手順を踏めば10分程度で遊べるゲームを実装できます。
さらに独自のゲームをつくりたいという方には、ChatGPTやClaudeなどの生成AIを使用してゲームのプログラムを生成してみてください。
このテトリス風プログラムは、ChatGPTとClaudeでつくられているのよ！
⏫️送料無料の10本セット、『1本約890円』なのはお得ね！
🍷定期便サービスも扱ってるわよ！
目次
テトリス風ゲーム実装サンプル
左キー (←)：ブロックを左に移動
右キー (→)：ブロックを右に移動
上キー (↑)：ブロックを時計回りに回転
下キー (↓)：ブロックを下に素早く移動
プレイするとわかるけど、ブロックを1列消すごとに背景のイラストが見えるようになってるわよ！
テトリス風プログラム（コード）
このままHTMLのテキストに貼り付けたり、コードを修正して使ってみてください！
ファイル作成例：tetris-game.html
<!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: 100%;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#gameContainer {
position: relative;
width: 300px;
height: 600px;
}
#gameBoard {
border: 2px solid #333;
background-color: rgba(255, 255, 255, 0.5);
position: relative;
z-index: 1;
}
#backgroundImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: 0;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.5s ease;
}
#scoreAndLevel {
display: flex;
justify-content: space-between;
width: 300px;
margin-top: 20px;
font-size: 18px;
}
#nextPiece {
margin-top: 20px;
border: 2px solid #333;
background-color: #fff;
}
#startButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
z-index: 2;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="backgroundImage"></div>
<canvas id="gameBoard" width="300" height="600"></canvas>
<div id="scoreAndLevel">
<div id="score">スコア: 0</div>
<div id="level">レベル: 1</div>
</div>
<canvas id="nextPiece" width="120" height="120"></canvas>
<button id="startButton">スタート</button>
</div>
<script>
const canvas = document.getElementById('gameBoard');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const nextPieceCanvas = document.getElementById('nextPiece');
const nextPieceCtx = nextPieceCanvas.getContext('2d');
const backgroundImage = document.getElementById('backgroundImage');
const startButton = document.getElementById('startButton');
const COLS = 10;
const ROWS = 20;
const BLOCK_SIZE = 30;
const ROWS_PER_REVEAL = 5;
let revealedHeight = 100;
let board = [];
let currentPiece;
let nextPiece;
let score = 0;
let level = 1;
let fallSpeed = 1000;
let gameRunning = false;
const SHAPES = [
[[1, 1, 1, 1]],
[[1, 1], [1, 1]],
[[1, 1, 1], [0, 1, 0]],
[[1, 1, 1], [1, 0, 0]],
[[1, 1, 1], [0, 0, 1]],
[[1, 1, 0], [0, 1, 1]],
[[0, 1, 1], [1, 1, 0]]
];
const COLORS = [
'#FF0D72', '#0DC2FF', '#0DFF72', '#F538FF',
'#FF8E0D', '#FFE138', '#3877FF'
];
function init() {
for (let r = 0; r < ROWS; r++) {
board[r] = [];
for (let c = 0; c < COLS; c++) {
board[r][c] = 0;
}
}
newPiece();
nextPiece = generatePiece();
draw();
drawNextPiece();
backgroundImage.style.backgroundImage = 'url("background.png")';
backgroundImage.style.clipPath = `inset(${revealedHeight}% 0 0 0)`;
}
function generatePiece() {
let randomIndex = Math.floor(Math.random() * SHAPES.length);
return {
shape: SHAPES[randomIndex],
color: COLORS[randomIndex],
x: Math.floor(COLS / 2) - Math.ceil(SHAPES[randomIndex][0].length / 2),
y: 0
};
}
function newPiece() {
if (nextPiece) {
currentPiece = nextPiece;
} else {
currentPiece = generatePiece();
}
nextPiece = generatePiece();
drawNextPiece();
}
function moveDown() {
if (!collision(0, 1)) {
currentPiece.y++;
} else {
lockPiece();
clearLines();
newPiece();
if (collision(0, 0)) {
alert("ゲームオーバー! スコア: " + score);
init();
score = 0;
level = 1;
fallSpeed = 1000;
updateScore();
updateLevel();
}
}
}
function collision(offsetX, offsetY, piece = currentPiece.shape) {
for (let r = 0; r < piece.length; r++) {
for (let c = 0; c < piece[r].length; c++) {
if (piece[r][c]) {
let newX = currentPiece.x + c + offsetX;
let newY = currentPiece.y + r + offsetY;
if (newX < 0 || newX >= COLS || newY >= ROWS) return true;
if (newY < 0) continue;
if (board[newY][newX]) return true;
}
}
}
return false;
}
function lockPiece() {
for (let r = 0; r < currentPiece.shape.length; r++) {
for (let c = 0; c < currentPiece.shape[r].length; c++) {
if (currentPiece.shape[r][c]) {
board[currentPiece.y + r][currentPiece.x + c] = currentPiece.color;
}
}
}
}
function clearLines() {
let linesCleared = 0;
for (let r = ROWS - 1; r >= 0; r--) {
if (board[r].every(cell => cell !== 0)) {
board.splice(r, 1);
board.unshift(Array(COLS).fill(0));
linesCleared++;
}
}
if (linesCleared > 0) {
score += linesCleared * linesCleared * 100;
updateScore();
checkLevelUp();
revealBackground(linesCleared);
}
}
function checkLevelUp() {
let newLevel = Math.floor(score / 100) + 1;
if (newLevel > level) {
level = newLevel;
fallSpeed = Math.max(100, 1000 - (level - 1) * 100);
updateLevel();
}
}
function updateScore() {
scoreElement.textContent = "スコア: " + score;
}
function updateLevel() {
levelElement.textContent = "レベル: " + level;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
if (board[r][c]) {
ctx.fillStyle = board[r][c];
ctx.fillRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
ctx.strokeStyle = "#000";
ctx.strokeRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
}
}
if (currentPiece) {
ctx.fillStyle = currentPiece.color;
for (let r = 0; r < currentPiece.shape.length; r++) {
for (let c = 0; c < currentPiece.shape[r].length; c++) {
if (currentPiece.shape[r][c]) {
ctx.fillRect((currentPiece.x + c) * BLOCK_SIZE, (currentPiece.y + r) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
ctx.strokeStyle = "#000";
ctx.strokeRect((currentPiece.x + c) * BLOCK_SIZE, (currentPiece.y + r) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
}
}
}
}
function drawNextPiece() {
nextPieceCtx.clearRect(0, 0, nextPieceCanvas.width, nextPieceCanvas.height);
if (nextPiece) {
nextPieceCtx.fillStyle = nextPiece.color;
for (let r = 0; r < nextPiece.shape.length; r++) {
for (let c = 0; c < nextPiece.shape[r].length; c++) {
if (nextPiece.shape[r][c]) {
nextPieceCtx.fillRect(c * 30 + 30, r * 30 + 30, 30, 30);
nextPieceCtx.strokeStyle = "#000";
nextPieceCtx.strokeRect(c * 30 + 30, r * 30 + 30, 30, 30);
}
}
}
}
}
document.addEventListener('keydown', function(e) {
// 矢印キーのデフォルト動作を無効化してスクロールを防ぐ
if ([37, 38, 39, 40].includes(e.keyCode)) {
e.preventDefault();
}
switch(e.keyCode) {
case 37: // 左
if (!collision(-1, 0)) currentPiece.x--;
break;
case 39: // 右
if (!collision(1, 0)) currentPiece.x++;
break;
case 40: // 下
moveDown();
break;
case 38: // 上（回転）
rotate();
break;
}
draw();
});
function rotate() {
let rotated = currentPiece.shape[0].map((val, index) =>
currentPiece.shape.map(row => row[index]).reverse()
);
let offset = 0;
while (collision(offset, 0, rotated)) {
offset--;
if (offset < -currentPiece.x) {
return;
}
}
currentPiece.shape = rotated;
currentPiece.x += offset;
}
function revealBackground(linesCleared) {
let revealAmount = (linesCleared / ROWS_PER_REVEAL) * 100;
revealedHeight -= revealAmount;
if (revealedHeight < 0) revealedHeight = 0;
backgroundImage.style.clipPath = `inset(${revealedHeight}% 0 0 0)`;
}
function startGame() {
gameRunning = true;
startButton.style.display = 'none'; // スタートボタンを隠す
init();
gameLoop();
}
startButton.addEventListener('click', startGame);
function gameLoop() {
if (!gameRunning) return; // ゲームが終了した場合はループを停止
moveDown();
draw();
setTimeout(gameLoop, fallSpeed);
}
</script>
</body>
</html>
プログラムの内容が難しいなら、ChatGPTなどにコードを見せて解説してもらうと良いわよ！
背景の変更方法
このテトリス風ゲームでは、ブロックを消すごとに背景のイラストが見えていくようになるギミックがあります。
そのイラストを変更するためには、「tetris-game.html（プログラムのコードファイル）」と一緒に画像をアップロードしなくてはいけません。
画像のデフォルトネームは、「background.png」となっています。
アップロードするイラストを「background.png」の名前に変更してからアップロードしてください。
画像は「1080×1920」のような、縦に長い画像を用意するのがおすすめです。
ファイル名を変更したくないときには、下記コードの「backgroundImage.style.backgroundImage = ‘url(“background.png”)’; // 背景画像を設定」部分を変更してみてください。
function init() {
for (let r = 0; r < ROWS; r++) {
board[r] = [];
for (let c = 0; c < COLS; c++) {
board[r][c] = 0;
}
}
newPiece();
nextPiece = generatePiece();
draw();
drawNextPiece();
backgroundImage.style.backgroundImage = 'url("background.png")'; // 背景画像を設定
backgroundImage.style.clipPath = `inset(${revealedHeight}% 0 0 0)`; // クリップパスをリセット
}脱衣風テトリスなんかもできそうね！
ゲームプログラムファイルのアップロード方法
作成したゲームのプログラム「tetris-game.html」と背景画像「background.png」を、WordPressの『メディア』からアップロードします。
アップロードしたゲームのプログラムファイルをメディアから探し、下図の画像にもある「URLをコピー」をクリックして、後でカスタムHTMLに入力するURLを保持しておいてください。
WordPressへの実装（iframe）
テトリス風ゲームを実装したいWordPressのページを作成して、カスタムHTMLに下記コードを貼り付けてください。
ただ、「ここに先ほどコピーした「tetris-game.html」URLを貼り付け」の部分に、先程のURLを貼り付けましょう。
<iframe src="ここに先ほどコピーした「tetris-game.html」URLを貼り付け"
width="450" height="800" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
</iframe>ここまでのステップが上手くできていれば、カスタムHTMLをプレビューすれば、テトリス風ゲームがプレイできるようになっています。
以上がWordPressにテトリス風ゲームを実装するまでの手順です。
iframeを使用すれば、ゲームだけでなく、WordPressにアップロードした一般的なWebサイトも表示することができるわよ！
WordPress iframeゲーム実装 よくある質問
WordPressでiframeを使ってゲームを表示する方法は？
ゲームのHTMLファイルを作成し、WordPressにアップロードして、そのURLをiframeタグで埋め込むことで表示できます。
iframeの利点は何ですか？
ページに外部コンテンツを簡単に埋め込むことができ、元のページに影響を与えずに独立して表示できます。
iframeタグの基本的な使い方は？
<iframe src="URL" width="幅" height="高さ" frameborder="0"></iframe>の形式で使用します。
【まとめ】iframeを使えば、WordPressにアップロードするだけで簡単にゲームを実装できる！
この記事を通して、簡単作業でWordPressにゲームを実装できることがわかったと思います。
今回紹介したテトリス風ゲームは、最低限の機能しか付いていないので、ChatGPTなどの生成AIで修正してみても面白いでしょう。
特に生成AIであれば、自分のアイデアを会話レベルでゲームを作成できるので便利です。
全くプログラミングすることなくゲームをつくることも可能です。
ChatGPTもClaudeも無料で使えるので、気になった方は早速使ってみてください！
今後も役立つ情報を発信していきますので、お楽しみにしていてください！
また、Xのフォロー（@haizakura32）やYouTubeで生成AI関連の動画を見てくれると嬉しいです！
⏫️ついつい飲みすぎちゃうときには、サプリに頼るのも良いわね！
🌸送料無料でたった『540円』で購入できるわ！Amazonアカウントも使えるわよ！
