メインコンテンツへスキップ

デジタルインベーダーのようなゲームを作った

crisp-game-libという軽量ゲームライブラリを使って、昔なつかしいデジタルインベーダーのようなゲームを作った。下の画像をクリックすると実際に遊べます。

Invader
デジタルインベーダーはカシオから1980年に発売されたMG880という電卓に搭載されていたゲームで、右からせまってくる数字と同じ数字を合わせて消していくシンプルなもの。

表示された数字を早く消すほど得点が高い(10~60点)のだが、直近で消した2つの数字の合計が10になるとUFO(n表示)が登場し300点得られるため、高得点を目指すにはやみくもに早く消せば良いわけではないのです。

crisp-game-libは初めて使いましたが、割り切った仕様がシンプルでわかりやすかったです。こういうカジュアルなゲームを作るのは楽しいですね。

それにしても当時かなり遊んだ記憶があるのに、すっかり存在を忘れていたなぁ…と思ったら復刻していた。

カシオ ゲーム電卓 手帳タイプ 10桁 SL-880-N
カシオ ゲーム電卓 手帳タイプ 10桁 SL-880-N

関連記事

crisp-game-lib

crisp-game-libはブラウザゲームを開発するための軽量なゲームライブラリ。JavaScriptでゲームを開発し簡単に公開することができる abagames/crisp-game-lib: Minimal JavaScript library for creating classic arcade-like mini-games running in the browser

BBCode

BBCode (Bulletin Board Code) は、掲示板やフォーラムなどのオンラインプラットフォームで、ユーザーが投稿内容を装飾するために使用するマークアップ言語。 HTMLと似た形式だがが、よりシンプルで安全な方法でテキストを装飾できるように設計されている。 BBCodeのタグは、角括弧 [ ] を使い、開始タグと終了タグで囲むことで効果を適用する。 タグ 説明 使用例 [b] 太字 [b]太字のテキスト[/b] [i] 斜体 [i]斜体のテキスト[/i] [u] 下線 [u]下線付きテキスト[/u] [s] 取り消し線 [s]取り消し線のテキスト[/s] [url] URLリンク [url]https://example.com[/url] [url=] テキストリンク [url=https://example.com]リンク[/url] [img] 画像を挿入 [img]https://example.com/image.jpg[/img] [quote] 引用 [quote]引用したいテキスト[/quote] [code] コードブロック [code]コード例[/code] [list] 順序なしリスト [list][*]アイテム1[*]アイテム2[/list] [list=1] 順序付きリスト [list=1][*]アイテム1[*]アイテム2[/list] [color=] テキストの色を指定 [color=red]赤いテキスト[/color] [size=] テキストサイズを指定 [size=20]大きいテキスト[/size] [font=] フォントを指定 [font=Arial]Arialフォントのテキスト[/font] [center] テキストを中央揃え [center]中央揃えのテキスト[/center] [right] テキストを右揃え [right]右揃えのテキスト[/right] [left] テキストを左揃え [left]左揃えのテキスト[/left] [email] メールアドレスをリンク [email]example@example.com[/email] [table] 表を作成 [table][tr][td]セル1[/td][td]セル2[/td][/tr][/table] [tr] 表の行を作成 [tr][td]セル1[/td][td]セル2[/td][/tr] [td] 表のセルを作成 [td]セル1[/td] [spoiler] ネタバレ部分を隠す [spoiler]隠された内容[/spoiler] [youtube] YouTube動画を埋め込む [youtube]動画ID[/youtube] [align=] テキストの配置を指定 [align=center]中央揃え[/align] [hr] 水平線を挿入 [hr]

Macのキーボード特殊記号の表記

Macで良く使う特殊記号をコピペ用に置いておく。それにしても、⌅↖︎↘︎⇟⇞なんて覚えられないよね。 記号 キー ⌘ commandキー ⌥ optionキー または altキー ⇧ shiftキー ⌃ controlキー ⌅ Enterキー ↵ Returnキー ⇥ Tabキー ⌦ deleteキー ⌫ forward deleteキー ⎋ escキー ↖︎ homeキー ↘︎ endキー ↑↓←→ カーソルキーの上下左右 ⇟ page downキー ⇞ page upキー

Obsidianの検索機能

Obsidianの標準の検索機能に関するメモ。検索 - Obsidian 日本語ヘルプ - Obsidian Publishより良く使うものを抜粋した。 ショートカットキー # Ctrl+Shift+Fまたは⌘+⇧+F 検索結果表示のオプション # 検索窓の右にあるボタンを押すと検索結果表示のオプションを設定できる。検索結果が多い場合などは、折りたたんでノート名であたりをつけたりするのに便利。 検索結果の埋め込み # ```query embed OR search ``` などとするとノート内に検索結果を埋め込むことができる。この機能はObsidian PublishでもQuartzでもサポートされていない。 検索クエリ # 検索条件 書きかた 説明 AND検索 foo bar fooとbarが含まれる OR検索 foo OR bar fooまたはbarが含まれる NOT検索 foo -bar fooを含むがbarを含まない foo スペースを含む文字列の検索 “foo bar” foo barという文字列を探す 特殊記号のエスケープ \" \\に続けて書くと通常の文字して検索 グループ化 ((a OR b) (c OR d)) 検索条件のグループ化 正規表現 /f../ //の中に正規表現を書く ファイル名検索 file:".jpg" ファイル名に.jpgを含むファイルを検索 ファイルパス検索 path:“journal/” ファイルパスにjournalを含むファイルを検索 タグ検索 tag:#mac タグに#macを含むノートを検索 大文字小文字を無視 ignore-case:(ABC) 大文字小文字を区別せずにABCを検索 大文字小文字を区別 match-case:(ABC) 大文字小文字を区別してABCを検索 ユースケース # 特定のディレクトリ配下を除外して検索 # 検索結果にノイズが含まれてしまうため、作業ログを置いているjournalというディレクトリは除外して検索したい。

ソートして重複行を削除するTextwellのアクション

ファイルの内容を昇順にソートして重複した行を1行にするTextwellのアクションを書いた。 いわゆる$ sort foobar | uniqするアクションです。 https://gist.github.com/htakeuchi/fd9e36227ad1688b31e9b84eafbf17a9 const { text, range } = T; const selectionStart = range.len > 0 ? range.loc : 0; const selectionEnd = range.len > 0 ? selectionStart + range.len : text.length; const lines = text.split('\n'); let pointerStart = 0; let replacingRangeLoc = 0; const hitLines = []; for (const line of lines) { const pointerEnd = pointerStart + line.length; if (pointerStart > selectionEnd) break; if ( (pointerStart <= selectionStart && selectionStart <= pointerEnd) || (pointerStart <= selectionEnd && selectionEnd <= pointerEnd) || (selectionStart < pointerStart && pointerEnd < selectionEnd) ) { if (hitLines.length === 0) replacingRangeLoc = pointerStart; hitLines.push(line); } pointerStart = pointerEnd + 1; // 1 means a line break. } const blankLines = []; const numLines = []; const strLines = []; hitLines.forEach((content) => { const intContent = parseInt(content); if (!content.match(/\S/)) { blankLines.push(content); // Ignore blank line } else if (isNaN(intContent)) { strLines.push(content); } else { numLines.push({ num: intContent, str: content }); } }); numLines.sort((a, b) => a.num - b.num); const sortedNumLines = numLines.map(({ str }) => str); strLines.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); const sortedLines = [...blankLines, ...sortedNumLines, ...strLines]; // Remove duplicates const uniqueLines = [...new Set(sortedLines)]; // Join lines into text const replacingText = uniqueLines.join('\n'); T('replaceRange', { text: replacingText, replacingRange: { loc: replacingRangeLoc, len: selectionEnd - replacingRangeLoc }, selectingRange: { loc: replacingRangeLoc + replacingText.length, len: 0 }, });

Amazonの商品紹介Markdownをつくるブックマークレット

このサイトはObsidianで管理しているノートをQuartzで公開しており、全てのテキストはMarkdownで書いている。 このため、Amazonの商品紹介をするのがなかなか面倒であり、これを改善するためのブックマークレットを書いた。 使い方 # Amazonの商品ページに行ってこのブックマークレットを起動すると、以下のようなMarkdownが生成され、クリップボードへコピーされる。 ![[オン] ランニングシューズ Cloudmonster メンズ](https://a.media-amazon.com/images/I/51lG1xvL7nL._AC_SY200_.jpg) [[オン] ランニングシューズ Cloudmonster メンズ](https://www.amazon.co.jp/gp/product/B0CN337TNH/?tag=namaraiicom-22) 出力はこんな感じ。殺風景だけどMarkdownだけで書いていて、専用のCSSを当てていないのでやむをえない。 [オン] ランニングシューズ Cloudmonster メンズ 実装 # 実装はこんな感じ。Amazon(JP)で複数ジャンルの商品ページのHTMLを確認し、チェックした範囲では動作しているが、うまく動かないページもあると思う。 もし、動かないページをみつけたらこちらまでご連絡いただければ幸い。ブックマークレットへの変換は以下のページが便利です。 Bookmarklet スクリプト変換 (function() { function copyToClipboard(text) { navigator.clipboard.writeText(text).then(function() { alert('クリップボードにコピーされました'); }).catch(function(error) { console.error('クリップボードへのコピーに失敗しました', error); }); } function getElement(selector) { return document.querySelector(selector); } try { var size = 200; var asinElement = getElement('input#ASIN'); if (!asinElement) throw new Error('ASINが見つかりませんでした'); var asin = asinElement.value; var titleElement = getElement('span#productTitle'); if (!titleElement) throw new Error('製品名が見つかりませんでした'); var title = titleElement.textContent.trim(); var thumbnailUrl = getElement('img#landingImage')?.src || getElement('img[src*="_SY"]')?.src || getElement('input#productImageUrl')?.value || getElement('img[src*="_SX"]')?.src; if (!thumbnailUrl) { throw new Error('サムネイル画像が見つかりませんでした'); } var productUrl = 'https://www.amazon.co.jp/gp/product/' + asin + '/?tag=namaraiicom-22'; var modifiedUrl; var sizeMatch = thumbnailUrl.match(/_(_SY|_SX)(\d+)_/); if (sizeMatch && sizeMatch[2]) { modifiedUrl = thumbnailUrl.replace(/_(_SY|_SX)\d+_/, `_${sizeMatch[1]}${size}_`); } else if (thumbnailUrl.match(/_(SY|SX)(\d+)_/)) { modifiedUrl = thumbnailUrl.replace(/_(SY|SX)\d+_/, `_SY${size}_`); } else { modifiedUrl = thumbnailUrl; } var markdownContent = `![${title}](${modifiedUrl})\n\n[${title}](${productUrl})`; copyToClipboard(markdownContent); } catch (error) { console.error(error); } })();