13 K以下の私の最初のゲームジャム

あなたは私のゲームを試してみたい場合は、spacebar.terabytetiger.comでそれを再生することができます-はい、それはあまりにも携帯電話で動作します!🥳

背景（計画段階）

JS 13 KGamesとは

JS 13 KGamesは、ゲームのためのゲームを作成しています.

Why exactly 13 kB?
Well... why not? :)

ソース:js13kGames
これは私の日々の開発作業に比べていくつかの興味深い課題を作成します.たとえあなたが通常のフレームワークを制限に適合させることができるとしても、あなたの13 KBのそのような大きな部分はそれが価値がないということを利用するでしょう.何もあなたのためにあなたのためにあなたの好きなフレームワークなしに行くどのようにこれらの“小さな”物事に依存して見つけるために.

なぜ私の最初のゲームのJS 13 K

私は初めてゲームを開発することで、私はそれが(比較的)単純であることを望んでいたので、私は私の大好きなオンライン幼児ゲームの1つのラインに沿って何かを作る方法を考え始めました.13 KB限界のおかげで、狭い範囲を保つことは、それがゲームジャムの要件に私を保つのを助けるだけでなく、管理可能な開発努力であることを確実とするのに役に立つだろうということを知っていました.
それから、テーマは発表されました:スペース
私は何が私を殴ったかを知りません、しかし、私は私が私がキーボードの向こうから他のキーにものを提供しているスペースバーテーマのゲームをする必要があるというテーマを見た瞬間から知っていました、あるいは、スペースバーをテーマにしたゲームはスペースで旅行している人々に銀河で最も野生の飲み物を提供しています.
それから、私は私の信頼できるキャッチフレーズを打ちましたスペースバーのスペースバーが誕生しました.
最低限の計画と名前の裸で、私は銀河の次の大ヒットを作成する準備ができていた!

レモネードスタンド 課題（Vueフェーズの開発／I）

何でも、バニラHTML / CSS / JSですか？

バニラHTML/CSS/JSを書くことは控えめであるということを言うために、私がこれまでにフレームワークなしでいくつかのラインのJSを持ったウェブサイトを作ったと思いません😅). 私はまだVueと類似したいくつかのアプローチを使うことができました

コンポーネント/モジュールが必要ですか？

これは自己の問題ですが、スペースバーのスペースバーのベースは3つのファイルに書かれています:

ゲーム.HTML

メイン.CSS

ゲーム.JS

これは最初に偉大だったが、確かにそれ以降の開発プロセスで遅かれ早かれいくつかのunrulyと非常に長いファイルにつながった.私のファイルが手に入らないようになっている最大の指標は、私のCSSファイルで🤪.

私は0.3333333333ドル

私のゲームにまだコメントを聞かせます.JSファイル自体はここで話す

// Store money (and prices) in whole numbers because js decimals are tired

あなたが前に浮動小数点丸め問題に走らないならば、それは見ていて、準備されていることに気づいている良いことです.当初、私はゲームでセント/decimalsを含むことを計画していました、しかし、私は速く私がその騒ぎに対処したくないとわかりました、そして、全部の数だけを使い始めました.

PNGファイルは実際に大きいです

この問題は本当に私を悩ましました、しかし、また、それは「バグ」と欲求不満のより少ないです.ファイルサイズの制限のために、私は私が通常行う素晴らしい高品質のfavicon/社会的なイメージを含めることができません.これは本当にゲーム内の経験に影響しませんが、私は他の人が自分のゲームのイメージのための部屋を持っているように見えるので、私はsuboptimal何かをやっていると仮定し、私は単一のPNGファイルに収まることができませんでした🙏🏻

魔法使い、魔法使いの魔法使いを見に出かけます

私が走った最終的な「ブロッカー」は、それが私のゲームの束ねているとminificationに来た時でした.
ミニ化が進んでいる方法の私の解釈:キャンディは空から、そして、ユニコーンが私のファイルが魔法のように1つのNPMコマンド🦄🍬🦄🍭
実際に起こったこと:すべてのステップは熊手漫画スタイルを踏むように.幸せはどこにも見つからない.コンパイル時にファイルサイズが大きくなりました.

それは正しいです- ya Boiは、コンピュータよりもコンパイルされたコードを書くのが良いです🤪.
私は、私に利用可能な豊富なパッケージがあることを期待していたが、それは私が見つけることができなかった(私は見つけることができた)HTML、CSS、およびJSをよりコンパクトなファイルにロールバックして、Vueは私がこれまでに予想したよりもはるかに重いリフティングを行っていたことが判明.
ここでの最大の問題は、それぞれのミニ化パッケージが3 - 1の1 - 2で動作することで、私は私のHTMLファイルに直接let state = {}関数の呼び出しが含まれていたので、私は本当に痛くなっていたことを意味しているので、私はJSのための良い擬人化を見つけたときでも、それはちょうどボタンの半分を割った.
ありがたいことに、私のファイルはterser、csso、およびHTMLミニファイラーでそれらを凝縮するのに十分小さかった🎉.

包む（楽しい段階）

遊び時間

上で述べたように、私は子供の頃から好きなようにこのゲームを構築していました.だから、一度働くことがあったら、それをテストするのはとても楽しいものでした.私が十分にゲームで幸せだったならば、私は妻、姉妹、兄弟といくつかの友人がフィードバックを提供するためにゲームをしようとしました、そして、それが彼らがゲームがどのように働いたかについて発見するのを見ることが全く楽しいことでした.

崩れて荒涼とした経済

舞台裏で見てください-これは、価格がゲーム(各々のアイテムのために走る)内で毎日変わる方法です:

function updatePricing(item) {
  // Randomly update the pricing of the passed in item - each day the items will randomly change in price from -33% - +35% rounded to an integer.
  const percentile = Math.min(Math.random() - 0.33, 0.35);
  state.ingredients[item].price = Math.max(
    state.ingredients[item].price +
      Math.round(state.ingredients[item].price * percentile),
    2
  );
  document.querySelector(
    `#buy-${item}`
  ).innerHTML = `Buy 1 ${state.ingredients[item].label} ($${state.ingredients[item].price})`;
  return state.ingredients[item].price;
}

この関数は、アイテムの現在の価格を受け取り、それを上下に- 33 -> 35 %ランダムに毎日バンプ.私は、これがおよそ意図したように現在働くと思います、しかし、当初、私は- 50 %のような何かで下限を持ちましたが、25 %だけ増加することができました.乱数が25 %より高いならば、それは25 %の増加(新しい論理で35 %で)と同じになります.小数点を含まないと突然の価格はほとんど増加していなかったが、すぐに2ドルの下限に向かって急落する欲望と組み合わせること.
これはゲームを壊さなかったが、アイテムが2ドルであるまで、それは購入する価値がなかった、そして、利益マージンが余分にスリムであることを意味した非常に楽しい遊び経験のために作りました.

結論

私の最初のゲームジャムの浮き沈みに沿って次のおかげで🥳 それは非常に教育的な経験であり、私は確かにフレームワークのスペースバーを作成して以来、フレームワークはどのように役立つ感謝しています.場合は、ゲームをプレイすると、私はあなたのスコアをTwitterで共有見て見て!
あなたがスペースバーのスペースバーを走らせるスパゲティを見ることに興味があるならば:

/ テラビートル

13 kBのJS gamejam 2021へのエントリー

また、 spacebar-space-bar を使用している場合は、少し余分な制御を得ることができますし、ゲームのルールを設定します😉