Courier New フォントを使用して、私の専用アーケード ゲーム Web サイトで達成された上位 10 のスコアを表示します (添付のスクリーンショットを参照
)。ラテン文字と拡張キリル文字のプレイヤー エイリアスは完全に一致しますが、誰かがアジア (中国語のように見える) 文字でニックネームを入力することを決定し、私の JS (TS) コードはそれを適切に処理しないため、プレイヤーの名前に続く列が取得されますずれた。これを処理するための最良の方法を知っている人はいますか? 重要性が疑わしいので放っておこうと思っていたのですが、やはり気になります。この記事を調べましたが、説明されている問題とは直接関係がないようです。
以下のコード用に編集されました。
CSS:
.titleLabel {
margin-top: 7px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 30px;
text-align: center;
color: blue;}
.dash {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: blue;}
.dashRed {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: red;}
.dashSpace {
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: #f0f0f0;}
HTML:
<div>
<div class="titleLabel">T O P 10 S C O R E S</div>
<!-- headings -->
<span class="dash" id="p1"><span class="dashSpace">-----</span>1<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
<!-- p2... p9 -->
<span class="dash" id="p10"><span class="dashSpace">----</span>10<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
dashRed クラスは、ゲームを終了してトップ 10 スコア リストに入ることができたプレーヤーにスコアを表示するために使用されます。古いスコアは青色で表示されます。ID が「p1」から「p10」の HTML コード行は、JavaScript コードによって window.sessionStorage からのデータに動的に置き換えられます。