• 締切済み

コードの結果がブラウザには全く表示されません

動画を見て、テトリスを作成しています。以下のコードだと、テトリスが二つ出てくるはずなのですが、ブラウザには全く表示されません。コードのどこが悪いか、指摘くだされば幸いです。 <!DOCTYPE html> <html>> <body> <canvas id="can"></canvas> <script> //ブロックひとつのサイズ let BLOCK_SIZE = 30; //テトロミのサイズ let TETRO_SIZE = 4; let can = document.getElementById("can"); let con = can.getContext("2d"); con.fillStyle="red"; con.fillRect(0,0, BLOCK_SIZE ,BLOCK_SIZE ); let tetro = [ [ 0, 0, 0, 0 ], [ 1, 1, 0, 0 ], [ 0, 1, 1, 0 ], [ 0, 0, 0, 0 ] ]; for(let y=0; y<TETRO_SIZE ; y++) { for(let x=0; x<TETRO_SIZE ; x++) { if( tetoro[y][x] ) { let px = x * BLOCK_SIZE; let px = y * BLOCK_SIZE; con.fillStyle="red"; con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE); } } } </script> </body> </html>

みんなの回答

  • asciiz
  • ベストアンサー率70% (6640/9407)
回答No.1

動作するようにまでデバッグしたところ、単純なスペルミスでした。 ＞if( tetoro[y][x] ) tetro[y][x] ではないので未定義の配列を参照しちゃってます。 ＞let px = x * BLOCK_SIZE; ＞let px = y * BLOCK_SIZE; 両方ともpxに代入してるのでpyが定義されません。なのでfillRectが動作しません。 -- F12キーで開発ツールを表示するとエラー表示されてたりするんですが、結構気づきにくい部類かな…。 <script>タグの直後に "use strict"; と入れておくと、チェックが少し厳密になります。 例えば前者のエラーでは、コンソールに ＞tet.html:43 Uncaught ReferenceError: tetoro is not defined (tetoro は定義されていない) と警告してくれますし、後者では ＞Uncaught SyntaxError: Identifier 'px' has already been declared ('px' は既に定義済みである) というエラーが出るようになります。

  1. カテゴリ
  2. インターネット・Webサービス
  3. ブラウザ

関連するQ&A

  • javascriptで困ってます

    下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>

  • Javaの質問です

    <!DOCTYPE html> <meta charset = utf-8> <title>ゲーム</title> <!-- スマートフォン対応・ C55 --> <style> * {margin:0; padding:0;} html {text-align:center;} canvas{border:1px solid gray;} </style> <!-- canvasの設定 --> <canvas id="canvas" width=320 height=480> HTML5の扱えるブラウザでご覧下さい。 </canvas> <!-- JavaScriptの設定 --> <script> var canvas = document.getElementById("canvas"); var c = canvas.getContext("2d"); //変数の設定と初期化 var frame = 0; //全体のフレーム数のカウント var target = {x:250, y:100, dir:2}; //ターゲット（x位置と移動方向） var target2 = {x:150, y:150, dir:5}; var player = {x:250, y:400}; //プレイヤー（x位置） var ball = {x:-10, y:-10}; //ボール（x位置とy位置） var point = 0; var point2 = 0; var point3 = 0 //得点 var timer = setInterval(anime,50); //anime関数を50ミリ秒毎に起動 //アニメ関数 function anime(){ frame++; //アニメ関数が実行されるたびごとにframeカウントを1上げる //画面をクリア c.clearRect(0,0,320,480);//canvas上の指定された矩形のすべてのピクセルを、透明な黒にクリア //targetを描画 c.fillStyle = "black"; c.fillRect(target.x-25,target.y-5,50,10); c.fillStyle = "black"; c.fillRect(target2.x-25,target2.y-5,50,10); //得点表示 c.fillStyle = "black"; c.font = "20px sans-serif "; c.fillText(point,target.x,target.y-5); //playerを描画 c.fillStyle = "blue"; c.fillRect(player.x-25,player.y-5,50,10); //ballを描画 c.fillStyle = "red"; c.fillRect(ball.x-5,ball.y-5,10,10); //移動計算 target.x += target.dir; //targetのx座標がdir（1）増加 target2.x += target2.dir; ball.y = ball.y - 5; //ballのy座標が5減少 //壁衝突計算 if(target.x < 25 || 295 < target.x)target.dir *= -1; if(target2.x < 25 || 295 < target2.x)target2.dir *= -1; //得点ゲット if ((100 == ball.y) && (Math.abs(target.x - ball.x)<25)){ point2++; } if ((100 == ball.y) && (Math.abs(target2.x - ball.x)<25)){ point3++; } if (point2 > 0 && point3 > 0 ){ point++; } } //シュートする関数 //シュートする関数 canvas.addEventListener("mousedown",function(e){ ball.x = player.x; ball.y = player.y; }); canvas.addEventListener("mousemove",function(e){ var rect = e.target.getBoundingClientRect(); player.x = e.clientX - rect.left; // player.y = e.clientY- rect.top; }); </script> このプログラミングで下段のバーに通って上段のバーに通った時のみにポイントが追加される風にしたいのですがこの状態だと両方通った時にポイント数が上がり続けますどうすればいいでしょうか

  • Chromeで文字コード(UTF-8)の設定

    ●質問の主旨 文字コードを常時、"utf-8"に設定したいと考えています。 どのように設定すればよいでしょうか？ ご存知の方ご教示願います ●質問の補足 下記コードにて、ファイルを実行し、 "Canvasの練習"という文字列と、 青色の正方形をはさんだ黄色の正方形2つが、 表示させるつもりです。 しかし、実際に実行すると、 図形は意図通り描画されますが、文字列が文字化けします。 HTML5のコードにおいて、 <meta charset="utf-8">を <meta charset="s-jis"> に変更すると、文字化けもなくなります。 "utf-8"のコードがすでに大量に用意されているので、 PCの方の認識を"s-jis"から"utf-8"に替えるためにはどうすればよいでしょうか？ PCはWindowsVistaで、ブラウザはGoogleChromeです。 ●コード ・HTML5 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Canvasの練習</title> </head> <body> <h1>Canvasの練習</h1> <canvas id="mycanvas" width="400" height="200"> Canvasに対応したブラウザを使ってください。 </canvas> <script src="mycss.js"></script> </body> </html> ・JavaScript // myscript.js window.onload = function() { draw(); } function draw() { var canvas = document.getElementById('mycanvas'); if (!canvas || !canvas.getContext) return false; var ctx = canvas.getContext('2d'); ctx.fillStyle = "yellow"; ctx.save(); ctx.fillRect(0,0,50,50); ctx.fillStyle = "blue"; ctx.fillRect(100,0,50,50); ctx.restore(); ctx.fillRect(200,0,50,50); }

    • ベストアンサー
    • HTML
  • javascript 配列について

    HTML5のcanvasにjsで描画する場合、 下記のように複数の図形を描く場合、 配列を用いて表記するにはどのようにすればよろしいでしょうか。 なお、図形の数は決まっていない、また、x,y,width,heightに規則性はないものとします。 ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(20,10,10,10); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(30,10,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(10,20,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(40,20,10,10); … 以上、ご教授いただきたく何卒よろしくお願い致します。

  • html5canvasの文字枠のずれ

    html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'ＭＳ　Ｐ明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>

  • ２つの図を重ねて表示したい

    HTMLもJavaScriptも初心者です。 *.png の図と canvas に書いた図を重ねて表示したいのですが、canvas に書いた図が *.png に隠れて表示されません。 コーディングは次のとおりです。 <html> <title>figures</title> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <div id=lyrwall style="position:absolute; left:20px; top:20px;"> <img src=figure.png> </div> <canvas id="canvassample" width="500" height="500"> <script type="text/javascript"> onload = function() { draw(); }; function draw() { var canvas = document.getElementById('canvassample'); if ( ! canvas || ! canvas.getContext ) { return false; } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); /* 線を引く */ ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(480, 480); ctx.stroke(); } </script> </canvas> </body> </html> 直線のうち、figure.png と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ネットワークカメラのスクショを複数並べたい

    お世話になっております。 複数のネットワークカメラの動画を静止画にして並べて表示したいのですが、下記のコードをhtmlにして一つは表示できました。 <!DOCTYPE html> <html> <head> <title>NETWORKCAMERA</title> </head> <body> <table width="10%"> <tr> <td> <canvas id="canvas" width="600px" height="400px"></canvas> </td> </tr> </table> <script> let canvasStream = null; function drawCanvasFromMjpegStrmer(){ const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); setInterval(() => { if (canvas && ctx){ const chara = new Image(); chara.src = "http://192.168.11.71:5561/image"; chara.onload = () => { ctx.drawImage(chara, 0, 0, 600, 400); }; } }, 10000/60); } drawCanvasFromMjpegStrmer(); </script> </body> このソースのアドレスの部分だけ変更してコピペして並べたら複数並べられると思ったのですが、今度は一つも表示されなくなりました。 基本的なことだと思うのですがわかる方教えていただけないでしょうか。

  • 最速コードに挑戦！？

    BASICを思い出してPSETを書いてみました。 LINE文を作りたいのですが、最速になるアルゴリズムをご存知の方は いらっしゃいますか？ <html> <body> <input type="button" value="Test C.G." onClick=" for(i=0;i<3800;i+=.5){ pset(350-Math.cos(i*3.14519/90)*300,350-Math.sin(i*3.14519/85)*300,'#f00'); } "> <script> function pset(x,y,c){ var p = document.createElement('div'); with(p){ style.position='absolute'; style.top=x+'px'; style.left=y+'px'; style.color=c; appendChild(document.createTextNode('.')); } document.body.appendChild(p); } </script>

  • javascriptの打ちミスしてる所を知りたい。

    参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。 たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。 教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

  • 複数canvasを表示状態のまま一つの画像に

    先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定（しない場合は透過） ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する