JavaScript

WebSocketメモ書き

WebSocketをはじめようとJetty7でWebSocket開発という記事を読んでみたのですが何点かつまづいたのでメモしときます。元の記事の補足なので情報量はあまりないです。 WhisperServletクラス 元の記事のWhisperServletはファイルの置き場所やソースコードの一…

迷路を作って遊んでみる4

3回目の続きです。多分このシリーズは最終回。プログラム設計が適当なので、回を追うごとごとにやばい仕様になりつつあります…。 最短経路をハイライトする 前回は迷路の最短経路を求め、文字として以下のように表示しました。今回はこの経路を実際に迷路上…

迷路を作って遊んでみる3

前回からの続きです。今回はダイクストラアルゴリズムを使って迷路の最短経路を求めてみます。 ダイクストラを利用する 今回、以前作ったダイクストラアルゴリズムのプログラムを参考にして勧めていきます。まず最初に迷路をどうやってグラフとして表現する…

迷路を作って遊んでみる2

前回からの続きです。前回は、迷路と迷路を進むプレイヤーを作りました。今回は自動的にゴールを探してみます。 壁伝いに歩く 迷路は壁伝いに歩いていけばゴールにたどり着くとよく言われます。ただし、この方法は、壁とゴールが隣接している場合にしか使え…

迷路を作って遊んでみる

迷路の探索がやりたくなったので、迷路を作ってみました。 セルの種類 まず迷路を表現するためにセルを作ります。このときセルの種類として以下のものを想定します。 壁 通路 スタート ゴール これをオブジェクトで表現すると以下のようになります。 var MAZ…

グラフで遊んでみる

最短経路問題で使われるダイクストラアルゴリズムの復習のために、JavaScriptで簡単なプログラムを作ってみました。 グラフを表す 今回扱う問題は、有向グラフにしておきます。まず、グラフを表すために、ノードとエッジに対応するクラスを作ります。 /** * …

逆ポーランドで遊んでみる

作ってみた JavaScriptで、とても単純な逆ポーランドの記法の処理系を書いてみました。ちなみに足し算しかできません。最も基本的な文法は、こんな形になります。 3 4 plusこれは 3 + 4 を計算します。演算子は「+」だと面白くないので、「plus」にしてみま…

多次元配列を扱うクラスを作ってみた

JavaScriptで多次元配列を扱うのってめんどうですよね。例えば、10*10の二次元配列を考えて見ます。この配列は各要素の初期値として0が入っているものとします。 var array = new Array(10); for(var i=0; i

五目ならべ作ってみた

朝からさくっと3*3の五目並べ(?)作ってみました。一応Prototype.jsに依存しています。http://www17.atpages.jp/prime503/gomoku/ index.html <html> <head> <script src="prototype.js"> </script> <script src="gomoku.js"> </script> </head></html>

配列の隙間を詰める関数を作ったよ

こんなことに使えるよ JavaScriptで配列の隙間を詰める関数を作ってみました。例えば、こんな風に間にnull要素が混じる配列があったとすると。 [9,6,null,5,7,null,8] 間を詰めて、こんな風にしてくれます。 [9,6,5,7,8,null,null] 今回これを実現するために…

JavaScriptのprototypeプロパティに対する理解

prototypeに対する理解を深めるために少し考えてみた var obj = {}; var func = function(){}; alert(obj.prototype); //undefinedと出力 alert(func.prototype); //[object Object]と出力 まずprototypeプロパティを出力してみる。obj(普通のObject)の場合…

セイムゲームのソースコード

「セイムゲーム作ったよ」で紹介した奴のソースコードです。最初にソースコードを添付しておきます(後に掲載しているものと同じです)。 samegame.zip 方針 以前オセロを作ったのですが、オブジェクト指向的に書くということを目的にしていたので、少し大げさ…

セイムゲーム作ったよ

セイムゲームとはパズルゲームの一種です。下の図をご覧ください。画面には数種類のブロックがあり、同じ種類のブロックが2つ以上繋がっている場所をクリックすると、ブロックが消えます。ブロックが消えた箇所の上にブロックが乗っていれば、上のブロックが…

cssTextのクロスブラウザ対策

cssTextの挙動の違い HTMLのDOM要素には、DOM要素内に含まれるテキストをinnerHTMLというプロパティによって扱うことができます。これと同様にDOM要素に適用されているスタイルシートをテキストとして扱えるcssTextというプロパティがあります。詳しい説明は…

繋がっているブロックの数を調べる - ぷよぷよアルゴリズム

ぷよぷよのゲームを実装しようとした場合、4つ以上のブロックが繋がっているか調べる必要があります。今回、「ぷよぷよの作り方」を参考に、JavaScriptで繋がっているブロックの数を調べる方法、繋がっているブロックを消す方法を実装してみました。元のサイ…

JavaScriptによるアニメーションの基礎

JavaScriptでDOMを操作してアニメーションを実現する。アニメーションの基礎の基礎。まずは、こんなhtmlを用意する。 <body onload="init()"> <div id="board" style="position:relative;overflow:hidden;width:500px;height:300px;background-color:gray;"> <div id="pin" style ="position:absolute;left:100px;">●</div> </div> </body> idがboardとなっているdiv要素がアニメーションの描写…

JavaScriptでちょっと変わったシングルトン

シングルトンって何? シングルトンとは、あるクラスから生成されるインスタンスを一つに抑えるためのデザインパターンです。このパターンを使うことで、無駄に新しいインスタンスを生成するのを抑えます。今回、最速インターフェース研究会のJavaScriptのデ…

オセロプログラムの話12 - setTimeoutの活用

setTimeの話 オセロプログラムの話11の続き。今回は、setTimeoutを上手に使って、処理の流れを綺麗にしてみます。以前、「JavaScriptのタイマー処理 setTimeoutとその活用」として、記事を書いたのですが、そこではsetTimeoutをタイマーとしてではなく、処理…

オセロプログラムの話11

オブジェクト指向っぽくオセロを作る(まとめ)で作ったプログラムをもう少し発展させます。まず、駒を置いた箇所をハイライトする機能を作ります。次に、ここで作った駒をハイライトするという機能を使い、自分の番が回ってきたとき、駒が置ける場所をハイラ…

JavaScriptのタイマー処理 setTimeoutとその活用

以前id:amachangさんのブログでJavaScriptのsetTimeoutの活用方法が掲載されていたのですが、当時はいまいち意味が分かりませんでした。その補足というのはあつかましいですが、簡単な解説と応用をのせておきます。なお、setTimeoutだけに限らず、JavaScript…

オブジェクト指向っぽくオセロを作る(まとめ)

今までの内容のまとめです。 今までの記事の説明 オブジェクト指向っぽくオセロを作る 第一回はこれから作っていくオブジェクトの説明とPieceオブジェクトの実装 オブジェクト指向っぽくオセロを作る2 第二回目は盤の情報である、Boardオブジェクトの作成 オ…

オブジェクト指向っぽくオセロを作る10

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る7

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る9

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る8

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る6

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る7 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る5

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオセロを作る7 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る4

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る3 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオセロを作る7 オブジェクト指向っぽくオ…

オブジェクト指向っぽくオセロを作る3

オブジェクト指向っぽくオセロを作る オブジェクト指向っぽくオセロを作る2 オブジェクト指向っぽくオセロを作る4 オブジェクト指向っぽくオセロを作る5 オブジェクト指向っぽくオセロを作る6 オブジェクト指向っぽくオセロを作る7 オブジェクト指向っぽくオ…

クロージャを使ってプライベートな変数を設ける

ここではオブジェクトに対してプライベートな変数を設ける方法と、クラスに対してプライベートな変数を設ける方法を紹介します。JavaScript第5版のP.197-198を見て少し勉強しました。javascriptのプライベート変数というと、varというキーワードを思い浮かべ…