JavaScriptを用いて製作中のスライドパズルで、最後のハイスコア表示が正しく動作しません。初心者なので単純・見当違いなミスかもしれませんが、宜しくお願い致します。

Question

前提・実現したいこと

ネットの記事を参考にしながら、JavaScriptで簡単なスライドパズル(1から15の数字パネルを小さい順に並び替えるもの)を作っています。本体のプログラムはほぼ完成していますが、クリア時に表示されるはずのアラートが正しく動作せず、ハイスコアを取れても取れなくても通常スコアアラートしか現れず、保存もされません。

発生している問題・エラーメッセージ

Windows10のEdgeでテストプレイしていますが、エラーメッセージは表示されません。

該当のソースコード

'use strict';

// グローバル変数
var clickCount = 0;

window.onload = function() {
// ハイスコアの取得
if(localStorage.getItem('slydScore')) {
var slydHigh = Number(localStorage.getItem('slydScore'));
} else {
var slydHigh = 0;
}
var size = 4;
var shuffleCount;
var panels;
var isShuffled;
var table = document.getElementById('table');
var msgBox = document.getElementById('msgBox');
var startBt = document.getElementById('startBt'); 

// ボード初期化
function init() {
shuffleCount = size * 1000;
isShuffled = false;
panels = [];
table.textContent = null;
msgBox.textContent = '0';
createStage();
}

function createStage() {
for(var i=0;i<size;i++) {
var tr = document.createElement('tr');
for(var j=0;j<size;j++) {
var td = document.createElement('td');
var index = i * size + j;
td.posId = index;
td.textContent = index == size * size - 1 ? "": index + 1;
td.onclick = click;
if(index == size * size - 1) {
td.classList.add('empty');
td.textContent = '★';
}
panels.push(td);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
startBt.addEventListener("click",function(){
if(isShuffled == false) {
alert('SLYD(スライド)へようこそ!数字パネルを空きマスへスライドして、左上(1)から全てのパネルを順番に並び変えてください。「NEW GAME」ぼたんを押すと新規ゲームが開始されます。\nハイスコア: ' + slydHigh + 'クリック');
init();
shuffle(shuffleCount);
} else {
let checkRestart = window.confirm('本当にボードを初期化しても宜しいでしょうか?このゲームの得点は失われ、パネルの並びはシャッフルされます。');
if(checkRestart == true) {
init();
shuffle(shuffleCount);
}
}
});

// ボードのシャッフル
function shuffle(shuffleCount) {
for(var i=0;i<shuffleCount;i++) {
click({target:{posId:Math.floor(Math.random() * size * size)}});
}
isShuffled = true;
}
clickCount = 0;
// パネルクリック時の処理
function click(e) {
// ボードがシャッフル済みの場合、クリック回数をカウントするclickCountに1ずつ追加。
if(isShuffled == true) {
clickCount += 1;
msgBox.textContent = clickCount;
}
var pos=e.target.posId;
if(pos - size >= 0 && panels[pos - size].textContent == '★') {
swap(pos, pos - size);
} else if(pos + size < size * size && panels[pos + size].textContent == '★') {
swap(pos, pos + size);
} else if((pos + 1) % size != 0 && panels[pos + 1].textContent == '★') {
swap(pos, pos + 1);
} else if(pos % size != 0 && panels[pos - 1].textContent == '★') {
swap(pos, pos - 1);
}
window.setTimeout(function () { document.getElementById('click-tile').play(); },5);
}
function swap(p1, p2) {
var temp = panels[p1].textContent;
panels[p1].textContent = panels[p2].textContent;
panels[p2].textContent = temp;

panels[p1].classList.add('empty');
panels[p2].classList.remove('empty');
check();
}
// パネル位置の判定
function check(){
var okCount=0;
for(var i=0;i<panels.length;i++) {
if(panels[i].posId == parseInt(panels[i].textContent) - 1) {
okCount++;
panels[i].classList.add("ok");
} else {
panels[i].classList.remove('ok');
}
}
// クリア判定
if(isShuffled && okCount === size * size - 1) {
// クリック数とハイスコアを比較、結果に応じてアラートと効果音を変更する。
var slydHigh;
if(localStorage.getItem('slydScore')) {
slydHigh = Number(localStorage.getItem('slydScore'));
} else {
slydHigh = 0;
}
if(slydHigh = 0) {
localStorage.setItem('slydScore', clickCount);
document.getElementById('success').play();
window.setTimeout(function () { alert('初クリアおめでとうございます。' + clickCount + 'クリックでパズルを完成しました。'); },800);
} else if(clickCount < slydHigh) {
localStorage.setItem('slydScore', clickCount);
document.getElementById('high-score').play();
window.setTimeout(function () { alert('おめでとうございます、' + clickCount + 'クリックでパズルを完成、ハイスコアを更新しました!'); },800);
} else if(clickCount >= slydHigh) {
document.getElementById('success').play();
window.setTimeout(function () { alert('おめでとうございます、' + clickCount + 'クリックでパズルを完成しました。現在のハイスコアは' + localStorage.getItem('slydScore') + 'です。'); },800);
}
isShuffled = false;
    }
  }
 
  init();
};

試したこと

コード後半、slydHighの宣言をif文の内側へ移動する、slydHighをグローバル変数に変えてコードの前半と後半の両方で呼び出すなどを試してみました。ゲーム開始時のハイスコア通知は正しく動作しているようなので、宣言もしくは変数そのものを揃えてみようとしたためです。

誤っている箇所、修正方法など教えて頂ければ幸いです。宜しくお願いします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[miyabi_pudding]

> 保存もされません。

これは何を指して言っているのでしょうか？
リロードしたら、情報が失われる、ということでしょうか？

[numin]

コメント頂きありがとうございます。保存されないというのはハイスコア(slydHigh)がlocalStorageに保存できないという意味で書きました。ボードを初期化してスタートボタン(startBt)を押した際、localStorage.getItemでハイスコアを取得できず0となっているため、そう思いました。

Answer 1

クリア判定の１つ目のif判定が比較ではなく代入になっている？
if (slydHigh = 0) {

if (slydHigh = 0) { // == or === の必要がある 
	localStorage.setItem('slydScore', clickCount);
	document.getElementById('success').play();
	window.setTimeout(function() {
		alert('初クリアおめでとうございます。' + clickCount + 'クリックでパズルを完成しました。');
	}, 800);
} else if (clickCount < slydHigh) {
...

Comments

[numin]

ご丁寧に説明して頂きありがとうございます。何十回も見直していたつもりでしたが、基礎の演算子を間違えてしまっていたんですね。たしかに条件分岐させたいところで代入演算子を使っていたら0にしかならないですよね。
訂正後、無事動作するようになりました。ありがとうございました。