電子冒険:エピソード77:クッキークリッカーゲーム

10440 ワード
electron jquery javascript テキストリンク
シリーズはしばらくの間、行っていて、どうにか、私は包装の重要な主題に決して着きませんでした.電子Appsの主な魅力は、パッケージ化され、配布することができますので、ユーザーは任意の依存関係をインストールすることなく、それらを実行することができます.“インストールJava”として一見単純に何かでも無限に技術サポートの問題につながる.
二つのシナリオを試してみてパッケージを試してみたいです.まず、純粋に静的アプリ.そして、Svelteや反応のようなコンパイルされたスパバックエンドとアプリ.
だから我々は包装になる前に、簡単な静的アプリを構築する-クッキークリッカーゲーム.パッケージにいくつかの異なるタイプの資産を持つには、以下のようにします.
  • cookie picture from Wikipedia
  • coin sound from freesounds
  • NPMパッケージからのjQuery
    • ゲームは全く些細なものになります.クッキーをクリックすると、それは音と増加スコアを再生します.

    セットアップ
    $ npm install --save-dev electron jquery
    package.json
    {
  "devDependencies": {
    "electron": "^15.1.1",
    "jquery": "^3.6.0"
  },
  "scripts": {
    "start": "electron ."
  }
}
    index.js我々は、ちょうど開く必要がありますindex.html . 空を去ったpreload.js 念のために、我々は何かのためにそれを必要とします.
    let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({
    webPreferences: {
      preload: `${__dirname}/preload.js`,
    },
  })
  win.loadFile("index.html")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})
    index.htmlクッキーはbody , and #score スコアが表示されます.それは全体のゲームです!
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
    <title>Cookie Clicker</title>
  </head>
  <body>
    <div id="score">Score: 0</div>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./app.js"></script>
  </body>
</html>
    app.css正確にユーザーがクリックする場所に応じていくつかの合併症を防ぐために、我々はスコアをクリックする必要はありませんブラウザを指示する必要がありますpointer-events: none ) またはuser-select: none ).
    body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url("cookie.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}

#score {
  pointer-events: none;
  user-select: none;
  font-size: 36px;
  font-family: fantasy;
}
    app.jsそして最後にゲームのロジック.唯一の明白なことは、我々が設定する必要があるということですaudio.currentTime = 0 . 音が再生されているユーザーがクリックした場合、我々はそれが最初から音を開始したい.公正なaudio.play() 巻き戻しがなければ、コールは無視されるだろう.
    代わりに、我々は一度に複数の音を再生することができますが、誰かが本当に速くクリックした場合、それはかなりぎょっとすることができます.
    let score = 0

let audio = new Audio("coin.wav")

$("body").on("click", (e) => {
  e.preventDefault()
  score += 1
  $("#score").text(`Score: ${score}`)
  audio.currentTime = 0
  audio.play()
})

    結果
    結果を以下に示します.

    我々は単純な静的なアプリを持っているので、次のエピソードでは、我々はそれをパッケージにしようとすると、何かのユーザーがちょうどダウンロードして任意の依存関係をインストールせずに実行することができます.
    いつものように.all the code for the episode is here .
    [matlab,#9]structフィールドを削除し、共通インデックスを出力
    Android Appデバッグメモリ漏洩のCursor編