JavaScript 2Dサンドボックスをゼロから開発する

どういうわけか私の計画のために、基本的な機能を備えた2D空間に小さなサンドボックスを作成する必要がありました。

1.ゲームの世界を旅する
2.動いている物理学、衝突
3.ブロックの作成
4.ブロックの削除

グラフィックの実行は気になりませんでしたので、グレーの色調ですべてを整理することにしました。次のようになります。

準備する

このプロジェクトはデモンストレーションに必要であり、プラットフォームの下でJavaScriptをシャープにする必要はなかったため、作業にはJavaScriptが使用され、結果をすばやく確認することができました。
レンダラーとして、PointJSを使用します。

たくさん書くことは意図されていなかったので、すべてのサンドボックスコードを1つのファイルに入れました。
これを行うために、 game.jsファイルを作成しました。記事に表示されるすべてのソースコードはこのファイル内にあり、順番に表示されます。 最終版と、記事の最後のライブローンチ。

最初に必要なのは、エンジンを初期化し、必要なメソッドを変数に入れてすばやくアクセスできるようにすることです。

var pjs = new PointJS(640, 480, { // ,  backgroundColor : '#4b4843' //   }); pjs.system.initFullPage(); //   (      ) 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 width = game.getWH().w; //   var height = game.getWH().h; //      var BW = 40, BH = 40; //  ,     pjs.system.initFPSCheck(); //   fps 

初期化後、ゲームワールドが存在する単一のゲームサイクルを作成する必要があります。

 game.newLoopFromConstructor('myGame', function () { // game loop }); 

このコンストラクター内で、必要な更新メソッドを定義する必要があります。

 game.newLoopFromConstructor('myGame', function () { // init this.update = function () { // game loop } }); 

// initが指定されている場合、ゲームワールドを内部変数に配置する必要があります。

  var pPos; //       var world = []; //   ,   //   ,     //     ,   //   0  P,   - ,  -   //       , // ,  ,   ,   //   . pjs.levels.forStringArray({w : BW, h : BH, source : [ '0000000000000000000000000000', '0000000000000000000000000000', '0000000000000000000000000000', '0000000000000000000000000000', '000000 00000000000000', '000 00000000000000', '000 P 000000000000000000', '000 000000000000000000', '0000000000000000000000000000', '0000000000000000000000000000' ]}, function (S, X, Y, W, H) { if (S === '0') { //      world.push(game.newRectObject({ //     x : X, y : Y, //     w : W, h : H, //    -  fillColor : '#bcbcbc' //   })); } else if (S === 'P') { //       P pPos = point(X, Y); //        } }); //     ,    var pl = game.newRectObject({ x : pPos.x, y : pPos.y, //      w : 30, h : 50, //    fillColor : 'white' //  }); var speed = point(); //        Y 

そして最も重要なのは、ゲームサイクルの仕組みと、ゲームの世界に命を吹き込むすべてのことです。

 this.update = function () { //   ,  , ,  if (key.isDown('A')) speed.x = -2; else if (key.isDown('D')) speed.x = 2; else speed.x = 0; //     ,    //     Y,   W,   -7 ( ) if (speed.x < 5) speed.y += 0.5; //    ,   if (key.isPress('W')) speed.y = -7; //    pl.draw(); //    var collisionBlocks = []; //   var drawBlocks = []; //    var selBlocks = []; //    //      var R = mouse.isPress('RIGHT'); //   var L = mouse.isPress('LEFT'); //   var MP = mouse.getPosition(); //   //    //          var createPos = point(BW * Math.floor(MP.x / BW), BH * Math.floor(MP.y / BH)); //       OOP.forArr(world, function (w, idW) { //     if (w.isInCameraStatic()) { //      drawBlocks.push(w); //       //       if (pl.getDistanceC(w.getPositionC()) < 80) { //  ,      if (mouse.isInStatic(w.getStaticBox())) { selBlocks.push(w); //  ,        if (L) { //    ,  world.splice(idW, 1); //     } } } } }); //     ,   (   ) OOP.forArr(drawBlocks, function (d) { //          d.setAlpha(1 - pl.getDistanceC(d.getPositionC()) / 250); // , ,    -     //  ,   d.draw(); //      ,      //   if (pl.getDistanceC(d.getPositionC()) < 100) { collisionBlocks.push(d); } }); //      OOP.forArr(selBlocks, function (s) { brush.drawRect({ //      x : sx, y : sy, w : sw, h : sh, strokeColor : '#ac5a5a', //   strokeWidth : 2 //  2  }); }); //      var canCreate = false; var dist = pl.getDistanceC(MP); //      if (!selBlocks.length && dist > 50 && dist < 100) { //     canCreate = true; //     brush.drawRect({ //    ,   x : createPos.x, y : createPos.y, //    w : BW, h : BH, strokeColor : '#69ac5a', //  strokeWidth : 2 }); } //         if (L && canCreate) { world.push(game.newRectObject({ //    x : createPos.x, y : createPos.y, w : BW, h : BH, fillColor : '#e2e2e2' })); } //   ,   ,   //    pl ()   speed,    //    collisionBlocks pjs.vector.moveCollision(pl, collisionBlocks, speed); //       camera.follow(pl, 10); //   fps brush.drawTextS({ text : pjs.system.getFPS(), color : 'white', size : 50 }); }; 

これは、ゲームに必要なすべてのコードです。

結果： ブラウザーで
ソース： GitHubで

より快適で、ビデオチュートリアルをはっきりと見ている人のために、ビデオオプションがあります。