電子スコアボード2または社会のために

最近、Web開発に関する良い記事がHabréにあまり掲載されていません。 しかし、今はそれについてではありません。

habralumの人々は、興味深いアイデアを共有することもありますが、その本質は明らかにしません。 そして、おそらく無駄に。 なぜなら、記事（説明）の執筆中に、これまでに見たことのない何か、他の動きや解決策に気づき、読者がアイデアを理解し、実践的なアドバイスを与えるのが簡単だからです。

そのため、数日前にハブに記事が登場しました。 「電子スコアボード」では、著者が自分のクラフトへのリンクを共有しましたが、説明が不十分だったため記事は「私がしたことを見てください」と判明しました。

著者がさらに説明を追加した場合、その記事はどれだけ興味深いものになりましたか。 したがって、私はこの記事の例で、どのようにすれば少し良くできるかを示し、同時に彼のタスクの実装を共有したいと考えました。



著者について悪いことを言いたくないことに注意してください（十分な付随テキストを追加していないことを除く）。 この技術は「愛をもって行われた」ことがわかります。多くの時間が発明、実装、デバッグに費やされました。 何が起こったのかが判明しました。 それほど単純ではなく、非常に高速ではありませんが、最も重要なのは、動作することです。



何を改善できますか？

最初に目を引くのは、「電球」の画像です。 私はそれに対して何もありません-電球はきれいです。 ただし、画像が読み込まれていない場合（ある時点で、またはまったく読み込まれていない場合）、または画像が無効になっている場合（そうです）、ユーザーには何も表示されません。 あまり良くない。 したがって、画像がない場合に状況から抜け出す方法について常に考える価値があります。何らかのフォールバックが必要です。

幸いなことに、この場合、そのようなソリューションはそれ自体が求められ、イメージを変更することで構成されています。



（画像は16倍に拡大され、チェッカーは透明で半透明の領域がマークされています）

Photoshopで数分すると、元の画像から新しい画像が取得されます。 その前に透明な基板上に白いボールがあった場合、正方形は背景色（色は元の色、つまり＃3d3d3d）で塗りつぶされ、穴（穴）があります。 それ以前は、電球の色（白）に縛られていたので、背景はどんなものでもかまいませんでした。 したがって、電球には任意の色を使用できますが、これは主なものではありません。 主な利点は、画像が存在しない場合、白色の（または他の色の）正方形が表示され、ライトが点灯していることを示します。 画像が利用可能になると、電球は以前のように完全に丸くなります。 CSSを使用して、次のように記述します。

背景：白いURL（dot.png）;

そして、次のものが得られます。



（写真なし、下-写真付き）

ここでは、ブロック（電球）の間に1ピクセルのインデントを追加して、それらがマージされないようにする必要がありました。 しかし、これがなくても可能です。



次の改善点は、静的HTMLの調整です。 どうやら、作成者は、クラスとID、どのタグをどの状況で使用するのが適切か、いつ使用するのが適切かを理解していません。 私はまだ自分自身を知りませんが:)また、このコードはどこかから「破壊され」、単純に重い継承を持っていることも認めています。 何らかの方法で、HTMLを少し単純化できるように思われました-特にデモンストレーションに、つまり例として使用されるので、すべての余分な部分を捨てることです。

いくつかの考え。 リストを使用して<form>内のフォームフィールドを列挙するのは少し奇妙です。たとえば、<div class = "field"> .. </ div>を使用する方が適切です。 <label>を使用する場合、コンテンツに<input>を入れるか、for属性を使用することをお勧めします。 つまり、次の代わりに：

< label > E-TABLO HORIZ. POINTS: </ label >

< input type ="text" name ="w" value ="55" />



* This source code was highlighted with Source Code Highlighter .

はるかに良い：

< label for ="w" > E-TABLO HORIZ. POINTS: </ label >

< input type ="text" name ="w" value ="55" />



* This source code was highlighted with Source Code Highlighter .

または私がもっと好きなもの：

< label >

< span class ="title" > E-TABLO HORIZ. POINTS: </ span >

< input type ="text" name ="w" value ="55" />

</ label >



* This source code was highlighted with Source Code Highlighter .

これは、作者がレイアウトを作成した戦略にさらに関連性があります。setdisplay ：block＆float：left for <label>。 操作を簡単にする（視覚効果、配置を実現する）には、後者のオプションが最適です。

もう1つの実用的なアドバイスは、短いID、クラス、「w」などのフィールドに名前を付けたり、大きなスコープを持つ変数を与えたりしないことです。特に、コードを理解できる人（またはコードをサポートし続ける人）を与えたい場合です。 これは、将来または大規模なプロジェクト（生まれていない場合でも）にとって悪い場合があります。 「w」の代わりに「tabloWidth」、「tablo_width」、最悪の場合は「width」と書くと、より明確になります。

しかし、これは単なる別の意見に過ぎません。 この場合、私の。



それとは別に、スタイルに注意したい* {outline：none; }およびdiv {display：none！important; } -すべてがfirebugでどのように機能するかを知りたい人のための素晴らしい「ギフト」です。 最初は、firebugに何か問題があるように思えました。すべてがはるかに単純であることが判明しました。 誰かが私の意味を理解していない場合、これらのスタイルは、ページ上の要素を選択するときにブロックの上にマウスを移動すると、ブロックの強調表示を「オフ」にします。 このようなスタイルのハブに例を挙げれば、これは普通の人間のock笑に過ぎないように思えます。 驚くべきことに、難読化のないJavaScript ...



さて、今ではJavaScript自体とアルゴリズム自体。

コードを勉強して、私は混乱したと告白します。 どういうわけか、すべてが複雑で、コードが多すぎます。 これがどのように機能するか推測はありますが、私は間違っている可能性があります。

最初に変更したいのは、キャラクターテーブルでした。

もちろん、この記事の議論では、文字テーブル（実際にはフォントがエンコードされている）なしでできる場合、 代替ソリューションが浮上しました 。 この方法の本質は、ある種のグリッド（つまり、穴のある画像）を使用して、その下で通常のフォントでプレーンテキストを「表示」してから移動することです。 これは、さまざまなグラフィカル環境やゲームで時々行われます。 しかし、この場合、グレイン（穴のサイズ）は小さく、理想的には1ピクセルである必要があります。そうでない場合（穴サイズが10ピクセル以下の場合）、「穴にピクセルがある」状況が発生しやすくなります。文字の一部のみが表示されます。 また、特定のブラウザでフォントを使用してピクセルを明確にヒットさせることができたとしても、それをあらゆる場所で常に達成することは不可能です。

しかし、テーブルに戻ります。 その中で、0と1の配列を使用する各文字に対して、画像がエンコードされます。 文字「T」の例：



写真からすべてが理解できると思います。 「描画」するのが便利なため、エンコード方法は基本的に通常です。 しかし、余りにも冗長で不便である。

文字が行ごとにエンコードされるのではなく、垂直線によってエンコードされるように、文字を再コーディングします。 そして、0と1を数字のビットに入れます。 このために、小さなコンバーターを使用します。

var letters = {

//

};

//

var letters2 = {};

//

for ( var letter in letters)

{

// - ( 8 )

var lineCount = letters[letter].length / 8;

// ( )

var converted = [];

//

for ( var i = 0; i < lineCount; i++)

{

var line = 0;

// ""

for ( var j = 0; j < 8; j++)

// ... , :)

// : ""

line = line | letters[letter][j * lineCount + i] << j;



converted.push(line);

}

//

letters2[letter] = converted;

}

// " "

for ( var letter in letters2)

{

document .write( "<br>'" + letter + "': [" + letters2[letter] + "]," );

}



* This source code was highlighted with Source Code Highlighter .

このような変換後、コード内の文字「T」は次のようになります。

'T'：[3、3、255、255、3、3]

これははるかにコンパクトです（テーブル自体は3倍減少します）が、これ自体が目的ではありません。 この状況では、新しい文字をエンコードするのがより難しくなりました（一方で、以前のようにエンコードしてからコンバーターを使用できます）が、コードで使用する方がはるかに便利です（これでわかります）。



シンボルテーブルを変換したので、いよいよメインパートに移ります。 最初に、キャンバスを決定する必要があります（この名前は作業のロジックにより適しているため、これからコンベヤと呼びます）。 テキストからストリップ全体をすぐに形成し、アニメーションのすべてのステップでそれを行わないことは論理的に思われます-アニメーション中はシフトします。 現在の状況では、このようなストリップの形成は非常に簡単で、数値を含む線形（1次元）配列になります。 これは、次の関数によって実行されます。

//

var pipeline = [];



//

function fill(str){

//

pipeline.length = 0;



// ,

//

str = (str + ' ' ).toUpperCase();



//

for ( var i = 0; i < str.length; i++)

// ,

if (letters[str.charAt(i)])

{

// ,

// ,

pipeline.push.apply(pipeline, letters[str.charAt(i)]);

pipeline.push(0);

}



// , ( )

while (pipeline.length <= tabloWidth)

pipeline.push(0);

}



* This source code was highlighted with Source Code Highlighter .

これまでのところとても簡単に思えます。 呼び出されると、たとえば、パイプライン配列にfill（ 'habrahabr'）が含まれます。

[255、255、24、24、255、255、0、252、254、51、51、254、252、0、255、255、153、153、255、118、0、255、255、27、59 、255、206、0、252、254、51、51、254、252、0、255、255、24、24、255、255、0、252、254、51、51、254、252、0、255 、255、153、153、255、118、0、255、255、27、59、255、206、0、0、0、0、0、0、0、0、0、0、0]

この配列の解釈に進む前に、スコアボードのHTML構造を作成する必要があります。 異なる幅を持つことができるため、この目的のために関数を作成します。 スコアボードの寸法は、それぞれtabloWidthとtabloHeightの 2つの変数によって設定されます。 この場合、 tableHeightは変更されず、常に8です。

この記事の執筆元であるこの記事の著者は、DOMメソッドを使用して構造を生成しました。この構造は優れており、足を振ることができます。 しかし、彼は単にtabloWidth x tabloHeight要素をコンテナに追加しましたが、コンテナの幅が制限されているという事実のために、それらは行に分割されました。 これを行うために、彼はtabloWidthを変更するときにコンテナを計算し、コンテナに新しい幅（ピクセル単位）を設定しました 。 これはあまり便利ではありません。電球のサイズがコード内で「配線」されていることが判明し、CSS（電球のサイズ）を変更するときにコードを編集する必要があるためです。

そうしなかった。 <div>要素をコンテナに配置します。その数は行数に等しく、各要素にはすでに必要な数の<span>（電球）があります。 これは、組版や、さらなる操作（アニメーション）に便利です。 また、この場合、行を1つだけ作成してからtableHeightでクローンを作成することができます-1回、これははるかに高速になります（もちろん、ここではゲインは疑わしいですが）。 デフォルトでは、<span>要素をどのクラスにも設定しません（これはライトがオンになっているという事実に対応します）。後でライトをオフにするためにオフクラスを追加します。 したがって、関数のテキスト：

// HTML

function createTablo(){

//

while (htmlTablo.lastChild)

htmlTablo.removeChild(htmlTablo.lastChild);



//

var lineProto = document .createElement( 'DIV' );

for ( var i = 0; i < tabloWidth; i++)

lineProto.appendChild( document .createElement( 'SPAN' ));



//

htmlTablo.appendChild(lineProto); //

for ( var i = 0; i < tabloHeight - 1; i++)

//

htmlTablo.appendChild(lineProto.cloneNode( true ));

}



* This source code was highlighted with Source Code Highlighter .

htmlTabloによって参照されるコンテナー内の出力は、次のHTMLのようなものになります。

< div >< span ></ span >< span ></ span >< span ></ span > ... </ div >

< div >< span ></ span >< span ></ span >< span ></ span > ... </ div >

...

< div >< span ></ span >< span ></ span >< span ></ span > ... </ div >



* This source code was highlighted with Source Code Highlighter .

これで、最終的にアニメーション、またはむしろアニメーションのステップ、つまりシフトに従事するためのすべての準備が整いました。 次の関数はこのタスクを実行するだけです。つまり、電球のオンとオフを切り替え、すべてを1列左にシフトします。 カーソル変数は、現在右側に表示される行（列）を指します。 行が「描画」された後、カーソルは1つ増加し（次の行要素に移動します）、配列の最後（すべての行が格納されているパイプライン）に到達すると、先頭に戻ります（ゼロになります）。 つまり、アニメーションがループします。 コード自体：

//

function step(){

//

for ( var i = 0, line = htmlTablo.firstChild; line; i++, line = line.nextSibling)

{

//

var dot = line.firstChild;



//

line.appendChild(dot);



//

// :) ""

// ( ), - off

dot.className = (pipeline[cursor] >> i) & 1 ? '' : 'off' ;



// :

// var dot = line.lastChild;

// line.insertBefore(dot, line.firstChild);

// dot.className = (pipeline[pipeline.length - cursor - 1] >> i) & 1 ? '' : 'off';

}

// ""

cursor = (cursor + 1) % pipeline.length;

}



* This source code was highlighted with Source Code Highlighter .

オフセット方法自体について少し。 すべての電球を塗り直すのではなく、最初の列を取り、最後に配置します。 これを行うには、DOMを使用します。 次に、パイプライン配列の次の値に従って、最後の列（前の最初の列）の電球を再描画（<span>のクラスを変更）します。 これは、すべての<span>のクラスを変更するよりも大幅に安価です。tabloWidthx tabloHeight要素のクラスを変更する代わりに、 tabloHeightのみを変更します 。

コメントには、右にシフトするためのコードも含まれています（これだけでは不十分な場合があります。他の場所で何かを変更する必要がある場合があります）。



以上です。 残るのは初期化だけです：スコアボードを作成し（ createTablo関数）、テキストでパイプラインを埋める （ fill関数）、スコアボードをクリアして初期状態で満たすためにtableWidth倍のステップシフト（つまり、 step関数）を実行し、呼び出すsetIntervalを設定する必要がありますステップは、必要な間隔で機能します。 これをすべて行う関数のテキストは、実例で見ることができます。名前は著作権です-ENJOYで、人生の休日を損なわないように:)

結果を見る



私たちが達成したこと：

*よりシンプルで短いコード。

*より高速に動作するようです。

* CSSを使用してスタイルを完全に制御します。つまり、コードでサイズが「配線」されません。 さらに、電球の色を変更することもできます。たとえば、消灯した電球の場合は、背景よりも少し暗い色に設定します。これにより、よりリアルになり、暗くなった電球も背景に対して目立ちます。 たとえば、スコアボードで虹を実験して作成できます。

*画像に縛られず、ユーザーは画像なしで何かを見ることができます。

*表示、仕組みの説明:)

また、コードは元のコードの3分の1になりました（たとえば、スペースやコメントを削除して比較するpackerを使用して両方のソースコードをスキップした場合）。 判断がどれほど簡単か。

もちろん、アニメーションスクリプトは元のものとは少し異なりますが、希望する場合は、自分で目的の結果を達成できると思います。



PS

このフォームに関する記事をご覧ください。 私は言うだけでなく、やることに決めました。 たぶん私のプレゼンテーションスタイルは最高ではなく、場所によっては詳細すぎるかもしれません。 私はこの記事を役に立つものにしようとしましたが、初心者にとって理解しやすいものでした。 実用的な例を書くのは、コードを単純化してコメントやこの記事を書く（時間の不足により3日間苦しんだ）よりもはるかに短い時間でした。 誰かが役に立つといいな。

Habrに関する良い記事を待っています。



お楽しみください！



更新：最後まで読んだ人の中には、私が元のアイデアの著者ではないことを忘れている（または注意を払っていない）人もいます。 私は別の実装とこの記事の著者です。

また、この記事はアプローチとアイデアを示すことのみを目的としており、スコアボード自体は単なる例です。 覚えておいてください、マトリックスのように：私はドアを見せることしかできません、しかし、あなた自身はそれを入力しなければなりません "...