Segmentation Fault

コアダンプの数だけ強くなれるよ。

html

Web Audio APIで任意の周波数の正弦波を鳴らす(HTML5/Javascript)

HTML5のWeb Audio APIを使って任意の周波数で正弦波を鳴らす電子音叉的なものを作ってみる。 HTML5のサウンド処理 完成品 ソースコード HTML5のサウンド処理 HTML5ではこんな風にAudioタグを使って簡単に音を出す事が出来る。 <audio src="<オーディオファイル" contorols></audio> Audioタグは簡単に使える反面…

Javascriptでマウス追従

Javascriptでマウスを追従する夏っぽいボールを作ってみた。 addEventListenerでマウスの座標を取得、setIntervalで追従するボールを描画ことで実現。 完成品 マウスを追従する円の描画 マウスの座標取得 マウスの追従を遅延 ソースコード全体 完成品 (funct…

Javascriptで8パズル

前回の画像データを分割+シャッフルして表示する処理に機能を追加してパズルゲームにしてみた。 www.segmentation-fault.xyz 完成品 シャッフル処理の変更 変更前 変更後 ソースコード 完成品 canvasで図形を描く var blocks = []; var canvas; var img; va…

Javascriptのcanvasと遅延処理でアニメーション

Javascriptのcanvasと遅延処理を組み合わせて簡単なアニメーションを描画してみる。夏なので簡単な花火っぽいアニメを作ってみた。 完成品 花火風アニメの作り方 花火の描画 遅延処理 ソースコード 完成品 点火ボタンを押すとお粗末な花火が描画される(た~…

Javascriptで画像を分割してシャッフルする

HTML5のcanvasとJavascriptを使って画像データを9つのブロックに分割し、ブロックをシャッフルして表示してみる。 シャッフル前 シャッフル後 ソースコード 参照 画像を分割してシャッフル表示 function resize(x, y) { document.orig.width = x; document.o…

Javascriptでオセロ(その2)

前回に引き続き、不足していた機能を追加してみた。 " id="Computer" value="1" autocomplete="off"/> コンピュータ " id="First" value="2" autocomplete="off" checked="checked"/> 先攻 ---------------------------------- こんな感じのオセロが完成。申…

Javascriptでオセロ(その1)

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で音を鳴らしてみる

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>

HTML,JavaScriptで格子を描画

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でブラウザに時刻表示

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>