JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
今回から作るゲームについて まずは、今回から作っていくゲームを見てみましょう。 このようなゲームを作ります。 （パソコンで遊ぶときは、ゲーム画面をクリックしてから、なにかキーを押してね！） ※音が出ますので、ご注意ください。 パソコンの場合は、ゲーム画面をクリックしてから、なにかキーを押してください。 スマホの場合は、ゲーム画面をタップして、ゲームをはじめてください。 タイトル画面では、スペースキー、もしくはタップで、次に進めます。 ゲーム内では、方向キー、もしくはゲーム左下の方向パッドで、山田先生を操作《そうさ》できます。（方向パッドはスマホのみで対応。パソコンのマウスでは操作できません） ゲーム内容： 山田先生、りこちゃん、アルくんが、迷宮《めいきゅう》に閉じ込められてしまいました。 前後左右、どこを見ても壁ばかり。でもきっとどこかに出口があるはず…… みんなでゴールを目指そう！ この
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
ffmpeg.wasm | ffmpeg.wasm
ffmpeg.wasmffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg enabling video & audio record, convert and stream right inside browsers! Data Securityffmpeg.wasm runs only inside your browser, data security is gaurantee as no data is sent to remote server. Powered by WebAssemblyffmpeg.wasm transpiles ffmpeg source code to WebAssembly code using Emscripten to achieve optimal performance.
2D breakout game using pure JavaScript - Game development | MDN
Introduction Introduction Anatomy APIs for game development Canvas CSS Full screen Gamepad IndexedDB JavaScript Pointer Lock SVG Typed Arrays Web Audio WebGL WebRTC WebSockets WebVR Web Workers XMLHttpRequest Techniques Using async scripts for asm.js Optimizing startup performance Using WebRTC peer-to-peer data channels Audio for Web Games 2D collision detection Tiles and tilemaps overview 3D game
Canvasを使ってボールを自由落下させる - Qiita
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var y = 30; //距離 var g = 9.8; //重力加速度 var v = 0.0; //速度 var t = 0.15; //時間 var e = -0.7; //反発係数 function drawBall() { ctx.beginPath(); ctx.arc(canvas.width/2, y , 30, 0, Math.PI*2, false); ctx.fillStyle = "rgba(240, 240, 240, 0.8)"; ctx.fill(); ctx.closePath(); } ボールを描くときはbeginPath()メソッドとclosePath()メソッドの間に書きます。 ar
JavaScriptで取り組むクリエイティブコーディング – パーティクル表現入門 - ICS MEDIA
HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 前回の記事『パーリンノイズを使いこなせ』に引き続き、2018年7月25日に開催されたイベント「Frontend de KANPAI! #4」の登壇内容を記事にしました。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、パーティクル表現の作成テクニックを解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル サンプルを別ウインドウで開く コードを確認する ※本記事はライブラリを利用せず、HTML CanvasとJavaScriptのみで説明しています。 ステップ① パーティクル表現 サンプルを別ウインドウで開く コードを確認する シンプルなグラフィックから手順を理解していきましょう。
JavaScriptで始めるジェネラティブアート - 生物アルゴリズムの応用 - ICS MEDIA
ジェネラティブアートという言葉をご存知でしょうか？ アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
Getting Started - typescript-jp
TypeScriptは、 最終的にJavaScriptにコンパイルされます。実際に実行されるのは、JavaScriptです。開発をするときは、TypeScriptを書きますが、ブラウザで実行する時には、TypeScriptをコンパイルして作成されたJavaScriptを実行する、ということです(Node.jsでも同じです)。なので、TypeScriptを利用するには、次のものが必要です： TypeScriptコンパイラ (NPMのパッケージとして提供されています。または、OSS(オープンソースソフトウェア)のソースをローカル環境でビルドして利用することもできます)
自分でも作ってみたくなる！HTML5でできているゲーム10選
HTML5で作られているゲームをまとめて紹介しています。本格的なシューティングゲーム、カーレース、パズルゲームなど様々あります。スマホアプリなどでも実際に見るようなクオリティのものがHTML5だけで完成できるので、ぜひ作ってみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 HTML5を使えば簡単にゲームを作ったり、やったりと楽しむことができます。 その中でHTML5に興味をもってもらえるようなゲームを10個紹介していきたいと思
.browserslistrcで対象ブラウザを指定する - Qiita
.browserslistrcは、「AutoprefixerでCSSにどのベンダープレフィックスを付けるか」などを決める設定ファイルです。 Autoprefixer以外にも対応していてツールごとに設定を持たずに済むので、ツール間で対象ブラウザ設定の齟齬が起こるのを防げます。 ブラウザのバージョンを直接指定せず、カバー率や直近○年という方法で指定しておくと、ブラウザのバージョンアップや、新しいブラウザの登場、シェアの激変などへの手動での設定変更が不要になります。 .browserslistrcファイルではなく、package.json に記述することも可能です。 対応ツール 対応するツールは下記です。 Autoprefixer Babel postcss-preset-env eslint-plugin-compat stylelint-no-unsupported-browser-feat
細かすぎるけど伝わって欲しいlodash.jsの話 - KAYAC engineers' blog
ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的
［書籍連動］「ゲームで学ぶJavaScript入門 増補改訂版」物理エンジンの詳細解説
本記事は、書籍「ゲームで学ぶJavaScript入門 増補改訂版」用に作成した簡易2D物理エンジン「Tiny2D.js」の詳細解説です。Tiny2D.jsは角速度や質量は考慮しない、矩形と円しかサポートしないなど、物理エンジンと名乗るには僭越なほどシンプルなものですが、シンプルなだけに使い方も簡単で、修正も十分に可能です。「百聞は一見にしかず」です。まずはサンプルを実行してみて、どのような動きをするのか皆さん自身で確かめてみてください。 本書はブックインプレスより購入できます。
HTML5による仮想物理実験室（物理シミュレーション）
文責：遠藤理平 公開日：2016年05月21日 最終更新日：2016年12月30日 本コンテンツについて 「HTML5による仮想物理実験室（物理シミュレーション）」は、HTML5の強みを活かして物理現象を可視化することを目的として作成しています。 興味のある方は下記からダウンロード後、ご利用ください。 なぜHTML5？ 物理シミュレーション環境の構築に必要な要素として、【入力】【演算】【描画】の３つが挙げられます。これまで【入力】は各実行環境に応じたGUI、【演算】はC言語などのプログラミング言語、【描画】は二次元グラフ描写ならgnuplot、３次元グラフィックスならOpenGLというように、独立したアプリケーションをそれぞれ習得する必要がありました。 しかしながら、HTML5の登場により、状況は劇的に変化しつつあります。【入力】はHTMLが本来得意とするインタラクティブ・インターフェース
Swiper Demos
🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥
Canvas de shooting 制作のポイント
1. Canvas de Shootingからみる HTML5 Canvasを用いた ゲームの作り方 ~ HTML5 Canvas × JavaScript Development ~
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsにおけるプラグイン導入方法(初学者向けハンズオン) - Qiita
Z.A.2025
Amazon.co.jp
HTML5 tutorial