このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CSS3 jQueryでドラゴンクエスト風戦闘シーン作りました。

jQuery

2012.01.13

この記事は最終更新日から1年以上が経過しています。

CSS3とjQueryを使い、ドラゴンクエスト風戦闘シーン作ってみました。(制作日数1日程)

デモページ

例の如くwebkit系 (safari,GoogleChrome)等で確認お願いいたします。

では実際に製作過程を紹介させて頂きます。

まずはマークアップから。

HTML マークアップ

技術的には全く凄い事は行っていません。簡単です。

HTML

.dqArea.shock{
  -webkit-animation-name:shock;
  -webkit-animation-iteration-count:1;
  -webkit-animation-duration:1s;
}
@-webkit-keyframes shock{
  20% {-webkit-transform: translate(20px);}
  40% {-webkit-transform: translate(-20px);}
  60% {-webkit-transform: translate(10px);}
  80% {-webkit-transform: translate(-10px);}
}

CSS3

CSSも大したことは行っていませんが、より戦闘シーンに近づけるためアクションを追加しました。

ダメージを受けた時のアニメ

.dqArea.shock{
  -webkit-animation-name:shock;
  -webkit-animation-iteration-count:1;
  -webkit-animation-duration:1s;
}
@-webkit-keyframes shock{
  20% {-webkit-transform: translate(20px);}
  40% {-webkit-transform: translate(-20px);}
  60% {-webkit-transform: translate(10px);}
  80% {-webkit-transform: translate(-10px);}
}

画面全体を左右に揺らしました。

モンスターの攻撃をダメージを受けた時のアニメ

.monsterLi li.attck img{
  -webkit-animation-name: "attck";
  -webkit-animation-iteration-count:1;
  -webkit-animation-duration:1s;
}
.monsterLi li.damage img {
  -webkit-animation-name: "damage";
  -webkit-animation-iteration-count:1;
  -webkit-animation-duration:1s;
}
@-webkit-keyframes attck{
  50% {-webkit-transform: scale(1.5) rotate(-15deg);}
}
@-webkit-keyframes damage{
  10% { opacity: 0.5; -webkit-transform: translate(2px); }
  20% { opacity: 1; }
  30% { opacity: 0.5; -webkit-transform: translate(-2px); }
  40% { opacity: 1; }
  50% { opacity: 0.5; -webkit-transform: translate(2px); }
  60% { opacity: 1; }
  70% { opacity: 0.5; -webkit-transform: translate(-2px); }
  80% { opacity: 1; }
  90% { opacity: 0.5; -webkit-transform: translate(2px); }
}

飛び出て攻撃する感じと、ちかちか点滅しながら左右に揺らしました。

jQueryに関しては次回。

(※注 こちらは、2012.1月の記事です。最新バージョンは、2013.11月バージョン 「【JS】ドラゴンクエスト バトルシミュレーター (ドラクエ戦闘シーン改)」 になります。

Comment

Related Article

CSS3 jQueryでドラゴンクエスト風戦闘シーン作りました。

2012.01.13

jQuery 要素の属性を変更 attr

2011.11.16

jQuery cssクラスを追加、削除する。addClass() , removeClass(),toggleClass

2011.11.16

jQuery セレクタやcssを複数指定

2011.11.16

jQuery formのデータ値取得方法

2011.08.13

jQuery 読み込み方法

2011.03.12

jQuery コレ使えるぜ的関数

2011.01.19

jQuery aタグによるclick()イベント

2011.01.19

jQuery 記述方法

2011.01.17

jQuery セレクタについて

2011.01.17

CATEGORY LIST

LATEST NEWS

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その5

Rust

2025.04.14

う、動くぞ! Mac mini Apple M4 Pro で PS3ソフトを遊ぶ。RPCS3 Mac版を起動

Game

2025.04.12

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その4

Rust

2025.04.10

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その3

Rust

2025.04.08

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その2

Rust

2025.04.07

時代を先取りし過ぎた ニューラルネットワークが導入されたゲーム『がんばれ森川君2号』を令和に嗜んでみる。

Game

2025.04.06

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その1

Rust

2025.04.05

keyring-rsで、Macのキーチェーンに登録する。

Rust

2025.04.04

RustとWebAssemblyによるゲーム開発 Webpack5対応

Rust

2025.03.27

Rustで創る MOS 6502 CPU その3 (Cursorと共に)

Rust

2025.02.24

あけましておめでとうございます(24日経過)

イベント

2025.01.24

アーキテクチャConference 2024に参加してきました。

イベント

2024.11.28

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US