はてなブログで(テトリスで)遊ぶ方法

管理人おすすめ情報 LINEのデータ消費がゼロ月額500円〜…最強スペックの格安SIMがこちら

テトリミノ

WordPressでは動作しないようです

こんにちは、はてなブログ研究家のNAEです。

はてなブログのカスタマイズや内部構造の特性を用いた高速化など、はてなブログでは色々と遊んできました。

でもそれらはいずれも「カスタマイズ」の範囲内。はてなブログの管理画面「設定」→「デザイン」からいじれるものに限られていました。

今回はそのカラを破って、記事本体で遊んでみたいと思います。

というか、記事本体で遊べるようにしてみました。

スポンサーリンク
スポンサーリンク

はてなブログで遊ぶ方法

はてなブログの記事にはHTMLを直接記述できます。

それこそHTMLのDOMだけでなくJavaScriptだって。やろうと思えばDOMのstyle属性にCSSの記述を入れることもできます。

つまり、記事ページというのは本当になんでもできる場なんですね。遊び放題です。

はてなブログの記事にテトリスを埋めこんでみた

そこで今回、下記のサイトを参考にはてなブログの記事にテトリスを埋めこんでみました。

参考:【JavaScript】200行で作るテトリスのレシピ【HTML5】 – コードレシピ

はてなブログテトリス(PC推奨)


盤面を一度クリックしてからお楽しみください

←/→:移動
↑:回転
↓:落下



スポンサーリンク

はてなブログテトリスでの工夫点

参考にさせていただいたサイトではHTML、JavaScript、CSSの3点セットでテトリスを実装しています。

またテトリスページが独立しておりスクロールが発生しないことが前提となっていました。このままでははてなブログの記事ページでは使えません。

そのため記事にテトリスを埋めこむにあたり、下記3点、変更しました。

CSSのインライン化

はてなブログでは<style>タグを記事内に記述できません。これははてなブログの仕様です。

そのため掲載されていたCSSのコードを、HTMLのDOMの属性値に直接書き込んでしまうインライン化を施しました。

といっても、元CSSでは<canvas>に対するものしかなかったのであまり手間にはなっていません。

テトリス面の大きさ調整

2つめはテトリス面の大きさを少し縮小しました。

はてなブログの記事画面ではヘッダーやサイドバーなど記事本体以外の要素も表示されるため、独立したWebページ前提の元コードだとすこしテトリス面のサイズが大きすぎ、1画面内におさまらなかったのです。(Chromebook Flipの場合)

そのため

  • <canvas>要素に指定された幅と高さ
  • JavaScript内に定義されているブロックのサイズ

をちょっとだけ修正して、全体が縮小表示されるようにしました。

本当はViewportなどを使ってデバイスの画面の大きさに応じて自動的に拡大縮小させたかったのですが、手間だったのでやめました。

ゲームプレイ時に上下キーでスクロールしてしまうのを防止

テトリス面が画面内に収まっても、プレイするときにPCの上下左右キーを押すと画面がスクロールしてしまっていました。

そのためテトリス面にフォーカスがあたっているときは、「矢印キーが押された」という情報をスクロールを司るブラウザ側に伝えないよう、JavaScriptを修正しました。

スポンサーリンク

まとめ:はてなブログの記事欄は結構なんでもできる

以上、はてなブログの記事にテトリスを埋めこんで遊んでみました。

一部HTML要素ははてなブログ側でNGになっているものの、かなり多くの要素を自由に使えるため、幅広く遊べると思います。

それこそ理論上はスーパーマリオも埋め込めちゃうと思いますよ。下記サイトはHTML+JavaScript+CSSで実装された、ブラウザで遊べるスーパーマリオです。

参考:HTML5 Mario

はてなブログはいろいろ遊べて楽しいですね。次は何をしようかな?

スポンサーリンク
スポンサーリンク
スポンサーリンク

NAEをフォローしてみる

あわせて読みたい

あわせて読みたい