sanbunnoichi

プログラマー歴ん十年の自由人

sanbunnoichi

プログラマー歴ん十年の自由人

最近の記事

JavaScript+html+Canvas でゲーム作成(閑話休題)

JavaScriptで作成したプログラムを公開するには難読化するといいですよ、という話。 これまで、 ・基本部分 ・ドットアニメーション ・画面アニメーション ・キーボード入力 ・キーボード入力(トリガ) ・効果音出力 をUPしてきました。 プログラマ歴は長いのですが、JavaScriptを仕事で使ったことはありません。前職にて社内教育用の題材としてJavaScriptを採用して試行錯誤していました。今では趣味の域で続けています。 言語としてのJavaScriptの経歴

    • JavaScript+html+Canvas でゲーム作成(効果音出力)

      「キーボード入力(トリガ)」を使って効果音を出してみました。 SPACEキーでジャンプ時に指定した音が鳴ります。 音のファイルは、<音ファイル名>を自由に設定してください。 ファイルフォーマットは、mp3, wav, mp4, flac, m4aが使えるようです。 例: 音ファイルがhtmlと同じフォルダにある時、 se_jump.src = "./sound_effect.mp3"; 音出力の際、.play()の前に.load()を入れています。 .load()を入

      • JavaScript+html+Canvas でゲーム作成(キーボード入力(トリガ))

        「キーボード入力」にトリガ判定を組み込みました。 「キーボード入力」ではキー押しっぱなしを判定しているのに対して トリガ判定では、単発のON判定をします。(ONの後にすぐにOFFになる) ゲームでいうところのジャンプやショット判定で使われます。 キーボードのスペースキーのトリガを判定してキャラクタをジャンプさせます。 以下、プログラム。(キーボード入力追加部分には[#key input#]で括ってます。 <html><head><style type="text/cs

        • JavaScript+html+Canvas でゲーム作成(キーボード入力)

          キーボード入力を「ドットアニメーション」に組み込んでみました。 キーボードのカーソル左右キー入力を取得してキャラクタを移動させます。 // キーボード入力を取得する準備document.addEventListener("keydown", keyDownHandler, false);document.addEventListener("keyup", keyUpHandler, false); 変数getKeyのビット0をカーソル左、ビット1をカーソル右のON/OFF

        JavaScript+html+Canvas でゲーム作成(閑話休題)

          JavaScript+html+Canvas でゲーム作成(画面アニメーション)

          「JavaScript+html+Canvas でゲーム作成」基本部分を使って、画面アニメーションを作ってみました。 その昔、Androidアプリで公開していたものをJavaScriptに移植して作成。 昔のことなのプログラム内容がどうだったかまでは把握してないですが、フラクタル計算式を改変させて作っていたと思います。 こんな画面アニメーションも作れますよというサンプルになります。 以下、プログラム。 <html><head><style type="text/css

          JavaScript+html+Canvas でゲーム作成(画面アニメーション)

          JavaScript+html+Canvas でゲーム作成(ドットアニメーション)

          「JavaScript+html+Canvas でゲーム作成」基本部分を使って、ドットアニメーションを作ってみました。 昔のドットタイプのゲームの参考例としてスペースインベーダーの敵キャラクタを使用。 スペースインベーダーの敵キャラクタは検索すると出てくるのでそこからドット絵に変換。 アニメーション時間を設定して、アニメーションを実現。 以下、プログラム。 <html><head><style type="text/css"><!-- canvas { backgrou

          JavaScript+html+Canvas でゲーム作成(ドットアニメーション)

          JavaScript+html+Canvas でゲーム作成(基本部分)

          基本的には以下をベースにあとは中身を作るだけ。 中身とは、入力とか描画とか処理とか入れれば良し。 <html><head><style type="text/css"><!-- canvas { background: #000; } --></style></head><body><canvas id="myCanvas" width="512" height="512"></canvas><script language="JavaScript">var canvas

          JavaScript+html+Canvas でゲーム作成(基本部分)