作品集
ブロク記事で鋭意作成中(不定期)のスクラッチゲーム
ブロク記事で鋭意作成中(不定期)のHTML&CSSゲーム
ブログ
ブログ記事一覧です。ボタンをクリックして各トピックごとに記事をフィルタできます。
HTML＆CSS関連
HTMLアプリ Svelte SVG アニメーション【SvelteでHTMLアプリ開発】テオ・ヤンセン機構の多足歩行をシミュレートしてみる
2022/05/15前回に引き続き「テオ・ヤンセン機構」をSvelteアプリで視覚化する話です。今回はテオ・ヤンセン機構で多足歩行を再現するまでの実装手順を紹介します。
ID#:82- HTMLアプリ Svelte SVG アニメーション
【SvelteでHTMLアプリ開発】テオ・ヤンセン機構をSvelteアプリで再現してみる
2022/05/14今回のお題として「テオ・ヤンセン機構」を簡単に視覚化するため、SvelteでHTMLアプリを作って遊んでみます。
ID#:81 - HTMLアプリ Svelte Sass フォント
【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる
2022/03/06今回はSvelteアプリにNPMインストールする形式のCSSスタイルファイルの導入方法と、外部フォントを利用する方法の2本立てで解説していきます。
ID#:79 - HTMLアプリ Svelte Sass ミックスイン
【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる
2022/03/05今回はSvelteアプリを例にとって、HTML&CSSアプリでSassのミックスインをどう扱えば良いかを、Typed.cssを使って解説してみます。
ID#:78 - HTMLアプリ Svelte SVG画像 タイマー
【HTMLアプリ作成】SvelteでSVG要素を直接操作して制限時間表示できるタイマーを作ってみる
2022/01/20今回はSvelteアプリ作成に慣れるために、HTML＆CSSゲームなどに応用のできるタイマーっぽいものを一から作成する過程を解説してみます。
ID#:77 - htmlゲーム作成 四択ミニクイズ 基礎講座
【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方
2022/01/18このページでは自前で簡単に作れるHtml&Cssゲーム「四択クイズ」の作成過程をまとめています。Scratchプログラミングを卒業し、本格的なプログラミングをスタートしたい中高生向けの内容になっております。
ID#:50 - Html Svelte 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録⑦】Svelteアプリの作り方入門！HTML＆CSSゲームをSvelteプロジェクトへ移行(マイグレーション)する
2022/01/18不定期で四択クイズミニゲームのリファクタリングを進めていく話の第７段です。今回はこれまでネイティブなHTML&CSSを使って作ってきた四択クイズアプリをSvelteアプリとして再構築・マイグレーションする手順を解説していきます。
ID#:76 - Html Javascript 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録⑥】ネイティブなJavascriptスクリプトをフル活用してHTMLタグ要素(DOM)を自動生成する
2022/01/14不定期で四択クイズミニゲームのリファクタリングを進めていく話の第６段です。今回はJavascriptフレームワークを導入してHTML&CSSアプリを開発していく前に知っておきたい基本事項を確認していきます。
ID#:75 - Html Sass Javascript 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録⑤】Sassリストでクイズの問題を動的に管理する
2022/01/11不定期で四択クイズミニゲームのリファクタリングを進めていく話の第５段です。今回はSassリストを使ってで四択クイズミニゲームのデータ構造を動的に管理する方法を検討します。
ID#:74 - Html Javascript 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録④】HTMLのスクリプト部分(Javascript)をfunctionでまとめる
2022/01/09不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第４段です。今回はHTMLのスクリプトタグにあるJavascriptコードの見直しを図ります。
ID#:73 - Html Css Sass 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録③】Sassリストでゲームデータを集約してHTML要素を初期化する
2021/12/22不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第３段。今回はSassリストを高度に使いこなし、HTML擬似要素の内容を初期化する方法を紹介します。
ID#:72 - Html Css Sass 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録②】擬似要素のcontentプロパティでクイズの正誤判定に使う
2021/12/18不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第２段です。今回はCSS擬似要素のcontentプロパティを活用したデータ埋め込みのSassならではのテクニックを紹介します。
ID#:71 - Html Css Sass 四択ミニクイズ
【Html&Cssで作る四択クイズゲーム開発記録①】Sassのリストと@forループを使ったコード省力化の話
2021/12/15不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第１段です。今回はSassの@forループとリストのキーや値の取り出しの使い方を考えてみます。
ID#:67 - HTMLゲーム作成 Inkscape SVG画像
【Html&Cssゲーム作成】Cssバックグラウンドスライド式のアニメーション用pngをInkscapeで作成する方法
2021/05/24Html＆Cssは正確な意味ではプログラミング言語ではないのですが、得手のCssのテクニックを覚えると、非常に単純なミニゲームを作ることが出来るようになります。今回は、Cssゲーム＆スクラッチゲーム両方で使えるようなアニメーション用png画像をInkscapeで作成する方法を検討してみようと思います。
ID#:41 - SVG画像 スクラッチ HTMLアプリ 基礎講座
[Scratch基礎講座] SVG画像をScratchステージの背景として使う 〜 viewportの意味とviewBox属性の使い方
2021/02/14Scratchで扱えるベクトル画像はsvgとなりますが、Scratch3になってからはブラウザ駆動のSPA(Single-Page-Application)としてどのようなブラウザーからも動作するようになりましたので、よりWebと親和性の高いsvg画像を積極的に利用していく方が、Scratchゲーム開発の応用も捗っていくことと思います。今回はScratchアプリの基礎講座としてのsvg画像の取扱で重要なビューポート(Viewport)の概念と、使い方の基礎を説明していきます。
ID#:47
