キャンバスのクローン化/一般化の方法

私はJavaScriptのゲームの割り当てに取り組んでいます。ちょうどキャンバスで少し試してみました。私の仕事は、レーザー源、鏡、ゴールオブジェクトを使ったレーザーゲームです。キャンバスのクローン化/一般化の方法

私はちょうど醜いハードコーディング例作った：あなたが示唆しているどのような解決策なので、私はこのような長方形でN * Nのテーブルを行うことができます。私の質問がある

'use strict'; 

function $(id) { 
    return document.getElementById(id); 
} 

function draw() { 
    let canvas = $('canvas'); 
    if(canvas.getContext) { 
     let ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 5; 
     ctx.strokeStyle = 'hsla(265, 18%, 26%, 0,80)'; 

     ctx.beginPath(); 
     ctx.moveTo(10,10); 
     ctx.lineTo(10,60); 
     ctx.moveTo(10,65); 
     ctx.lineTo(10,115); 
     ctx.moveTo(10,115); 
     ctx.lineTo(60,115); 
     ctx.moveTo(65,115); 
     ctx.lineTo(115,115); 
     ctx.moveTo(115,115); 
     ctx.lineTo(115,65); 
     ctx.moveTo(115,60); 
     ctx.lineTo(115,10); 
     ctx.moveTo(115,10); 
     ctx.lineTo(65,10); 
     ctx.moveTo(60,10); 
     ctx.lineTo(10,10);   
     ctx.stroke(); 
    } 
} 

draw();

https://jsfiddle.net/h9664oz4/

を（私はギャップが必要なので、lazerはそれらを通過するだろう）。

私は長方形の内側の要素をドロップする必要がありますが、私はありません真ん中に、レーザーパスのために2つのギャップ各側面を持っていると思います。これは説明のためだけのものです。

明確になるように、私は準備ができた解決策を望んでいません。、私は学びたいと思います。ただ移動する場所をいくつか指導したいだけです。代わりにSVGを掘り下げることを提案しますか？これらの2Dゲームには、いくつかのJSパターンの規則がありますか？より洗練されたコードアーキテクチャにクラスを使用することをお勧めしますか？

私はこれをすべて初心者です。

出典

2017-03-26 MattSom

まあ、私が見て、私は一人でここで少しschizophreniacするつもりです。とにかくここに私の進歩が記録されます。私の計画は、コンテナhtmlパターンを作成し、それらのジェネレータ関数を作成することです。 – MattSom

以下は、SVGパス要素である「長方形」を使用したSVGの例です。複製されるパスを作成し、それをSVGのdefs要素に配置します。

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Cloned Paths</title> 
 
</head> 
 

 
<body onload=clonePaths()> 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400"> 
 
<defs id=myDefs /> 
 
</svg> 
 
</div> 
 
<script> 
 
var NS="http://www.w3.org/2000/svg" 
 
//---onload--- 
 
function clonePaths() 
 
{ 
 
    //---create path for cloning--- 
 
    var myPath=document.createElementNS(NS,"path") 
 
    myPath.id="pathClone" 
 
    myPath.setAttribute("stroke-width",2) 
 
    myPath.setAttribute("stroke","black") 
 
    myPath.setAttribute("fill","none") 
 
    var d="M10,10 L10,60 M10,65 L10,115 M10,115 L60,115 M65,115 L115,115 M115,115 L115,65 M115,60 L115,10 M115,10 L65,10 M60,10 L10,10" 
 
    myPath.setAttribute("d",d) 
 
    myDefs.appendChild(myPath) 
 

 
    //---add clones--- 
 
    var pathClone=document.getElementById("pathClone") 
 

 
    var path1=pathClone.cloneNode(true) 
 
    path1.setAttribute("transform","translate(40,40)") 
 
    mySVG.appendChild(path1) 
 

 
    var path2=pathClone.cloneNode(true) 
 
    path2.setAttribute("transform","translate(40,160)") 
 
    mySVG.appendChild(path2) 
 

 
    var path3=pathClone.cloneNode(true) 
 
    path3.setAttribute("transform","translate(40,280)") 
 
    mySVG.appendChild(path3) 
 

 
} 
 
</script> 
 
</body> 
 

 
</html>

出典

2017-03-26 15:34:38

ヒントに感謝しています。どんなパラメータでもより一般化し、それらを使ってテーブルを作成しようとします。 – MattSom

キャンバスのクローン化/一般化の方法

答えて

関連する問題