kaleidoscope

piyotori

License: MIT License

Fork
9
Fav
19
View
9126
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 159 lines
  • HTML 1 lines
  • CSS 172 lines
1.canvasで三角形エリアに文字をランダム20個描画
 1.1 canvasで三角形にclip切り抜く
 1.2 文字のサイズと色をランダムに決定し描画
 1.3 文字サイズ、色、x、yを保存しておく
2.canvas画像をDataURLで出力し24個のimg.srcに
3.24個imgの配置、角度をcssで調整
4.setIntervalで三角形を作り直す
 4.1 最初と同じようにcanvasで描画
 4.2 最初に描画したときの文字のx、y、色、サイズを用いる
 4.3 その際 yだけ+1する
 4.4 yが三角形clipエリア外(下)に出るなら新しい文字をclipエリアの外(上)に描画
  ※常に20個分の文字の描画位置、色、サイズのデータを保持している
 4.5 作り直したcanvasの三角形画像をDataURLで出力し24個のimg.srcに
  • kaleidoscope
  • kaleidoscope

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

piyotori

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Shogo.KamiyaShogo.Kamiya:

すき

happi_tan1happi_tan1:

きれー!

tsmallfieldtsmallfield:

おもしろい!

Forked

sort by