>  >  >  > 

美しすぎるカードゲームjQueryで作る神経衰弱

美しすぎるカードゲームjQueryで作る神経衰弱

こんにちは、稲垣です。

8月も終わりグッと涼しくなってきましたね!
今年は黒いカサカサした虫と縁深い夏でしたが、それも終わりかと思うと心が軽くなります。

さて、前回の記事でカードの画像を作成したので、今回もカード繋がりで神経衰弱を作成してみました。

目次

  1. デモ
  2. html、CSS、画像ファイル
  3. 動きの実装
  4. まとめ

デモ

まずは完成イメージです。

説明するまでもないですが、記憶力を頼りに伏せられたカードを2枚選んで柄合わせしていくやつです。

html、CSS、画像ファイル

html

今回は中身のliタグはjavascriptで生成するのでこれのみです。

css

基本的に生成したliタグの並びを整えるものになります。

カードが回転するような動きをつけるのでimgタグにposition:absoluteを設定しています。

.offと.lockは、選択中のカードと2枚見つかったカードのクリックイベントを無効にするためのクラスです。

画像ファイル

カードの表と裏側の画像を用意します。
裏側は連番で名前をつけてください。

img160902_1

はい、かわいいですね。

動きの実装

それでは動きの部分になります。まずは必要な変数と配列を宣言します。

変数の宣言をしたら、配列にカード番号の格納とカードの配置を行います。

配列catに各カードの表の番号が入るので、1~10までの数字を2つずつ格納します。

img160902_2

これで見た目は完成したので、後はカードをクリックした際の処理を記述していきます。

上記で出てきたユーザー定義関数を記述していきます。

まずはカードのアニメーションとロック関連のものになります。

cardClose()は第一引数に選択したカードの並び順を入れ、第二引数には次に開くカードが表か裏かを指定して使用します。

uraOpen()の第一引数にも同じく選択したカードの並び順を入れます。

最後に1枚目と2枚目のカードの正否を判定する関数になります。

カードをめくるアニメーションが終わるのを待ってから処理をおこなうためにsetTimeoutを使用してみました。

まとめ

以上で完成になります!

最後にコードをまとめて載せます。

今回の一番のポイントは、表面の絵柄を猫にしたことです。

うまく動かなくて悩んでいる時でも、絵柄を見るだけでガンガン癒やされるので疲弊しません。

img160902_3

はい、かわいいですね。
それではまた。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング