Geekly Articles each Day

JSでSamsung SmartTVのゲームを作成しています

みなさんこんにちは。 Samsung SmartTVの開発を担当しています。 Habrにはこのテーマに関する記事がほとんどないため、修正することにしました。 ジェスチャを認識して「スマートテレビ」でピンポンを作成する方法の段階的な指示に興味がある人は、猫を歓迎します。

ツールボックスの準備


デバッグ

一般に、デバッグプロセスはsamsungdforum.comでかなり正確に説明されています 。
（ガイド->トピック->はじめに->テレビでのアプリケーションのテスト）簡単に言うと、エミュレータでボタンを1つクリックするだけでIDEで起動し、テレビで実行するにはパッケージを作成する必要があり、それをWebサーバーにアップロードします（すべてがIDE）およびアプリケーションをSmartTVと同期します（リモコンのいくつかのキーストローク）。

開発


Index.htmlファイル

次のコンテンツをindex.htmlプロジェクトに追加します。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>PongTv</title> </head> <body style="margin:0px;padding:0px;"> <script type="text/javascript" src="crafty.js"></script> <script type="text/javascript" src="pong.js"></script> </body> </html>

コメントする特別なものはありません。ここではすべてが明確です。
したがって、さらに2つのファイルを追加する必要があります。CraftyJSライブラリ自体とゲームコードです。
ゲームコードpong.js

 if (window.curWidget) { curWidget.setPreference('ready', 'true'); } var wdth = 960; var hght = 540; var margin = 20; var back_color = 'rgb(0,0,0)'; var act_color = 'rgb(255,255,255)'; var ppdl_w = 20; var ppdl_h = 100; var ball_s = 10; Crafty.init(wdth, hght); Crafty.background(back_color); //Paddles Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse") .color(act_color) .attr({ x:margin, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h }) .multiway(4, { W:-90, S:90, REMOTE_UP:-90, REMOTE_DOWN:90 }); Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse") .color(act_color) .attr({ x:wdth-margin-ppdl_w, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h }) .multiway(4, { UP_ARROW:-90, DOWN_ARROW:90}) .bind('MouseMove', function (e) { this.y = ey-ppdl_h/2; }); //Ball Crafty.e("2D, DOM, Color, Collision") .color(act_color) .attr({ x:wdth/2, y:hght/2, w:ball_s, h:ball_s, dX:Crafty.math.randomInt(2, 5), dY:Crafty.math.randomInt(2, 5) }) .bind('EnterFrame', function () { //hit floor or roof if (this.y <= 0 || this.y >= hght) this.dY *= -1; if (this.x > wdth-margin) { this.x = wdth/2; Crafty("LeftPoints").each(function () { this.text(++this.points + " Points") }); } if (this.x < margin) { this.x = wdth/2; Crafty("RightPoints").each(function () { this.text(++this.points + " Points") }); } this.x += this.dX; this.y += this.dY; }) .onHit('Paddle', function () { this.dX *= -1; }); //Score boards Crafty.e("LeftPoints, DOM, 2D, Text") .attr({ x:margin, y:margin, w:100, h:20, points:0 }) .textColor('#FFFFFF') .text("0 Points"); Crafty.e("RightPoints, DOM, 2D, Text") .attr({ x:wdth -100, y:margin, w:100, h:20, points:0 }) .textColor('#FFFFFF') .text("0 Points");

コードの最初の数行は、アプリケーションの準備ができており、画面に表示できることをテレビに伝えます。
Craftyのさらに非常に標準的なコードはそれ自体です。 あなたはすぐに質問をすることができます：「さて、ジェスチャーはどこにありますか？」 答えは次のとおりです。SamsungSmartTVのジェスチャーは、通常のマウスにすぎません。 したがって、コードがブラウザーのマウスに反応すると、テレビはジェスチャーをキャッチします（つまり、カーソルを手で制御し、ジェスチャーでクリックします）
打ち上げ

エミュレーターですべてを開始しますが、何も機能しません。 なんで？ 簡単です。CraftyJSはリモートを認識していません。
CraftyJSコードでキーボードコードの配列（「キー：{」）を見つけ、以下を追加します。
 ... 'REMOTE_UP': 29460, 'REMOTE_DOWN':29461,

CraftyJSの作成者にプルリクエストを送信し、それを受け入れたので、これがあなたのバージョンのCraftyJSに既に存在する可能性があります。

変更し、エミュレータで実行しても、何も機能しません。 ここでも、すべてが簡単です。私のバージョンのエミュレーターはマウスをサポートしておらず、キーについては特別なJSブロックを待機します。これは実際のテレビで動作するのに必要ないため、省略しました。 一般に、IDEを作成するデフォルトのプロジェクトで確認できます。
テストでは、ゲームはChromeで実行できます。すべてがそこで動作する場合、テレビで開始されます。
テレビにアプリケーションをインストールし、ビールと友人を連れて、ジェスチャーを使用して巨大な画面でカジュアルなピンポンに切り込みます。 美人
おわりに

ご想像のとおり、私はサムスンで働いており、現在韓国にいます。 私がここに来た方法に興味がある人は、コメントを書いてください-別の投稿を準備します。
これは私の最初の投稿なので、建設的な批判は歓迎します。


Source: https://habr.com/ru/post/J155007/

More articles:


All Articles