クリスマスツリーを飾ろう！ 📖

制限時間内にクリスマスツリーを飾るゲーム。だんだん雪が積もってオーナメントが埋もれてしまうので、その前に取り出して飾り付けます。アドベントカレンダー23日目。

プログラム: (→大)
!『https://n3s.nadesi.com/plain/SVGplus.nako3』を取り込む。 描画中キャンバスの「高さ」に0をDOM属性設定。 母艦は、DOM親要素。 タイムリミット＝60。# 秒 ＃ 親SVG作成 変数 [画面幅,画面高]＝[380,520]。 ツリー画像＝[画面幅,画面高]のSVG親要素作成。# svg ＃ 背景 ツリー画像へSVG描画開始。 変数 地平線＝画面幅。 ＃＃ 空 定義＝ツリー画像へSVG定義領域作成。# defs stop＝[["0%","#000033"],["100%",アリスブルー色]]。 x1,x2,y1,y2＝[0,0,0,1] グラ空＝定義へ[x1,y1]から[x2,y2]までstopでSVG線形グラデーション作成。 背景空＝[0,0,画面幅,地平線]へSVG四角描画。 背景空の「塗り色」にグラ空をSVGグラデーション設定。 ＃＃ 地面 ベージュ色にSVG塗り色設定。 背景地面＝[0,地平線,画面幅,画面高さ-地平線]へSVG四角描画。 ＃ツリー 変数 [頂点,中心]＝[65,画面幅/2]。 ＃＃ 幹 茶色にSVG塗り色設定。 [中心-20,頂点+200,40,50]へSVG四角描画。 ＃＃ 葉 「#009900」にSVG塗り色設定。「#009900」にSVG線色設定。 15にSVG線太さ設定。「丸」にSVG角形状設定。 葉頂点＝頂点。 ３回: 枝張り＝65+30*(回数-1)。葉底辺＝葉頂点+枝張り。 [[中心,葉頂点],[中心-枝張り,葉底辺],[中心+枝張り,葉底辺]]のSVG多角形描画。 葉頂点＝葉頂点+枝張り/2。 ＃＃ 鉢 10にSVG線太さ設定。 鉢＝[[中心-50,頂点+250],[中心+50,頂点+250],[中心+40,頂点+310],[中心-40,頂点+310]]のSVG多角形描画。 ＃＃＃ 鉢のパターン レンガ＝定義に[40,20]でSVGタイルパターン作成。# pattern レンガへSVG描画開始。 # 鉢の地色 無色にSVG線色設定。「#CC5533」にSVG塗り色設定。1にSVG線太さ設定。 [0,0,40,20]へSVG四角描画。 # レンガの目地 # まとめてフィルターが掛けられるようグループにする 目地＝レンガへSVGグループ作成。# g 目地へSVG描画開始。 白色にSVG塗り色設定。 [0,0,40,2]へSVG四角描画。[0,10,40,2]へSVG四角描画。 [0,0,2,10]へSVG四角描画。[20,0,2,10]へSVG四角描画。 [10,10,2,10]へSVG四角描画。[30,10,2,10]へSVG四角描画。 # 目地にかけるフィルター フィルター鉢＝定義にSVGフィルター作成。# filter SVG対象フィルター＝フィルター鉢。 目地を3にSVG画像粒子拡散。 # パターンを適用 鉢の「塗り色」にレンガをSVGタイルパターン設定。 鉢の「線色」にレンガをSVGタイルパターン設定。 ＃ オーナメント ツリー画像へSVG描画開始。# 描画先がパターンになってるので戻す。 ＃＃星 黄色にSVG塗り色設定。 星＝5で[40,40]に[40,18]のSVG星描画。 星を[20,地平線+20]へSVG描画移動。 ＃＃キャンディ 縞＝定義に[10,10]でSVGタイルパターン作成。 縞へSVG描画開始。 赤色にSVG塗り色設定。赤色にSVG線色設定。 [0,0,10,10]へSVG四角描画。 白色にSVG線色設定。3にSVG線太さ設定。「四角」にSVG線端形状設定。 [5,0]から[0,5]へSVG線描画。 [10,5]から[5,10]へSVG線描画。 飴＝ツリー画像へSVGグループ作成。 飴へSVG描画開始。 無色にSVG塗り色設定。空にSVG線色設定。10にSVG線太さ設定。「丸」にSVG線端形状設定。 [16,16]へ(180をラジアン変換)から0まで8のSVG円弧描画。 [24,16]から[24,50]へSVG線描画。 飴の「線色」に縞をSVGタイルパターン設定。 飴を[120,地平線+25]へSVG描画移動。 飴を30だけSVG描画回転。 ＃＃プレゼント プレゼント＝ツリー画像へSVGグループ作成。 プレゼントへSVG描画開始。 黄色にSVG塗り色設定。無色にSVG線色設定。1にSVG線太さ設定。 [0,12,30,24]へ[3,3]でSVG角丸四角描画。 赤色にSVG塗り色設定。 [13,12,4,24]へSVG四角描画。 [0,22,30,4]へSVG四角描画。 [15,12]へSVG連続パス描画開始。 [27,3]まで[23,0]でSVG二次ベジェ曲線描画。 [15,12]まで[30,10]でSVG二次ベジェ曲線描画。 [3,3]まで[0,10]でSVG二次ベジェ曲線描画。 [15,12]まで[7,0]でSVG二次ベジェ曲線描画。 SVG連続パス描画終了。 [15,12]へ[3,2]のSVG楕円描画。 プレゼントを[160,地平線+40]へSVG描画移動。 ＃＃靴下 赤色にSVG塗り色設定。赤色にSVG線色設定。1にSVG線太さ設定。 靴下＝ツリー画像へSVGグループ作成。 靴下へSVG描画開始。 [30,5,20,35]へSVG四角描画。 [20,30,20,20]へSVG四角描画。 [20,40]へ10のSVG円描画。 [40,40]へ10のSVG円描画。 白色にSVG塗り色設定。 [28,3,24,12]へ3のSVG角丸四角描画。 靴下を[200,地平線+30]へSVG描画移動。 靴下を10だけSVG描画回転。 ＃＃玉 玉シンボル＝定義へSVGシンボルグループ作成。# symbol 空にSVG塗り色設定。 玉シンボルへSVG描画開始。 [50,70]へ50のSVG円描画。 [40,4,20,20]へSVG四角描画。 # フィルター フィルター球＝定義にSVGフィルター作成。# filter SVG対象フィルター＝フィルター球。 照明＝[白色]で玉シンボルへSVG照明効果。 照明のDOM要素ID取得の「surfaceScale」に4をSVG属性設定。 照明に[30,45,30]のSVG点光源設定。 「」に5のSVG画像ボカシ。 「元画像」と「」を「lighten」でSVG画像ブレンド。 「」と「影」を「atop」でSVG画像合成。 # 複製 ツリー画像へSVG描画開始。 玉色＝[黄色,赤色,紫色,青色] 玉位置＝[[280,30],[320,30],[280,70],[320,70]] 飾玉は空配列。 4回: 番号＝回数-1。 x,y＝玉位置[番号]。 飾玉[番号]＝玉シンボルをSVG参照複製。 飾玉[番号]の「塗り色」に玉色[番号]をSVG属性設定。 [x,地平線+y]へ飾玉[番号]をSVG描画移動。 飾玉[番号]を0.2だけSVG描画拡大。 ＃＃電飾 電飾シンボル＝定義へSVGシンボルグループ作成。 電飾シンボルへSVG描画開始。 # 画像ボカシで光ってる感じにする 「rgba(255,255,100,0.5)」にSVG塗り色設定。無色にSVG線色設定。 光＝[16,16]へ10のSVG円描画。 フィルター光＝定義にSVGフィルター作成。 SVG対象フィルター＝フィルター光。 光に4でSVG画像ボカシ。 # 電球 金色にSVG塗り色設定。 [16,16]へ4のSVG円描画。 # 移動 ツリー画像へSVG描画開始。 電飾は空配列。 16回 番号＝回数-1。 電飾[番号]＝電飾シンボルをSVG参照複製。 [20*回数,地平線+105]へ電飾[回数-1]をSVG描画移動。 ここまで。 # アニメーションは飾り付け完了後に開始させる。 ●電飾アニメーション開始 点滅間隔＝3。 16回: 番号＝回数-1。 電飾[番号]の「塗り透明度」に0.1をSVG属性設定。 電飾[番号]の「塗り透明度」に「{点滅間隔}s」と「0.1;0.7;1;1;1;0.7;0.1」でSVGアニメーション設定。 それの「begin」に「{番号%点滅間隔}s」をSVG属性設定。 ここまで。 ツリー画像へSVG描画開始。 ＃ドラッグ＆ドロップ ツリー画像のSVGドラッグ許可。 星のSVGドラッグオン。 飴のSVGドラッグオン。 プレゼントのSVGドラッグオン。 靴下のSVGドラッグオン。 4回。飾玉[回数-1]のSVGドラッグオン。。。 16回。電飾[回数-1]のSVGドラッグオン。。。 ＃タイムリミット ＃＃雪のフィルター # ぼかして雪っぽくするためのフィルター フィルター雪＝定義にSVGフィルター作成。 SVG対象フィルター＝フィルター雪。 5のSVG画像ボカシ。 ＃＃積雪のアニメーション 白色にSVG塗り色設定。無色にSVG線色設定。 積雪＝[-10,地平線-10,画面幅+20,1]へSVG四角描画。 積雪にフィルター雪をSVGフィルター設定。 積雪アニメ＝積雪の「height」に「{タイムリミット}s」と「{0};{画面高さ-地平線+20}」でSVGアニメーション設定。 積雪アニメの「repeatCount」に1をSVG属性設定。# 1回だけのアニメーション 積雪アニメの「fill」に「freeze」をSVG属性設定。# アニメーションが終わったらその状態を固定。 ＃＃降雪のアニメーション 背景は背景地面のDOM次要素取得。 雪は空配列。雪数＝画面幅/20。 白色にSVG塗り色設定。無色にSVG線色設定。 # シンボル 雪シンボル＝定義へSVGシンボルグループ作成。 雪シンボルへSVG描画開始。 [20,20]へ8のSVG円描画。 フィルター雪をSVGフィルター設定。 # 複製 ツリー画像へSVG描画開始。 雪は空配列。 雪数回: 雪[回数-1]＝雪シンボルをSVG参照複製。 ツリー画像の背景に雪[回数-1]をDOM子要素挿入。 [0,-40]へ雪[回数-1]をSVG描画移動。 # アニメーション開始のタイミング 降雪開始は0から雪数の配列連番作成。 降雪開始を配列シャッフル。 # アニメーション設定 雪数回: 番号＝回数-1。 X＝番号*20+8。Y＝-20。 揺れ幅＝((20の乱数)+10)/2。 揺れ位置＝空。 32回。 XX＝SIN(((地平線/2)/16*回数)/(地平線/2)*PI*2)*揺れ幅。 揺れ位置は揺れ位置に「{X+XX},{Y};」を追加。 Y＝Y+(地平線/2)/16。 ここまで。 落下速度＝(5の乱数)+5。 雪[番号]の「translate」に「{落下速度}s」と揺れ位置でSVG変形アニメーション設定。 それの「begin」に「{降雪開始[番号]/2}s」をSVG属性設定。 ＃メリークリスマスのアニメーション ＃＃グーグルフォント設定 # https://fonts.google.com/specimen/Kaushan+Script?category=Handwriting&noto.script=Latn グーグルフォント指定＝ツリー画像にSVG定義領域作成。 グーグルフォント指定に「<style>@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap")</style> 」をHTML設定。 ＃＃メリークリスマス 「"Kaushan Script", cursive」にSVG文字フォント設定。 「38」にSVG文字サイズ設定。 「crimson」にSVG塗り色設定。 メリークリスマス＝[30,450]へ「Merry Christmas !!」をSVG文字描画。 ＃＃マスク 白色にSVG塗り色設定。無色にSVG線色設定。 文字マスク＝[0,地平線,画面幅,125]へSVG四角描画。 文字マスクをSVG最背面。 メリークリスマスをSVG最背面。 ＃＃アニメーション設定 文字アニメ＝文字マスクの「x」に「6s」と「0;{画面幅}」でSVGアニメーション設定。 文字アニメの「begin」に「{タイムリミット}s」をSVG属性設定。 文字アニメの「repeatCount」に1をSVG属性設定。# 1回だけのアニメーション 文字アニメの「fill」に「freeze」をSVG属性設定。# アニメーションが終わったらその状態を固定。 ＃＃アニメーション開始 (タイムリミット)秒後には、: メリークリスマスをSVG最前面。 文字マスクをSVG最前面。 8秒後には、終了処理。。。 ●終了処理: ツリー画像のSVGドラッグ許可取消し。 文字マスクをツリー画像からDOM子要素削除。 積雪アニメを積雪からDOM子要素削除。 積雪の「高さ」に画面高さ-地平線+20をSVG属性設定。 「終了！　うまく飾れたかな？」と言う。 電飾アニメーション開始。 母艦へDOM親要素設定。 ツリー画像をタッチした時には、: 対象イベントのDOMイベント処理停止。