CodePenに避難させたjsdo.itサルベージコードめも

siouxcitizen

2021年8月8日 14:25

CodePen post publishedに書いていたもののうち、かつてコードを投稿していたjsdo.itのコードをCodePenに避難させたもののリストを作成してみます。　

元々のコード作成時期はかなり前です。　なので、使用しているライブラリの種類やバージョンもかなり古いものが多いです。　コードの記法もEcmascriptやTypescriptを使用しないただのJavaScriptとなっています。

CodePenのリスト元はココです。

コードのタイトル文字列だけのリンクは実行コード＆コード付き画面へのリンク、画像サムネイルはフルスクリーンのコード実行画面へのリンク、となっています。

ライブラリ未使用のもの

最初の頃にライブラリを使用せずにデフォルトのcanvas機能だけでどれだけできるか試してみたものです。　少しゲーム的なものになるとすぐに苦しくなってきたので、そのすぐ下にあるCreateJSというライブラリを使用するようになりました。　

ではまず、記念すべき？最初のjsdo.it投稿コード、よくある「Hello World!」表示するだけの単純なコードから開始です。

My First jsdo.it Code !

canvasで文字表示
 canvasで矩形領域ぬりつぶし

canvasで↑↓←→ボタンで矩形領域の移動
 canvasでloopで繰り返し矩形領域ぬりつぶし
 canvas上の移動する矩形領域の当たり判定

HTMLでbase64形式画像の表示
 JavaScriptでbase64形式画像の表示
 ↑↓←→ボタンでcanvas上のbase64形式画像の移動
 canvas上の2つのbase64画像をゲーム的？loopで表示

（失敗）ゲームっぽい画面表示、にできず。。。
前回コードから勇者の上下左右画像の表示機能を追加しました
 前回コードから障害物に引っかかる？機能を追加しました
 前回コードから勇者の移動をなめらか？にしました
 前回コードからマップスクロール機能を追加しました
 前回コードからFirefoxでも動くマップスクロール機能にしました
 （失敗）前回コードから背景だけスケール3倍率表示にしてみました
 ワンダフルクエスト jsdo.it Ver.

HTML5のAudio機能でMP3ファイルを再生
 HTML5のAudio機能でMP3ファイルをループ再生
 （失敗）HTML5のAudio機能でMP3ファイルを同時再生
 HTML5のAudio機能でRPG風MP3ファイルをテスト再生
 HTML5のAudio機能で音量調整の機能をテスト
 HTML5のAudio機能でOGGファイルのSE音を再生
 HTML5のAudio機能でMP3ファイル読込後にボタンを活性化

CreateJS使用のもの

上記の「ライブラリ未使用のもの」にある「ワンダフルクエスト」をもう少しまともな動きのものにしたいと思い、CreateJSというライブラリを使用していろいろ取り組んだ記録となります。　

最近ならCreateJSではなくて、以下のnoteで使用しているPhaserというライブラリを使用するところでしょうか。
・CodePenでPhaser3チュートリアル再現
・Phaser3でいろいろテスト on CodePen
・Phaser3で画面遷移 on CodePen
・itch.ioにHTML5で作成したゲームを投稿してみるテスト

では、以下よりCreateJSを使用したコードのリストとなります。

CreateJS 0.6.1 前回コードからスクロール機能追加
 CreateJS 0.6.1 前回コードから戦闘もどき機能追加
 CreateJS EaselJS 0.6.1 前回コードから戦闘機能を改良

CreateJS SpriteSheet　キャラ / マップチップ表示

CreateJS SpriteSheet　画面遷移の機能を追加

Three.js使用のもの

Three.jsという3D表示のためのライブラリを使用していろいろと試してみたときの記録となります。　ライブラリのバージョンはかなり古くr87となっています。　最近の自分のコーディングでは、バージョンr110を使用したコードのリストとなる
・Three.js r110　CodePen投稿コードまとめ
がありますが、これらも元々は以下のバージョンr87のコードに、少し改善・更新をしたり、使用ライブラリを追加したものとなっています。

ついでに最近はThree.jsへの興味からの延長で、同じく3D表示のためのライブラリのBabylon.jsのコーディングも行うようになり、
・Babylon.js v3.3.0　CodePen投稿コードまとめ
・Babylon.js v4.2.0　CodePen投稿コードまとめ
といったようにまとめています。

ではまず、いつものバージョンごとのThree.jsコードシリーズと同じように3Dの立方体、Boxを表示するコードからスタートです。

Three.js r87でBoxを表示(WebGL使用)
Three.js r87でPlaneを表示(WebGL使用)
Three.js r87でSphereを表示(WebGL使用)