JavaScript 【８】アリクイあくしょんコード解説 260行目〜
function drawPlayer() { let img; let drawWidth = player.width; if (isAttacking) { img = attackImg; drawWidth = 50; } els...
JavaScript JavaScript 【７】アリクイあくしょんコード解説 242行目〜
// 描画関数function drawBlocks() { ctx.fillStyle = "brown"; blocks.forEach(block => { ctx.fillRect(block.x - worldX, block.y...
JavaScript 【６】アリクイあくしょんコード解説 164行目〜
// 左const leftBtn = document.getElementById("left");leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); ...
JavaScript 【５】アリクイあくしょんコード解説 144行目〜
たかまるこのページでは、キーボードでキャラクターが動くように・入力イベント（ keydown, keyup ）の設定をしていくよ。// 入力イベントwindow.addEventListener("keydown", (e) => { ke...
JavaScript 【４】アリクイあくしょんのコード解説 １１3行目〜
// ステージ切り替えfunction loadStage(stageIndex) { const stage = stages; blocks.length = 0; blocks.push(...stage.blocks.map(b =...
JavaScript 【３】アリクイあくしょんのコードの解説〜４６〜１１０行目
たかまるこのページでは、・ステージのデータ作成・ゲームの状態管理（ゲームオーバーなど）について解説するね。以下のコードがこのページで解説する部分だよ。const stages = [ { // ステージ1 blocks: [ { x: 0,...
JavaScript 【２】アリクイあくしょんのコード解説 1〜４３行目
たかまるこのページで解説するのは以下の範囲。画面に絵を表示させるための下準備って感じかな。const canvas = document.getElementById("gameCanvas");const ctx = canvas.get...
JavaScript 【１】アリクイあくしょんのコード解説〜はじめに
projectフォルダ/├── img/│ ├── ari.gif│ ├── arikui-attack.gif│ ├── arikui-stand.gif│ ├── arikui-walk-1.gif│ └── arikui-walk-2...
その他 開発者ツール（デベロッパーツール）でコードを見る方法
たかまるイカク、ウェブブラウザの開発者ツールとかデベロッパーツールって聞いたことない？イカクくんないなぁ。なんなのそれ？たかまる色々できることがあるけど、その一つにWebサイトのソースコードが見られる機能があるよ。イカクくんまじか！たかまる...
AI マリオ風横スクロールアクションを作る
たかまるJavaScriptでWebゲーム作ったった！イカクくんえ、たかまるプログラミングできたの？たかまるもちろん、できないよ！だから今回はほぼAIに任せて作ったよ。作品を見てみようスマホの場合、このページから見るとボタンのレイアウトが崩...