タコキンのPスクール・ブログ

KAPLAY と rot.js を使って、本格的なローグライクゲームを制作する連載記事の目次ページです。初心者の方でも一歩ずつ学べる構成になっています。

KAPLAY と rot.js を使ったローグライクゲーム開発の第7回目。ダンジョン内にアイテム（ポーション、巻物）を配置し、拾って使う「インベントリシステム」を実装します。さらに、階段を降りて次の階層へ進む仕組みを作り、冒険をより深くしていきます。

KAPLAY と rot.js を使ったローグライクゲーム開発の最終回。ゲームオーバー画面の実装、バランス調整、効果音の追加を行い、最後にWebサイトとして公開する手順を解説します。

KAPLAY と rot.js を使ったローグライクゲーム開発の第6回目。今回は、プレイヤーのHPを表示する「HPバー」と、戦闘の様子を伝える「メッセージログ」を作成して、画面をゲームらしく彩ります。

KAPLAY と rot.js を使ったローグライクゲーム開発の第4回目。プレイヤーの周りだけが見える「視界システム（FOV）」を実装します。暗闇を探索するドキドキ感を演出し、探索済みのエリアを記憶する仕組みを解説します。

KAPLAY と rot.js を使ったローグライクゲーム開発の第5回目。今回はダンジョンに「モンスター」を登場させます！ランダムな配置、プレイヤーを追いかけてくるAI（経路探索）、そして体当たりで攻撃する戦闘の基本を解説します。

KAPLAY と rot.js を使ったローグライクゲーム開発の連載第1回目。開発環境の構築から、KAPLAY の初期設定、そして「Hello World」を表示するまでを解説します。

KAPLAY と rot.js を使ったローグライクゲーム開発の第2回目。ドット絵素材の読み込みから、主人公キャラクターの表示、そしてキーボードを使ったグリッド移動（マス目移動）の実装を解説します。

KAPLAY と rot.js を使ったローグライクゲーム開発の第3回目。rot.js のダンジョン自動生成アルゴリズム（Digger）を使って、遊ぶたびに形が変わる本格的なダンジョンを作成し、KAPLAY の addLevel で描画する方法を解説します。

Kaplayでテトリスの作成するゲーム開発講座で作ったサンプルプログラムを記事として置いておきます。

Kaplayを使ったテトリスの作成手順を通じて、Javascriptプログラミングを学習上で欠かせない基礎がためを解説していきます。

Kaplayでテトリスの作成するゲーム開発講座の第一回目です。まずはKaplayを使うための環境作りを解説していきます。

Kaplayでテトリスの作成するゲーム開発講座の第二回目です。テトリスでお馴染みのブロックの生成とその落下ロジックを考えていきます。

Kaplayでテトリスの作成するゲーム開発講座の第三回目です。テトリスでのブロック回転と接地について考えていきます。

Kaplayでテトリスの作成するゲーム開発講座の最終回です。ブロックの揃った行の消去とスコア表示までを完成させます。

Phaser.js＋Svelteゲームアプリ作成の解説第3回目です。今回からPhaser3でシューティングゲームの基礎となるプログラミングに着手します。

オリジナルPhaser.js＋Svelteゲームアプリ作成の解説記事第2回目です。今回はPhaser3でローカルに保存した画像ファイルを読み込んでシーンに表示させる基本を解説します。

Javascriptの高等教育向けのプログラミング学習をテーマとした高度なHTMLゲームをPhaser.js＋Svelteアプリの手順をじっくり解説していきます。

Html＆CSSで単純なミニゲームやScratchゲームを作る上で欠かせない、CSSで使えるアニメーション用png画像をInkscapeで作成する方法を検討してみます。

HTML&CSSベースのブラウザで動くミニゲーム上で表示した複数のスプライトが接触している場所を高速で調べるアルゴリズム・『四分木法』をJSメインで実装してみます。

HTML&CSSベースのブラウザで動くミニゲームを作る際に便利なプレーンなCSS/JSからスプライト(動きのある画像要素)間の接触を判定する基礎を解説します。

スマホのようなタッチパネル式のイベント入力をブラウザから適切に処理できるようにSvelte製のHTMLアプリを作成するときの注意点を紹介します。

SvelteではじめるRPG自作ゲーム開発の連載記事・第４回目です。スマホやタブレットのブラウザに表示させるときに適切に表示させられるようにSvelteコンポーネントをフレキシブル対応させてみましょう。

SvelteではじめるRPG自作ゲーム開発の連載記事・第３回目です。コントローラーからキャラクターを操作するためのコンポーネントを作成してスプライトを操作してみます。

SvelteではじめるRPG自作ゲーム開発の連載記事・第２回目です。キーボード入力でキャラクターを操作するためのコンポーネントとゲームエンジン部分の基礎的な実装を解説します。

SvelteではじめるRPG自作ゲーム開発の連載記事・第１回目です。初回はタイルマップをブラウザに簡単に表示させるためのテクニックを解説します。

前回に引き続き「テオ・ヤンセン機構」をSvelteアプリで視覚化する話です。今回はテオ・ヤンセン機構で多足歩行を再現するまでの実装手順を紹介します。

今回のお題として「テオ・ヤンセン機構」を簡単に視覚化するため、SvelteでHTMLアプリを作って遊んでみます。

今回はSvelteアプリにNPMインストールする形式のCSSスタイルファイルの導入方法と、外部フォントを利用する方法の2本立てで解説していきます。

今回はSvelteアプリを例にとって、HTML&CSSアプリでSassのミックスインをどう扱えば良いかを、Typed.cssを使って解説してみます。

今回はSvelteアプリ作成に慣れるために、HTML＆CSSゲームなどに応用のできるタイマーっぽいものを一から作成する過程を解説してみます。

このページでは自前で簡単に作れるHtml&Cssゲーム「四択クイズ」の作成過程をまとめています。Scratchプログラミングを卒業し、本格的なプログラミングをスタートしたい中高生向けの内容になっております。

不定期で四択クイズミニゲームのリファクタリングを進めていく話の第７段です。今回はこれまでネイティブなHTML&CSSを使って作ってきた四択クイズアプリをSvelteアプリとして再構築・マイグレーションする手順を解説していきます。

不定期で四択クイズミニゲームのリファクタリングを進めていく話の第６段です。今回はJavascriptフレームワークを導入してHTML&CSSアプリを開発していく前に知っておきたい基本事項を確認していきます。

不定期で四択クイズミニゲームのリファクタリングを進めていく話の第５段です。今回はSassリストを使ってで四択クイズミニゲームのデータ構造を動的に管理する方法を検討します。

不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第４段です。今回はHTMLのスクリプトタグにあるJavascriptコードの見直しを図ります。

不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第３段。今回はSassリストを高度に使いこなし、HTML擬似要素の内容を初期化する方法を紹介します。

不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第２段です。今回はCSS擬似要素のcontentプロパティを活用したデータ埋め込みのSassならではのテクニックを紹介します。

不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第１段です。今回はSassの@forループとリストのキーや値の取り出しの使い方を考えてみます。