HTML5,JavaScriptのアプリについて
- HTML5, JavaScriptを使用してスマホのアプリを作成しています。最優先で実装したいのは、パズル完成後の「CLEAR」の表示と、完成までの時間の表示です。
- また、画面の中央にパズルが表示されるようにしたいです。スマホとタブレットの画面サイズに対応するために、ディバイスごとに適切な大きさに調整したいです。
- 現在は用意した画像を読み込んでいますが、自分で撮った写真なども読み込ませたいです。初心者なので、分かりやすく教えていただけると助かります。
- ベストアンサー
HTML5,JavaScriptのアプリについて
現在Monacaでスマホのアプリを作っております 3×3のパズルを作ったのですがわからない点があるので教えてください コードは <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <style> *{ margin:0; padding:0; position: absolute;} #title { background-color: blue; color: white; padding:3px; font-size:14px; width:320px; height:14px; } #game_canvas { top:20px; width:320px; height:320px; } </style> </head> <body> <div id="title">8puzzle</div> <canvas id="game_canvas" width="320" height="320"></canvas> <script> //設定 var main_image = "img/photo.png"; var panels = []; var cell_w = 320 / 3; //横に4分割 var cell_h = 320 / 3; //縦に4分割 var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; //上下左右の座標 //Canvasのコンテキストを取得 var canvas = document.getElementById("game_canvas"); var con = canvas.getContext("2d") //画像の読み込み var image = new Image(); image.src = main_image; image.onload = function() { con.drawImage(image,0,0); setTimeout(shufflePanel,3000); } //パネルのシャッフル function shufflePanel() { //パネルを初期化 for (var i = 0; i < 9; i++) { panels[i] = i; } //シャッフル for (var j = 0; j < 9 ; j++) { var r = Math.floor(Math.random() * 9); var tmp = panels[r]; panels[r] = panels[j]; panels[j] = tmp; } drawPanels(); } //パネルを番号に応じて描画 function drawPanels() { for (var i = 0; i < 9; i++){ var no = panels[i]; var pcol = no % 3; var prow = Math.floor(no / 3); var px = pcol * cell_w; var py = prow * cell_h; var tx = (i % 3) * cell_w; var ty = Math.floor(i / 3) * cell_h; if (no == 8) { //穴の表示 con.beginPath(); con.fillStyle = "#CCCCCC"; con.fillRect(tx, ty, cell_w, cell_h); } else { //画像を切り取って表示 con.drawImage(image, px, py, cell_w, cell_h, tx, ty, cell_w, cell_h); } //枠を描画 con.beginPath(); con.moveTo(tx + cell_w, ty); con.lineTo(tx, ty); con.lineTo(tx, ty + cell_h); con.strokeStyle = "#999999"; con.stroke(); } } //ユーザーのtouchイベントに反応する canvas.ontouchstart = function(e) { //for iPhone if (e.touches.length > 0){ var t = e.touches[0]; checkPanelXY(t.clientX, t.clientY); } e.preventDefault(); }; canvas.onmousedown = function(e) { //for PC checkPanelXY(e.clientX, e.clientY); }; function checkPanelXY(sx, sy) { //タップされたパネルを取得する var col = Math.floor(sx / cell_w); var row = Math.floor((sy-20) / cell_h); var no = row * 3 + col; //穴の上なら何もしない if (panels[no] == 8) { return } //穴に接リンしているか確認 for (var i = 0; i < pos_array.length; i++) { var row2 = pos_array[i][0] + row; var col2 = pos_array[i][1] + col; var check = getPanelNo(row2, col2); if (check == 8) { swapPanel(row, col, row2, col2); } } }; //行(row)と列(col)からパネル番号を返す function getPanelNo(row, col) { //範囲外なら-1を返す if (col < 0 || row < 0 || col >= 3 || row >= 3){ return -1; } return panels[row * 3 + col]; } //パネルを入れ替える function swapPanel(row1, col1, row2, col2) { var index1 = row1 * 3 + col1; var index2 = row2 * 3 + col2; var tmp = panels[index1]; panels[index1] = panels[index2]; panels[index2] = tmp; drawPanels(); } </script> </body> </html> です 動くことは動くのですが私の知識だとまだ理想には程遠いです、、、 理想としては 1.パズル完成後「ＣＬＥＡＲ」の表示（ダイアログで表示したいです） 2.完成までかかった時間の表示 3.パズルの画面が中央に来てほしい 4.タブレットで使用したときに画面が小さいのでディバイスごとに適した大きさにしたい 5.今は用意した画像を読み込ませていますが自分で撮った写真などを読み込ませたい 説明がへたくそで申し訳ございません 最優先としては3,4の実装です 3,4を詳しく書くと スマホ、タブレットともに画面の中央に大きく表示ということです 始めたばかりの初心者なのでなるべく噛み砕いて教えていただけると嬉しいです
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CSSにコレを足す記述を忘れてしまったせいかもしれません。 html, body{ width:100%; } 先の回答では省略してしまいましたが、CSSは下記のように記述して下さい。 #game_canvas { top:20px; }
その他の回答 (2)
- ONEONE
- ベストアンサー率48% (279/575)
1. getPanelNo関数をつかってすべてのセルのパネル番号が正しければ完了判定するメソッドを作ればよいでしょう。 2. ストップウォッチを実装すればよいと思います。 http://alphasis.info/2013/06/javascript-gyakubiki-stopwatch/ パズル開始時にstopwatchStart() 終了時にstopwatchStop()が 実行されるようにすればよいでしょう。 3. 幅100%でよいのなら ■CSSの変更 #title width:100%; #game_canvas top:20px; ■HTMLの変更 widthとheight属性削除 <canvas id="game_canvas"></canvas> ■JSの追加 設定とcanvasのコンテキストを取得部分を下記のように変更 //設定 var device_w = document.body.clientWidth; var main_image = "img/photo.png"; var panels = []; var cell_w = device_w / 3; //横に4分割 var cell_h = device_w / 3; //縦に4分割 var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; //上下左右の座標 //Canvasのコンテキストを取得 var canvas = document.getElementById("game_canvas"); canvas.width = device_w; canvas.height = device_w; var con = canvas.getContext("2d") 5. このあたりを参考に http://javascript.go-th.net/%E3%80%90graphics%E3%80%91canvas/canvas%E7%94%BB%E5%83%8F%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E3%80%82 画像の拡大縮小機能もひつようそうですね。
補足
3なのですが 書いていただいた通りやりました すると画像は表示されずtitleのバックカラーもおかしくなったのですがどうすれば。。。 コード載せます。。。 CSS #title { background-color: blue; color: white; padding:3px; font-size:14px; width:100%; height:14px; } #game_canvas top:20px; JS //設定 var device_w = document.body.clientWidth; var main_image = "img/hagaren.png"; var panels = []; var cell_w = device_w / 3; //横に3分割 var cell_h = device_w / 3; //縦に3分割 var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; //上下左右の座標 //Canvasのコンテキストを取得 var canvas = document.getElementById("game_canvas"); canvas.width = device_w; canvas.height = device_w; var con = canvas.getContext("2d");
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>3.パズルの画面が中央に来てほしい >4.タブレットで使用したときに画面が小さいのでディバイスごとに適した大きさにしたい JavaScript で画面のサイズを入手して、 Canvas そのものの、位置をCSSで移動してしまうabsoluteとか http://www.tagindex.com/html5/page/meta_viewport.html この辺参考になるかと思います。
補足
サイトを見て <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=no"> としたのですがやはりタブレットでは小さいしスマホで見ても若干のずれがあります。。。 どうすればいいのでしょうか？
関連するQ&A
- javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 'hair1.png', 'hair2.png', 'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>
- ベストアンサー
- JavaScript
- JavaScriptについて
本を読みながら勉強しているのですが解説が乗っていなくてわからない部分があるので教えてください <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //ランダムに５０個多角形の表示 for (var i = 0; i < 50; i++) { randomDraw(); } //指定範囲のランダムな整数を返す関数 function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; } //ランダムに多角形を描画する関数 function randomDraw() { //パス指定 ctx.beginPath(); //点をランダムに決定 var n = randomI(2,7); ctx.moveTo(randomI(0,canvas.width),randomI(0,canvas.hright)); for (var i = 0; i < n; i++) { ctx.lineTo(randomI(0,canvas.width),randomI(0,canvas.height)); } ctx.closePath(); //描画 ctx.fillStyle = "#" + randomI(0,0xFFFFFF).toString(16); ctx.fill(); } </script> </body> </html> というコードでランダムに50個多角形を描画するというものです function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; ここのrandomIとnToとnFromというのは変数名ですか？これはいったい何者ですか？ var n = randomI(2,7); ここの数字を変更すると何かが変わるのですがうまく言葉にできません 何がどう変わるのか教えてください
- ベストアンサー
- JavaScript
- Javascript初心者です助言おねがいします。
オセロを作成しています。 盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。 Javascript // ボードの上に a から h までの文字を表示する const letters = document.createElement("div"); letters.classList.add("letters"); for (let i = 0; i < 8; i++) { const letter = document.createElement("div"); letter.classList.add("letter"); letter.textContent = String.fromCharCode(97 + i); letters.appendChild(letter); } // ボードの左に 1 から 8 までの数字を表示する const numbers = document.createElement("div"); numbers.classList.add("numbers"); for (let i = 1; i <= 8; i++) { const number = document.createElement("div"); number.classList.add("number"); number.textContent = i; numbers.appendChild(number); } board.appendChild(numbers); // 盤面を作成 for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); board.appendChild(cell); cells[`${row}-${col}`] = cell; } board.appendChild(letters); } css .letters { display: flex; justify-content: space-between; margin-bottom: 8px; } .letter { width: 12.5%; text-align: center; } .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } .number { height: 12.5%; text-align: center; }
- ベストアンサー
- JavaScript
- JavaScript/HTML5での図形の描写
canvasを使って図形の描写をするコードを書いています。 javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。 「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。 【以下書いたコード】 function draw() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var r = parseInt(document.getElementById("radius").value); ctx.beginPath(); var drawPointX = Math.floor( Math.random() * 1200 ) + 1; var drawPointY = Math.floor( Math.random() * 600 ) + 1; ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true ); //ランダムな色を生成・彩色する var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle=rgba; ctx.stroke(); }
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- javascript マウスイベント
動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。 canvas.toDataURL();でデータを6bit毎に分割できています。 それを保存して、 var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。 その後canvasに描画できません。 よろしくお願いします。 var canvas = document.getElementById("myCanvas"); $("#save_button").click(function () { // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas.toDataURL(); // LocalStorageに保存する window.localStorage.setItem("saveKey", base64); }); $("#load_button").click(function () { // LocalStroageからデータを取得する var base64 = window.localStorage.getItem("saveKey"); // Imageオブジェクトを作成し、src属性にデータを設定する var image = new Image(); image.src = base64; image.onload = function(){ // 画像の読み込みが終わったら、Canvasに画像を反映する。 canvas.drawImage(image, 0, 0); } });
- ベストアンサー
- JavaScript
- javascriptでの画像の先読みについて（その２）
その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- ベストアンサー
- JavaScript
- javascriptのタイプミス
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; // pointオブジェクト 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.length ; 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; //下 default: paint(); return; } //自分or壁に衝突 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>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
canvasタグの画像の描画で困っています。 Imageオブジェクトを生成して、画像ファイルを先読みしておいて var aaa = new Image(); aaa.src = "img/item00.png"; var bbb = new Image(); bbb.src = "img/item01.png"; 配列に入れる var i = [aaa,bbb] 描画コンテキストの取得s取得して、画像を表示させる var canvas = document.getElementById('sample'); if (canvas.getContext) { var context = canvas.getContext('2d'); 座標(10, 10)(50, 50)の位置にイメージを表示 context.drawImage(aaa, 10, 10); context.drawImage(bbb, 50, 50); } としています。このあとクリックなどのきっかけで、画像の絵を入れ替えたいと思い、 var cha1 = i[0].src; var cha2 = i[1].src; i[0].src = cha2; i[1].src = cha1; もう一度描画させているのですが、うまくいきません。 cha1,cha2が取得できているかチェックすると、undifineとでます。 これでは、入れ替えることがでないのでしょうか？ 入れ替えるとしたらどのような方法があるのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
補足
ありがとうございます！ WEB上では中心に表示できたのですがスマホで起動させると 前と変わりません＞＜ そして con.drawImage(image, px, py, cell_w, cell_h, tx, ty, cell_w, cell_h); にエラーが出ます 見直したのですがエラーの部分ってどこがおかしいのでしょうか？ errorメッセージは Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 です