前提・実現したいこと
HTMLを用いたパチンコゲームで、y軸に伸びた描画を適切な長さに直したい。
発生している問題・エラーメッセージ
線を描画した際、x軸方向(横)と比べy軸方向(縦)に伸びてしまう。 また、表示したいゲーム画面に対して見切れてしまう。
該当のソースコード
<style> #canvas { width:500px; height:600px; touch-action: none; } </style> <script src="Tiny2D.js"></script> <script> "use strict"; var ctx,engine,timer,offset = 0,catcher,score = 0,isMouseDown = false; var walls = [ [-100, -100, 100, 800], [-100, -100, 800, 100], [500, -100, 100, 800] ]; var lines = [ [150, -50, -50, 150], [350, -50, 550, 150], [450, 200, 450, 800] ]; function init(){ //エンジン初期化&イベントハンドラ設定 engine = new Engine(-100, -100, 700, 800, 0, 9.8); var canvas = document.getElementById("canvas"); canvas.onmousedown = mymousedown; canvas.onmouseup = mymouseup; canvas.addEventListener('touchstart',mymousedown); canvas.addEventListener('touchend',mymouseup); canvas.oncontextmenu = function (e) { e.preventDefault(); }; //壁 walls.forEach(function (w) { r = new RectangleEntity(w[0],w[1],w[2],w[3]); r.color = "gray"; engine.entities.push(r); }); lines.forEach(function (w){ r = new LineEntity(w[0],w[1],w[2],w[3], 0.8); r.color = "gray"; engine.entities.push(r); }); //釘 for (var i = 0;i < 9;i++){ for(var j = 0;j < 8 + i % 2;j++){ var x = (j * 50 + 50) - 25 * (i % 2); var r = new CircleEntity(x, i * 50 + 100, 5, BodyStatic, 1); r.color = "blue"; engine.entities.push(r); } } catcher = new RectangleEntity(0, 550, 150, 25); catcher.color = "gold"; catcher.sign = 1; engine.entities.push(catcher); //Canvas、Timer等の初期化 ctx = canvas.getContext("2d"); ctx.font = "20pt Arial"; ctx.strokeStyle = "blue"; timer = setInterval(tick,50); } function tick(){ if (isMouseDown){ offset = Math.min(offset + 5,200); } catcher.sing *= (catcher.x > 300 || catcher.x < 0) ? -1 : 1; catcher.x = catcher.x + 5 * catcher.sign; engine.step(0.01);//物理エンジンの時刻を進める repaint(); //再描画 } function mymousedown(e){ isMouseDown = true; } function mymouseup(e){ isMouseDown = false; var r = new CircleEntity(475, 400, 10, BodyDynamic); r.color = "yellow"; r.velocity.y = -offset / 5; r.onhit = function (me,peer){ if (peer == catcher){ engine.entities = engine.entities.filter(function(e){ return e != me; }); score++; } } offset = 0; engine.entities.push(r); } function repaint(){ //背景クリア ctx.fillStyle = "#006600"; ctx.fillRect(0, 0, 500, 600); //ボール、壁の描画 for(var i = 0;i < engine.entities.length;i++){ var e = engine.entities[i]; ctx.fillStyle = e.color; switch (e.shape) { case ShapeCircle: ctx.beginPath(); ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); break; case ShapeRectangle: ctx.fillRect(e.x, e.y, e.w, e.h); break; case ShapeLine: ctx.beginPath(); ctx.moveTo(e.x0, e.y0); ctx.lineTo(e.x1, e.y1); ctx.stroke(); break; } } ctx.fillText("score:" + score, 200, 30); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(475, 390 + offset, 10, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.fillStyle = "gray"; ctx.fillRect(455, 400 + offset, 40, 200); } </script>
試したこと
canvasのhightを600以上に増やしても描画全体が伸び、見切れたままであった。
描画したい線や短形のy座標を0に近づけてみたが、見切れたままであった。
補足情報(FW/ツールのバージョンなど)
Tiny2D.jsは物理エンジンです。
こちらを参考にしています。
回答1件
あなたの回答
tips
プレビュー