sass

ループ文
@for $i from 0 through 7
.result_#{$i+1}
+prefixes(transform,rotate(#{$i*45}deg))
.roulette_#{$i+1}
.roulette_needle
+prefixes(animation,move_#{$i+1} 3.0s cubic-bezier(0.42, 0, 0.77, 1.04) 0s 1 forwards)
+keyframes("move_#{$i+1}")
0%
+prefixes(transform,rotate(0deg))
100%
+prefixes(transform,rotate(#{$i*45+360*4}deg))

if文
@if $i == 1 or $i == 2
~~

と&&は使えない。
-> or

&& -> and

モーダル、オーバーレイを背景をスクロールさせない

モーダル表示の時に、現状の高さを取得して
top: マイナス現状の高さ+position: fixed
をbodyにかける。
iPhoneも問題ないらしい。
imasashi.net

参考にするwebサイト

project-obsolete.com

f:id:tissueboy:20200113135001p:plain


joseph-berry.webflow.io

f:id:tissueboy:20200113135128p:plain


bruno-simon.com

f:id:tissueboy:20200113135228p:plain


renaudrohlinger.com

f:id:tissueboy:20200113135359p:plain

For the technologies I used the game framework Phaser.io. The renderer is based on Pixi with Canvas/WebGL. For the audio I used HowlerJS and I developed with Es6 StandarJS + Webpack. I tried to used CocoonJS and Cordova to create some natives apps but by the end of the dev CocoonJS's services were discontinued.

twitter.com


作る前に
qiita.com
github.com

phaser.js 3 zone

this.zone_left = this.scene.add.zone(this.x - this.width*1.5, this.y - this.height/2).setSize(this.width*1.2, this.height*1.2);
this.zone_left.x = this.x;
this.zone_left.y = this.y;
config.scene.physics.world.enable(this.zone_left);
this.zone_left.body.setAllowGravity(false);
this.zone_left.body.debugBodyColor = 0x00ffff;