百聞は一見に如かず、あなたのプログラム code_html5 チュートリアルのスキルを隠すことができます

私は最近、初めての Web ゲーム、HTML5 ビデオ パズルを開発しました。開発プロセスは興味深いものでしたが、ゲーム ロジックを実装した後、コードを非表示にする方法を見つけたらどうだろうかという興味深いアイデアが浮かびました。最初は、コンテキスト メニューを無効にして、右クリックしたときにページのソース コードが表示されるようにするなど、非常に単純なことを考えていました。しかし、これには意味がありません。右クリック メニューは機能せず、キーボード ショートカットまたはメニュー バーの「ソースの表示」を使用してソース コードを表示できます。

写真は百聞は一見に如かずです

それは写真のサイズによって異なります。しかし、私はソースコードを暗号化してイメージに保存することにしました。 HTML5 キャンバス コンポーネントは画像ピクセルに対する操作をサポートしているため、この種のことに非常に適しています。ピクセルは、赤、緑、青、アルファ チャネルの 4 つの値 (チャネル) で表されます。それらの値は 0 から 255 まで分布しています。私の Javascript コードは文字であり、各文字には対応する ASCII 値があります。 ASCII 値の範囲も 0 ～ 255 なので、私がやりたいことは、キャンバス上の各ピクセルを走査し、各ピクセルの 3 つのコード文字の ASCII 値を RGB 値として設定することです。これは簡単に実行できます。 charCodeAt 関数でこれらの文字を取り出します。

生成されるのはカラフルで小さな画像です。これは私のプログラム コードです。

デコードするときは、この画像をキャンバスに描画して Pixel を移動するだけです。ポイントを取得し、r、g、b の値で表される文字を取り出します:


それらを 1 つの大きな文字列に連結すると、これがコード (実行可能コード) になります。

これはソースコードを保護しますか?

実際にはいいえ、経験豊富な (または経験の浅い) プログラマーでも、画像をデコードして内部のコードを抽出する方法を理解できますが、これは悪意のあるビジネス意図を持つユーザーを防ぐためだと思います。誰かがあなたのコードを盗む可能性 - そしてそれをデコードする方法を理解できるプログラマは（ほとんどの場合）盗むために存在しているわけではありません

この方法の主な欠陥
このテクノロジーは次のことを行うことができますHTML5 キャンバス テクノロジをサポートする最新のブラウザにのみ適用できます。IE6 および IE8 では動作しません。最新のブラウザーでも画像のアルファ チャネルのエンコードに問題があるため、1 ピクセルあたり 3 文字しか配置できません。100×100 の画像には 30,000 個のテキスト文字を保存できます。

他の人がコードをコピーするのを防ぐ簡単な方法はありますか?もちろん文字を暗号化することはできますが、復号化の手順を簡単に解読できないようにするにはどうすればよいでしょうか?あなたの考えを教えてください!