VK向けのゲームを作成中に遭遇した6つの興味深いバグ

私はゲームを作るのが好きです、これは私の趣味です。 合計で、私は自由時間で約1年、VKontakteのJavaScriptでゲームを作成しました。 現在、ゲームは完成し、発売され、VKontakteによって管理され、ゲームカタログで入手できます。 これは、「ゲームの作り方」のような記事ではなく、作成中に遭遇した問題に関するストーリーです。 この情報がプロジェクトの困難な状況を回避するのに役立つことを願っています。 前もっていくつかのバグを知っていたなら、それははるかに簡単だったでしょうし、おそらくコードに関して他の決定をしたでしょう。 詳細については、katへようこそ。

エントリー

バグの本質をより明確にするために、ゲームについて簡単に説明します。 ゲームは中国のパズル「 タングラム 」に基づいており、その意味は、いくつかの単純な形状からより複雑な形状を収集する必要があるということです。 古典的なタングラムでは7つの標準数字を使用しますが、私のゲームでは、この原則を任意の数と種類の数字に一般化することにしました。







最初は、グラフィックエンジンとしてpixi.jsを使用しました。 その後、いくつかの理由で、私はそれを放棄し、すべてをキャンバスに描くことにしました。 これは議論の余地のある決定であり、説明されているバグの一部はまさにそれから生じたものです。 一方、pixiを使えば、他にも驚きがあります。



バグに移る前に、さらにいくつかのポイントがあります。



まず、タイトルに「バグ」という言葉を使用しましたが、以下に説明する状況の一部はバグではありません。 この機能、またはゲーム/ブラウザの正しいが、非論理的または非標準の動作ですらあります。 または私が遭遇した困難。



第二に、プロジェクトのサイズはそれほど大きくありませんが、もちろん、作成する際により多くの間違いがありました。 すべてを説明するのは意味がありません。 まれな状況、複雑な状況、または興味深い状況を記憶しました。 また、これらすべてのバグは、流onなグーグルで、そしておそらくは思慮深いグーグルで、それらに関するかなりの情報があるという事実によって結合されています。 したがって、ここでそれらを説明することは有用だと思います。



第三に、いくつかのバグを修正していません。 どうすればいいのか、それがまったく可能かどうかわからないからです。 私はまだそれらについて書く必要があると思うので、同様の開発者が直面している他の開発者は、彼らが一人ではないことを知り、少なくともいくつかの反省のための資料を受け取っています。 誰かが回復不能な問題を修正する方法を知っていれば、私はコメントで答えを聞いてうれしいです。



この時点で、長引く導入は終了し、本質に戻ります。

1番 全画面モード（fullscreen api）で踊る。

そして、フルスクリーンモードのサポートが導入されてから1年以上が経ちましたが、まだそこにあります。 インターネットとHabréの両方に多くの記事があります 。たとえばここにあります 。 しかし、以前と同様に、すべてのブラウザーは独自の方法ですべてを実行します。



ブラウザの数（まあ、またはエンジンの数）、フルスクリーンAPIのメソッドの名前のオプションが多いように見えます。



プレフィックス自体が紛らわしいだけではありません（moz、webkit）。 IE11は、msとMSの2つのプレフィックスを使用します。 一部のブラウザは、フルスクリーンの一部であるフルスクリーン（hello firefox）を使用します。 フルスクリーン変更イベントは、大文字なしで記述されます：fullscreenchange（もちろん、プレフィックス付き）。 しかし、IE11では、EdgeでMSFullscreenChangeと記述されています-fullscreenChange。



また、ブラウザの一部は全画面要素を画面の中央に配置し、一部はそれがあった同じ位置に残します。



フルスクリーンモードをオンまたはオフにするのは簡単なことのように思えます。 その結果、これはすべて、目的のブラウザでの目的のメソッドの名前の検索と長いテストに変わります。



興味のある方は、 CodePenの結果をご覧ください 。 クロム、ヤンデックス、オペラ、Firefox、IE11でチェックイン。 残念ながら、私はサファリとエッジをチェックインする方法がありません。誰かがこれを行うことができれば、コメントを購読解除します。

2番 消える影（context.shadowBlur）。

図形にカーソルを合わせると、影が追加されて強調表示されます。 つまり、通常の画像に次の影を追加します。

context.shadowBlur = 5 context.shadowColor = “#000”
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての形状で、これは通常の長方形を除き正常に機能します。 彼の影は現れません。



長い間、私はそれが難しくないことを考慮して、このバグによる分解を後まで延期しました。 真剣に考える時が来たとき、すべてがそれほど単純ではないことが判明しました。



長時間の検索、さまざまなオプションの試用、そして結果として、私はこれだけを見つけました：

• 影は実際に表示されますが、四角形の画像の下からは見えません。これは、ぼかしレンダリング、つまりぼかしがないためです。
• シャドウをオフセットに設定すると、オフセットありの状態で見えるようになりますが、再び、ぼかしなしで
• そのような効果は長方形の図形でのみ観察され、影のある他のすべては友だちです
• ゼロ以外の角度で長方形を回転させると、影は通常通り表示されます
• 画像コンテキストに長方形を表示する直前、shadowBlurの値は5であるはずですが、Blur表示はまだありません
• このバグをゲームとは別に、別のファイルで繰り返すという単一の試みは成功しませんでした

すべての数字は同じコードで画面に表示されます。つまり、コードに問題はありません。 一方、ゲームコード以外ではこのバグを再現することはできません。つまり、問題はコードにあります。



率直に言って、私はこのバグを突き止めることに非常にうんざりしており、結果は次のとおりです。何が原因であるかわかりません。 修正方法がわかりません。



しかし、松葉杖の作り方と修正方法は知っています。 私がしたこと。 グラフィックエディターで四角形の画像を開き、1ピクセルを選択し（コーナーで、そうは思わない）、透明度を255ではなく254にしました。その結果、画像は元の画像と外見上区別できませんが、影、つまりぼかしは魔法です画像が表示されます。 そして、私がこれをどのように思いついたのか聞かないでください。

番号3。 音声デコードのバグ（decodeAudioData）

ゲームでサウンドを再生するには、AudioContextを使用します。 サウンドはXMLHttpRequestを介して読み込まれ、decodeAudioData関数を使用してデコードされます。 すべてが正常です。



しばらくして、私は古いラップトップでゲームをテストすることを引き受けました。それはまだXPがあり、それに応じて古いバージョンのChromeがあります。 ここで、次の形式のエラーが発生しました：キャッチされない（約束）DOMException：オーディオデータをデコードできません。 yandexブラウザでも同じエラーが発生します。







このバグで最も興味深いのは、事前に予測できなかったことです。 存在を確認するだけで、オーディオコンテキストのサポートを確認できます： window.hasOwnProperty("AudioContext")



。 しかし、デコードを試みることを除いて、サウンドをデコードできるかどうかを確認する方法は？



try-catchコンストラクトも役に立ちません。 エラーはjsスクリプトではなくブラウザのコードで発生するため、単に例外をスローしてスクリプトを停止します。



1つのチャネルでwavファイルをデコードしようとするとエラーが発生することが判明しました。 ファイルを2チャンネルに変換するか、mp3に書き込むと、バグは消えます。



クロムの最近のバージョンでは、このバグはありません。

番号4。 アンロードおよびデータストレージの前。

beforeunloadイベントハンドラーでゲームを終了すると、サーバーにリクエストを送信して、最後のオープンレベルを保存します。



約50％のケースで、おそらくもっと頻繁に、データは保存されませんでした。 ブラウザがbeforeunloadイベントを処理するのにどれくらいの時間を費やし、サーバーがリクエストを処理するのにどれくらいの時間を費やしたかを考えると、これがポイントではないことに気付きました。 答えは既にわかっていれば簡単でした。 非同期ではなく、同期サーバー要求を使用する必要があります。



すべて同じ、驚くべきこと-群れの本能、または習慣と信念の力。 マニュアルとガイドに書かれています：同期リクエストを使用しないでください！ 非同期リクエストを使用してください！ そして、ほとんどの場合、そのままです。



さて、同期要求を使用できる（そしてすべきです）まさにここです！ この場合、アンロードが待機する前にスクリプトの実行が一時停止され、結果が返されないため、データを保存する時間があります。



PS最終的には、各レベルの後に保存したので、より信頼性が高くなりました。

5番 キャンバス+テキスト+ Firefox

ヤモリエンジンのかなり古いバグです。これは事前には知りませんでしたが、無駄でした。 firefoxのキャンバスにテキストが表示される場合、テキストは他のブラウザー（エンジン）よりも数ピクセル高く表示されます。 これは、 context.textBaseline = "top"



プロパティを使用する場合に特に顕著です。 視覚的には、次のようになります。







オフセットはフォントサイズ、つまり 同じではありません。 context.textBaselineの他の値を使用する場合、オフセットは小さくなりますが、目で見てもまだわかります。フォントサイズが20ピクセル以下のピクセルです。



このバグの議論はここで見つけることができます 。



私が試したもの：

• context.textBaseline = “middle”
  
  
  
  を使用して、テキストを半分の高さにシフトします。 上で言ったように、まだ少し矛盾があります。
• ピクセルごとにテキストの高さを手動で決定します。 つまり 大文字/数字（たとえば、0またはT）を使用します。中央の上下から、網掛けに合うまでピクセルのチェックを開始します。 したがって、フォントの高さが決定され、碑文を希望する場所に正確に表示できます。 しかし、それはかなり複雑で、リソース集約的であり、複数行の下線付きの取り消し線付きテキストの結論には困難があります。 また、この方法は、文字が傾いている、または標準外のスタイルを持っているさまざまなフォントには適さない場合があります。
• 計算値、サイズまたはタイプの割合によるテキストオフセット。 動作しない、なぜなら フォントサイズとそのオフセットの間には直接的な相関関係はありません。いずれにしても、私はそれを知りません。

その結果、彼はこの問題を「真正面から」解決しました。彼はブラウザエンジンを決定し、必要に応じて、個々の碑文ごとに必要な距離だけ手動でテキストをシフトしました。 奇妙なことではなく、最も簡単な方法でした。

No. 6。 フラッシュマウスアウト

このバグについて書くべきかどうか考えました それを捕まえるのは非常に難しいです、私にはそれが私に思われたかどうかさえ疑いました。 しかし、私が非常に積極的に使用しているvivaldiブラウザーでは、バグは安定して検出されます。 また、クロムで彼を捕まえることができました（しかし、それは確かではありません！）。 Firefoxおよびオペラでは、バグを取得することはできませんでしたが、うまく機能しなかった可能性があります。



だから、それはすべて、ゲーム内のボタンを数回連続してクリックすると、マウスを動かさないと、カーソルがデフォルトに設定されることに気づいたという事実から始まりました。 ボタンから出てくるかのように。 さまざまなオプションをテストした後、mouseoutイベントが突然発生するため、バグが発生することが判明しました。



ここでこのバグがあるかどうかをテストできます 。



繰り返しますが、バグは多かれ少なかれ自信を持ってビバルディ（5〜30回のクリック後）で、クロムでは確実にキャッチされます。 他のブラウザでは、バグをキャッチできませんでした。



テストの本質：ペンを開き、コンソール（F12）を開き、碑文のある段落の上にマウスを移動し、動かさないように注意してマウスを順番にクリックし始めます。 コンソールメッセージを追跡します。 一定回数クリックすると、碑文が点滅します。 mouseoutイベントが発生しました。 mouseoutイベントが発生し、マウスカーソルがデフォルトに変更された後、mouseoverイベントが再び発生し、カーソルがポインタに変更された後、マウスのわずかな動きで十分な効果を得ることができます。



mouseenter / mouseleaveイベントを使用しようとしました。 ファイルをローカルでテストします。 クリック選択をオフにします。 結果のプラスまたはマイナスは同じです。



私はそれが何であり、なぜそうなのかわかりません。 特定のブラウザのバグしか想定できません。 ゲームでは、これについて何もしませんでした。一般に、連続して何度も押すことができる（または必要な）ボタンがないためです。 はい、そしてこのバグで何ができるのか、正直に思いつきませんでした。

もう少し

彼はタイトルに6番を示しましたが、いくつかの面白い間違いを思い出しました。 それらについて簡単に説明すると、多くのことは書くべきものではないようです。



context.drawImage



メソッドは、異なる数の引数で呼び出すことができることが知られています。 特に、ソースからコピーしてコンテキストに描画する領域のサイズを指定できます。 したがって、クロムではサイズ0x0の領域を描画できますが、firefoxはエラーを出します-間違ったサイズでscられます。



ビューコードの奇妙なバグ

 bounds = { left: 0 right: GAME_WIDTH top: 0 bottom: GAME_HEIGHT }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてがうまくいくように見えますが、何らかの理由で、コードのさらにbounds.topは0ではなく、1e-14のようなもので、もちろんゼロに非常に近いが、それでも0ではありません。そして、以下のコードをゼロと比較すると、結果はすでに異なります。

ここには2つの奇妙な点があります。 まず、このバグはrequire.jsを使用してコードを単一のファイルにビルドした後にのみ発生します。 コードは異なるモジュール-ファイルにありますが、そのような動作に気付きませんでした。 第二に、何らかの理由で、そのような奇妙さは値topでのみ発生しますが、bounds.leftは依然として厳密にゼロです。

よろしくお願いします！

それだけです、他に何も覚えていませんでした。 誰かが作業の結果を確認し、評価してテストしたい場合は、 こちらにアクセスしてください 。



ご清聴ありがとうございました。この情報が役に立つことを願っています！