Forked from: Crane_MolTech's Raphael.js のアニメ仕様指定ガイド用ページの基本04 View Diff (4)

Fork
1
Fav
0
View
227
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 90 lines
  • HTML 1 lines
  • CSS 10 lines
次はドラッグした円がターゲットの円(灰色)と接した時(ヒットした時)にターゲット円の色が変わる仕組みを作る。

ポイントは、ヒット判定の自作関数 hitTest() を使い、ドラッグ中は常時監視を行う点。ヒットしたら attr({fill:'#FF8800'}); でターゲットをオレンジにする。

※ コード内のコメントで書いているが、ここの Raphael バージョンだと isBBoxIntersect() が利用不可。つまりヒット判定が出来ない。
Codepen や jsfiddle も検討したが、HTMLとCSSは試作の段階では全くいじる必要は無いので、これらの表示欄自体が邪魔で使いたくない。

※ 割り振った末尾番号を間違えていたので修正した。
  • Raphael.js のアニメ仕様指定ガイド用ページの基本05
  • Raphael 1.5.2
  • Raphael.js のアニメ仕様指定ガイド用ページの基本05

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by