🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1288閲覧

Javascript コード 評価

williamsArk

総合スコア46

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/12/31 07:11

数字が盤面にランダムで表示され、出てきた数字と同じ数字のパネルを押すというゲームを作りました。動作自体は問題ないのですが、重複しないで数字を出せるかどうかのところで試行錯誤した結果、コードがスッキリしていないような気がします。やはりクラスなどをもっと駆使したほうがいいのでしょうか?何かアドバイスがあればお願いします。

'use strict'; { ///パネルを作る処理 class Panel { constructor() { this.el = document.createElement('li'); this.el.classList.add('pressed'); this.el.addEventListener('click', () => { this.check(); score.textContent = scoreNum; }); }; getEl() { return this.el; } activate(num) { this.el.classList.remove('pressed'); this.el.textContent = num; } check() { if(parseInt(this.el.textContent) === answerNum) { this.el.classList.add('pressed'); scoreNum++; currentNum++; randomAsk(); } else { scoreNum--; } } }   ///盤面全体の処理 class Board { constructor() { this.panels = []; for (let i = 0; i < 16; i++){ this.panels.push(new Panel()) } this.setup(); } setup() { const board = document.getElementById('board'); this.panels.forEach(panel => { board.appendChild(panel.getEl()); }); } activate() { this.panels.forEach(panel => { const ranNum = numArray.splice(Math.floor(Math.random() * numArray.length), 1)[0]; panel.activate(ranNum); }); } } ///カウントダウンの処理 function countD() { let sec = 300; let id = setInterval(() => { const timer = document.getElementById('timer'); if (sec <= 0) { clearTimeout(id); alert('GAMEOVER'); } timer.textContent = sec; sec--; console.log(sec); }, 1000); } const board = new Board(); ///数字をランダムで出す。プレイヤーはその数字を押すと得点。数字は重複しないようにする。 let currentNum = 0; let startTime; let isPlaying = false; let score = document.getElementById('score'); let scoreNum = 0; const numArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; const answerArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; let answer = document.getElementById('answer'); let answerNum = 0; const start = document.getElementById('start'); start.addEventListener('click', () => { if (isPlaying) { return; } randomAsk(); isPlaying = true; board.activate(); countD(); });  ///数字は重複しないようにさせる関数 function randomAsk() { answerNum = answerArray.splice(Math.floor(Math.random() * answerArray.length), 1)[0]; answer.textContent = answerNum; } startTime = Date.now(); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/12/31 07:15

たぶん気づかれてるかとは思いますが質問が途中で切れてますので編集して調整してください
guest

回答1

0

コードがスッキリしていないような気がします。

普通にHTMLコンテンツとして書いたほうがスマートですね。

クラスなどをもっと駆使したほうがいいd

FPSがポジティブで、様々に変化する描画対象を同期させる必要がある時とは別の考え方をしてください。

FPSはネガティブであり、簡単なDOM構造とイベント駆動だけで十分に成立するコンテンツと感じます。
ですので、逆に「抽象化は一切不要」な事例と感じます。


抽象化すべきかどうかの判断材料をマークダウンの強調で示してみました。ご参考になれば。

投稿2019/12/31 20:44

AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkitoshiManabe

2019/12/31 20:50

「ネガティブ」は言い過ぎました。 「setInterval() が 同期対象のフレームとして存在するのではなく、全体時間のタイムキーパーとしての意味しかない。」です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問