ログインしていません。ログインなしで保存できる投稿数には制限があります。

プログラム編集

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

制限時間内にクリスマスツリーを飾るゲーム。だんだん雪が積もってオーナメントが埋もれてしまうので、その前に取り出して飾り付けます。アドベントカレンダー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イベント処理停止。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ