ポンクソフト

テーブルを使ったシンプルなドット絵エディタを作ってみる - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

テーブルによるドット絵エディタ

エクセルを方眼紙のようにして書類を書く人いますよね。自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。

ドット絵エディタのデモ

16×16ドット限定です。下に一列に並んだパレットから色をクリックして塗ります。

ドット絵エディタのソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>ドット絵エディタ</title>
<script>
$(function() {
  var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];
  var pushed = false;
  var color = '';

  var row = '<tr>';
  for (i = 0; i < 16; i++) row += '<td>&nbsp;</td>';
  row += '</tr>';

  for (i = 0; i < 16; i++) $('#canvas').append(row);

  $('#palette').html(row);
  for (i = 0; i < 16; i++) $('#palette td').eq(i).css({backgroundColor: '#' + pals[i]});

  $('#canvas td').mousedown(function() {
    pushed = true;
    $(this).css({backgroundColor: color});
    return false;
  }).mousemove(function() {
    if (pushed) $(this).css({backgroundColor: color});
    return false;
  });
  $(document).mouseup(function() {
    pushed = false;
  });

  $('#palette td').click(function() {
    $(this).css({borderColor: 'yellow'}).siblings().css({borderColor: 'gray'});
    color = $(this).css('background-color');
  }).eq(0).click();
});
</script>
<style>
table {
  border-collapse: collapse;
  margin-bottom: 16px;
}
td {
  border: 1px solid gray;
  width: 16px;
  line-height: 16px;
  cursor: pointer;
}
</style>
</head>
<body>
<table id="canvas"></table>
<table id="palette"></table>
</body>
</html>

プログラムの解説

変数定義

var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];
var pushed = false;
var color = '';
palsはパレットの色を16進数3桁(CSSの定義方法)で定義しています。16個のパレットがあるので配列も16個です。pushedはマウスのボタンが押されているときだけtrueになるフラグです。colorには現在選択している色が入ります。

画面生成

var row = '<tr>';
for (i = 0; i < 16; i++) row += '<td>&nbsp;</td>';
row += '</tr>';
rowには1行分のグリッドのHTMLが入ります。
for (i = 0; i < 16; i++) $('#canvas').append(row);
1行分のグリッドを16回繰り返して16×16のグリッドを生成しキャンバスとしています。
$('#palette').html(row);
for (i = 0; i < 16; i++) $('#palette td').eq(i).css({backgroundColor: '#' + pals[i]});
配列palsの色を背景色として下部パレット部分を生成しています。

キャンバスの色塗り処理

$('#canvas td').mousedown(function() {
  pushed = true;
  $(this).css({backgroundColor: color});
  return false;
キャンバスのグリッド上でマウスが押下されたとき、pushedフラグを立てて背景色を現在選択中のパレットの色にしています。
}).mousemove(function() {
  if (pushed) $(this).css({backgroundColor: color});
  return false;
});
キャンバスのセル上でマウスを移動したとき、マウスが押下されているときのみ背景色を現在選択中のパレットの色にしています。
$(document).mouseup(function() {
  pushed = false;
});
画面のどこであっても、マウスのボタンを離したときに、pushedフラグをクリアしています。

パレットの選択処理

$('#palette td').click(function() {
  $(this).css({borderColor: 'yellow'}).siblings().css({borderColor: 'gray'});
  color = $(this).css('background-color');
パレットのセル上でクリックしたときの処理です。まずクリックしたセルのボーダー色を黄色にして選択されていることを明確にし、それ以外のセルを灰色にしています。siblings()は自分の兄弟要素、つまり自分以外のセルということになります。次に変数colorに選択されたパレットの色をセットしています。
}).eq(0).click();
初期状態として、一番左のセルをクリックした状態にします。

注意点とおまけ

ちなみに、このドット絵エディタには「保存」ができないという致命的な欠点があります。JavaScriptのみだと保存は難しいのですが、ひとつ解決策を考えました。
ドット絵エディタ(保存付き)
保存ボタンを押すとテキストエリアに文字列が出てくるので全選択して、拡張子ppmのファイルで保存してください。ppmファイルはPhotoshopやIrfanViewなどのフリーのビュアーで見ることができます。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0