Ma510884 習作集
ゲーム制作
落ちものパズルゲーム
セガの
ぷよぷよプログラミング
で学習して、落ちものパズルゲームを作成しました。 キャラクターは5種類から選べるようになっています。manaby君バージョンは
こちら
です。
Trigger Happy(Unity FPSゲーム)
こちら
の記事を参考に、UnityでFPSゲームを作成しました。制限時間まで陣地を守り、敵をなるべく多く倒します。制作過程は
こちら
です。
Bird Strike(Unity 2Dゲーム)
manabyのeラーニングで学習して、Unityでスマートフォン用2Dゲームを制作しました。それをweb用に移植したものがこちらです。マウスでクリックして鳥をジャンプさせ、障害物をよけていきます。制作過程は
こちら
です。
Unityちゃんの冒険(Unity 3Dゲーム)
manabyのeラーニングで学習して、Unityで3Dゲームを作成しました。カプセルを集めていってゴールに向かいます。制作過程は
こちら
です。
自立対戦型のプログラム(Scratch)
オープンソースのビジュアルプログラミング言語、
Scratch(スクラッチ)
を使用して自立対戦型のプログラムを作成しました。 novalueの記事に飛びます。ゲームのデータは
こちら
です。
ネコの大冒険(Scratch)
オープンソースのビジュアルプログラミング言語、
Scratch(スクラッチ)
を使用してネコのアクションゲームを作成しました。 novalueの記事に飛びます。ゲームのデータは
こちら
です。
魔法使い大戦(Scratch)
オープンソースのビジュアルプログラミング言語、
Scratch(スクラッチ)
を使用して魔法使いのシューティングゲームを作成しました。 novalueの記事に飛びます。ゲームのデータは
こちら
です。
クリックキャット(Scratch)
オープンソースのビジュアルプログラミング言語、
Scratch(スクラッチ)
を使用してネコをクリックするゲームを作成しました。 novalueの記事に飛びます。ゲームのデータは
こちら
です。
ホームページ制作
3D CAD(Fusion360) ポートフォリオ
WordPressのテンプレート「
Espied
」を利用して、3Dモデル ポートフォリオを作成しました。 掲載するモデルの点数が多いため、毎日少しずつ更新作業しました。また、サーバーの容量も限られているので、画像を適切な大きさに、かつ圧縮率の高いJPEG形式にしました。
Photoshopデータからホームページ制作
Adobe社のPhotoshopで使われているPSDデータから画像を切り出し、レイアウトをそのまま再現しました。 素材は
こちら
のフリー素材を使用しました。 iOS、Androidでも表示・動作確認をし、何れもレイアウトが崩れないように細かく調整しました。
JavaScript swiper
JavaScriptの
swiper
を用いて、画像のスライダーを作成しました。 ボタンをクリック、又は画像をスワイプさせると、画像が遷移します。意図した動作とレイアウトになるまで、かなりの試行錯誤を重ねました。
WordPress テンプレート作成
WordPressのテンプレートを、PHPを用いて作成しました。 WordPressのフォーマットに則って作成しなければならないため、最初は勝手が分からず苦戦しました。
JavaScript Study02 スムーススクロール
JavaScriptの
スムーススクロール
を利用して、リンク先まで設定した時間で移動するようにしました。近くのリンク先にはゆっくりと、離れたリンク先には素早く、スムーズに移動します。
JavaScript Study01 インフィニットスライド
JavaScriptの
インフィニットスライド
を利用して、無限にループするスライダーを作成しました。 実装は比較的容易でしたが、途切れることなくスムーズに動作させるのは難しかったです。
html5/css3 Study09
これまで作成してきた物を総合して、ホームページを作成しました。 ボリュームがあるので、css(レイアウトの指定先)が競合しないように微調整を繰り返し、上手く動作するように注力しました。
html5/css3 Study08 インラインフレーム
インラインフレームと呼ばれる方法を用いて、ページの中に別のページを組み込みました。 この方法ならば、限られたスペースでも大きいサイズの物を取り扱えますし、画像・動画等も組み込み可能です。
html5/css3 Study07 フッターリンク
ホームページで良く見受けられる、フッターを作成しました。パソコンでは横一列に、スマートフォンでは縦に重なるレイアウトになります。 スマートフォンでも操作しやすいように、タップの検知範囲を枠内全部に拡大しました。
html5/css3 Study06 新着情報
ホームページで良く見受けられる、新着情報一覧を作成しました。 背景に交互に色を付けているのは自動的に行っていますので、何行でも対応できます。
html5/css3 Study05 画像付記事
ホームページで良く見受けられる、画像と記事が段組になっているレイアウトを作成しました。パソコンでは段組2段、スマートフォンでは縦のレイアウトになります。
html5/css3 Study04 画像拡大&キャプション
画像にマウスカーソルを重ねると、画像が拡大して下方からキャプションが表示されるようにしました。 画像の拡大とキャプションの表示を同時に動作させられなかったり、キャプションが上手く隠れなかったりと上手くいくまで大変でした。
html5/css3 Study03 背景 レスポンシブ対応
パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なサイズの背景画像が選択されるようにしました。 背景画像を意図した大きさで、画面いっぱいに表示させるのに試行錯誤しました。
html5/css3 Study02 縦横レイアウト変更
パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なレイアウトになるようにしました。 1つ目の物より構造が複雑で、レイアウトが変わっても辻褄が合うようにするのが大変でした。
html5/css3 Study01 縦横配列変更
パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なレイアウトになるようにしました。 htmlの基本構造はPC・スマホ共通で、cssでレイアウトを変更しています。画面幅に応じて並び方を変え、かつ、きちんと真ん中に表示させるのに苦労しました。