JavaScript
Javascriptのサンプルとしてテトリスは定番ですが、そういえば今まで挑戦してなかったの作ってみました。 canvasを使って落下ブロック(テトリミノ)が７種、色が６種のザ定番ぽいものを作ります。 完成品 ソースコード 完成品 Chromeでしか動作確認してません…
前回でひとまずブロック崩しと呼べるレベルになりました(たぶん)。今回はバーを台形の形にして角に当たると横方向に跳ね返る機能を追加します。また、ソースコードの整理、当たり判定の改善などを加えてまとめます。 canvasで作るブロック崩し 当たり判定の…
はじめに WebSocketで取得した板情報(BTC/JPY) ソースコード はじめに 以前、coincheckのAPIをPythonから利用して仮想通貨の取引レートを取得をやってみました。本当はJavascriptで取得したかったのですが、同一参照元がうんぬんの制約(あまり理解できてない…
前回は右クリックでボールを出現、左クリックでバーを上下させボールを打ち返す機能を加えました。今回はいよいよブロックを作ってボールが当たると消える機能をつけてみます。 完成品 ソースコード 関連ページ 完成品 (function() { var canvas; var ctx; v…
前回はボールを1個だけ出現させてバーで跳ね返せる機能を作りました。複数のボールを出現する機能とクリックでバーを上下させボールを打ち返せる機能をつけてみます。 機能追加版 ソースコード 関連ページ 機能追加版 (function() { var canvas; var ctx; va…
前回はマウスで動くバーを作成しました。今回はボールを打てるようにしていきます。 バーとボール 追加要素 ソースコード 関連ページ バーとボール (function() { var canvas; var ctx; var width; var height; var mouseX; var mouseY; var BAR = { 'HEIGHT…
HTML5のcanvasとJavascriptで少しづつブロック崩しを作っていこうと思います。目標はぶろっくでポン！みたいに重力+複数のボールを扱えるブロック崩しにすること。だいたい5回分ぐらいで完成を想定。 初回はとりあえずマウスで動かせるバーを作ります。 マウ…
前回に作成したアプリでは何点か不満な箇所があったのでよりゲームっぽくなるように改良してみた。 改善点 ・スマホ/タブレット対応 ・曲線をより滑らかに描画 ・障害物を出現 ・経過時間を左上に表示 完成品 設計図 糸(曲線)の速度方式 糸(曲線)の描画 障害…
今回はHTML5のcanvasを使って、ガラケー時代の名作ゲームである糸通しっぽい動きをする曲線を作ってみた。 即席で作ったのでソースコードは改良が必要。スマホでは恐らく正常に動かない。 www.appdime.jp 完成品 ソースコード全体 完成品 (function() { var …
HTML5のWeb Audio APIを使って任意の周波数で正弦波を鳴らす電子音叉的なものを作ってみる。 HTML5のサウンド処理 完成品 ソースコード HTML5のサウンド処理 HTML5ではこんな風にAudioタグを使って簡単に音を出す事が出来る。 <audio src="<オーディオファイル" contorols></audio> Audioタグは簡単に使える反面…
Javascriptでマウスを追従する夏っぽいボールを作ってみた。 addEventListenerでマウスの座標を取得、setIntervalで追従するボールを描画ことで実現。 完成品 マウスを追従する円の描画 マウスの座標取得 マウスの追従を遅延 ソースコード全体 完成品 (funct…
前回の画像データを分割＋シャッフルして表示する処理に機能を追加してパズルゲームにしてみた。 www.segmentation-fault.xyz 完成品 シャッフル処理の変更 変更前 変更後 ソースコード 完成品 canvasで図形を描く var blocks = []; var canvas; var img; va…
Javascriptのcanvasと遅延処理を組み合わせて簡単なアニメーションを描画してみる。夏なので簡単な花火っぽいアニメを作ってみた。 完成品 花火風アニメの作り方 花火の描画 遅延処理 ソースコード 完成品 点火ボタンを押すとお粗末な花火が描画される(た～…
HTML5のcanvasとJavascriptを使って画像データを9つのブロックに分割し、ブロックをシャッフルして表示してみる。 シャッフル前 シャッフル後 ソースコード 参照 画像を分割してシャッフル表示 function resize(x, y) { document.orig.width = x; document.o…
前回に引き続き、不足していた機能を追加してみた。 " id="Computer" value="1" autocomplete="off"/> コンピュータ " id="First" value="2" autocomplete="off" checked="checked"/> 先攻 ---------------------------------- こんな感じのオセロが完成。申…
HTML+JavaScriptでブラウザで動くオセロを実装してみる。 制限付き(*1)で動いたところまで。ソースコードはほとんど参考(*2)のまま。 (*1) 機能制限 ・AIなし(人間vs人間だけ) ・黒が先行 ・パス不可 ・勝利判定なし ソースコード html javascript css その…
Javascriptでマウスの座標(左上端からのX,Y距離)を表示する。 ソースコード mouse.html <HTML> <HEAD> <TITLE> マウス座標 </TITLE> </HEAD> <BODY> マウス座標 <br> (X,Y) = <input type="text" style="width:50;" id="global_x">, <input type="text" style="width:50;" id="global_y"> <br> <SCRIPT type="text/javaSCRIPT"> (function (){ // スクロール位置取得 funct…</body></html>
Tone.jsを使って簡単な演奏をしてみた。 今回は4分音符で単調なメロディーを繰り返すだけ。doremi.html <html> <head> <meta charset="UTF-8"> <title>サウンド</title> </head> <body> <button id="play">PLAY</button> <button id="stop">STOP</button> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <…</body></html>
HTML5のCanvas機能でオセロの盤面ぽい格子を描く。canvas.html <html> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canv" width="500" height="500"></canvas> <script> var ctx = document.getElementById("canv").getContext('2d'); // 描画内容を指定する // 背景を500×500の緑で描画 ctx.fillStyle = "rg…</body></html>
HTML, JavaScriptの最初の一歩と言えばコレ。[仕様] 左上に現在時刻を"HH:MM:SS"形式で表示。'ex) 19:02:34' index.html <html> <head> <meta charset="utf-8" /> </head> <body> <div id="disp" style="font-size:48px;text-align:left;"></div> <script> setInterval(showTime, 500); function showTime() { var tv = new Date(); $("d…</body></html>
