Geekly Articles each Day

JavaScriptでNokiaのBounceゲームの仕組みを開発する

ハブ用に長い間書かれていませんでしたが、今日は誰かが同様のことをしたいので質問がある場合に備えて、バウンスゲームの最も単純なレベルの仕組みを整理する方法を推測したいと思います。 特別なイントロは必要ないと思うので、始めましょう！

画像

順番に始めましょう。 不要なものをすべてペイントするのではなく、特定の瞬間にコメントするコードを単純に調べます。

1つ目は、メインの実行可能ファイルであるindex.htmlです。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,user-scalable=no"/> <title>Bounce</title> </head> <body> <script type="text/javascript" src="point.js"></script> <script type="text/javascript" src="init.js"></script> <script type="text/javascript" src="menu.js"></script> <script type="text/javascript" src="game.js"></script> <script type="text/javascript"> game.startLoop('menu'); </script> </body> </html>

→ githubで見る

ここでは、すべてが明確だと思います。ページフレームを作成し、いくつかのJavaScriptファイルを接続しました。


init.jsファイルを検討してください。

 //   ,   pjs   var pjs = new PointJS('2D', 400, 400, { backgroundColor : '#C9D6FF' }); //    pjs.system.initFullPage(); //         var log = pjs.system.log; //   var game = pjs.game; //       var point = pjs.vector.point; //   var camera = pjs.camera; /    var brush = pjs.brush; /      var OOP = pjs.OOP; /      var math = pjs.math; /    //     var key = pjs.keyControl.initKeyControl(); var mouse = pjs.mouseControl.initMouseControl(); //        var score = 0; var record = 0;

→ githubで見る

これでコードが判明しましたが、これで十分です。

ここで、ゲームのメニューを作成する必要があります。「メニュー」サイクルからゲームを開始するため、これに必要なものはすべて、接続したmenu.jsファイルにあります。対応するゲームサイクルを開始するだけです。同じmenu.jsファイル、次を追加するだけです：

 game.newLoopFromClassObject('menu', new Menu(pjs, { name : 'Bounce', //   ( ) author : 'SkanerSoft', //   radius : 15, //     items : { //  , : loopName :   game : ' ', //     game about : ' ', //     about } }));

→ githubでmenu.jsファイル全体を見る

実行すると、起動されたメニューが表示されます。

画像

今最も難しいのはゲームプレイです。 ここではすべてが非常に単純ですが、完全ではありません。 コードをブロックに分割します。

最初に行う必要があるのは、ゲームループの宣言です。 独自のスコープを持つ独立したオブジェクトとして使用し、グローバルにする必要がないため（ゲームの状態データは他のゲームサイクルでは表示されません）、単純な構造を使用します。

 game.newLoopFromConstructor('game', function () { /*your code*/ });

ここで、ゲームループの名前とコンストラクターを設定できます。

それでは、コンストラクターの内部に移動して、内部のレベルのロジック（メカニクス）を記述しましょう。 現在、必要なループイベントは、updateのみです。 私たちは彼と一緒に仕事をします。

 game.newLoopFromConstructor('game', function () { //      var map = { width : 50, //   height : 50, //   source : [ //    ( ) '', '', ' 0-', ' | P 0000', // P -   ' 00000 000 00000', ' 0 0| |0 |', '0000000 000000W00 000000000000', ' 000 0W00 0 ', ' 0W0 0 ', ' 0W | 0 ', ' 000000 ', ] }; //   () var plStartPosition = false; var walls = []; //   (,    ) var cells = []; //  (,   ) var waters = []; //    (    ),    // OOP.forArr -     OOP.forArr(map.source, function (string, Y) { //     (Y -     ) OOP.forArr(string, function (symbol, X) { //      (X -     ) if (!symbol || symbol == ' ') return; //      -    //    if (symbol == 'P') { //   //   plStartPosition = point(map.width*X, map.height*Y); //    ,    } else if (symbol == 'W') { //  waters.push(game.newRectObject({ //   w : map.width, h : map.height, //   x : map.width*X, y : map.height*Y, //  fillColor : '#084379', //  alpha : 0.5 //  })); } else if (symbol == '|') { //  () cells.push(game.newRectObject({ w : map.width/2, h : map.height, x : map.width*X, y : map.height*Y, fillColor : '#FFF953', userData : { active : true //  ,     -   } })); } else if (symbol == '-') { //   cells.push(game.newRectObject({ w : map.width, h : map.height/2, x : map.width*X, y : map.height*Y, fillColor : '#FFF953', userData : { active : true } })); } else if (symbol == '0') { //   walls.push(game.newRectObject({ w : map.width, h : map.height, x : map.width*X, y : map.height*Y, fillColor : '#B64141' })); } }); }); //      //    , ,   //  ,      var player = game.newCircleObject({ radius : 20, fillColor : '#FF9191', position : plStartPosition ? plStartPosition : point(0, 0) }); player.gr = 0.5; //   player.speed = point(0, 0); //    //          this.update = function () { game.clear(); //    player.draw(); //   player.speed.y += player.gr; //   //   , ,   if (key.isDown('RIGHT')) player.speed.x = 2; else if (key.isDown('LEFT')) player.speed.x = -2; else player.speed.x = 0; //       OOP.drawArr(walls, function (wall) { if (wall.isInCameraStatic()) { //      ( ) // wall.drawStaticBox(); if (wall.isStaticIntersect(player)) { //      //       (    ) //   Y if (player.x+player.w > wall.x+wall.w/4 && player.x < wall.x+wall.w-wall.w/4) { if (player.speed.y > 0 && player.y+player.h < wall.y+wall.h/2) { //     if (key.isDown('UP')) //        "" player.speed.y = -10; //     else { //   ""    player.y = wall.y - player.h; player.speed.y *= -0.3; if (player.speed.y > -0.3) player.speed.y = 0; //      } } else if (player.speed.y < 0 && player.y > wall.y+wall.h/2) { //     player.y = wall.y+wall.h; //  ( ) player.speed.y *= -0.1; //   } } //     ,     X if (player.y+player.h > wall.y+wall.h/4 && player.y < wall.y+wall.h-wall.h/4) { if (player.speed.x > 0 && player.x+player.w < wall.x+wall.w/2) { //    player.x = wall.x-player.w; //   player.speed.x = 0; //    } if (player.speed.x < 0 && player.x > wall.x+wall.w/2) { //    player.x = wall.w+wall.x; //   player.speed.x = 0; //    } } } } }); //      () OOP.drawArr(cells, function (cell) { if (cell.active) { //    if (cell.isStaticIntersect(player)) { //   cell.active = false; //   cell.fillColor = '#9A9A9A'; //     score++; //   } } }); //    ,    //    var onWater = false; //     OOP.drawArr(waters, function (water) { //       ,    if (onWater) return; //      //     () //     //   ,     //   ,      //       if (water.isStaticIntersect(player) && player.y+player.h/2 > water.y) { player.speed.y -= 0.9; //    onWater = true; } }); //     if (player.speed.y) { player.y += player.speed.y; } if (player.speed.x) { player.x += player.speed.x; } //   brush.drawTextS({ //   text : 'Score: '+score, //    size : 30, //   color : '#FFFFFF', //   strokeColor : '#002C5D', //    strokeWidth : 1, //   x : 10, y : 10, //  style : 'bold' //   }); camera.follow(player, 50); //      }; });

→ githubでファイルを見る

さて、実行してゲームに入ると、次のように表示されます。

画像

したがって、ゲームの単純なメカニズムを構築し、新しい要素を追加することはそれほど難しくなく、処理に合わせるのも同様です。

物理アルゴリズム自体を変更したり、係数を変更したりして、衝突フィールドを狭めたり広げたりすることができます。 また、キャラクターの速度を基本として、動的にすることもできます。

→ githubでBounceプロジェクトのソースコードを表示する
→ 実例を実行する

20分のゲームの物理アルゴリズムを開発するビデオ
ゲーム物理学



新しいオブジェクトを使用したゲームの追加：


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

More articles:


All Articles