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

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】ドラゴンクエスト バトルシミュレーター （ドラクエ戦闘シーン改）」 になります。