Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[JavaScript]パズルアプリを作成しました

Posted at

概要

javascriptのアウトプットとして、簡単なパズルゲームを作成しました!

作成物

Puzzle_js.jpg

使用言語

html,css,javascript

GitHub リポジトリ

苦戦したところ

正解判定をどのように実装すれば良いのかわからず苦戦しました。
document.getElementById('dropTarget-1').setAttribute('data-correct', 'piece-7');
このように、今回はsetAttributeを使用しました。
data属性についてあまり理解していなかったので、勉強になりました。

また、GitHub Pagesでの公開が初めてだったため、メインのhtmlをindex.htmlにしないと
いけないことに公開後に気が付き慌ててファイル名を変更しました。
今後は気をつけようと思います。

総括

javascriptの基本の理解がまだまだ不足していると感じたので、またインプットメインの
学習に戻ろうと思います。
ただ、以前よりは見たことのある構文が増えてきたので、学習の成果は感じました。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

diywmk9
@diywmk9

document.getElementById('dropTarget-1').setAttribute('data-correct', 'piece-7');
このように、今回はsetAttributeを使用しました。
data属性についてあまり理解していなかったので、勉強になりました。

data属性をJavaScriptから操作する場合は、setAttribute()ではなくdatasetプロパティを使うほうが楽です。

data-correct属性を追加
document.getElementById('dropTarget-1').dataset.correct = 'piece-7';

data-correct属性を削除
delete document.getElementById('dropTarget-1').dataset.correct;

0

Let's comment your feelings that are more than good

Qiita Conference 2024 Autumn will be held!: 11/14(Thu) - 11/15(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

Takahiro Anno, Masaki Fujimoto, Yukihiro Matsumoto(Matz), Shusaku Uesugi / Nicolas Ishihara(Vercel Inc.)

View event details

Being held Article posting campaign

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address