- 締切済み
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> このプログラミングで下段のバーに通って上段のバーに通った時のみにポイントが追加される風にしたいのですがこの状態だと両方通った時にポイント数が上がり続けますどうすればいいでしょうか
- ykmiyabi
- お礼率0% (0/6)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
フラグを持って、下段通過時に1を立てて、上段通過時の判定にそのフラグが立っているか見ればいいんでない？
関連する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>
- 締切済み
- JavaScript
- 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); … 以上、ご教授いただきたく何卒よろしくお願い致します。
- ベストアンサー
- 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のタイプミス
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
- 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
- コードの結果がブラウザには全く表示されません
動画を見て、テトリスを作成しています。以下のコードだと、テトリスが二つ出てくるはずなのですが、ブラウザには全く表示されません。コードのどこが悪いか、指摘くだされば幸いです。 <!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>
- 締切済み
- ブラウザ
- 度々すいません、Javaについて質問なんですが
前回回答してくださった皆様、ありがとうございました。 現在、Javaで簡単なモグラ叩きゲームを作っており、リトライボタンを追加 しようと思っているのですが、なぜか上手くボタンが表示されません・・・何故で しょうか? また、マウスのクリック待ち時間(クリック制限時間)を作りたいのですが、どのようにすれば よいでしょうか? ソースは以下の通りです。(※字数制限に引っかかった、未使用のイベントなどは省略していますがご了承ください※) import java.awt.*; import java.awt.event.*; import java.util.Random; class mole_hit extends Frame implements MouseListener, ActionListener, MouseMotionListener { int mole_point; //土竜の出現データ int fore_mole_point; //土竜の前の出現データ int mole_x, mole_y; //土竜の出現座標 int mouse_x, mouse_y; //マウスの座標 int life = 10; long t = 1000; MyCanvas mc = new MyCanvas(); public static void main(String[] args) { new mole_hit(); } mole_hit() { super("土竜叩きゲーム"); //フレーム名 setSize(700, 700); //フレームサイズ setLayout(null); if (life <= 0) //ライフが0以下になったら、 { //リトライボタンを表示 Button b = new Button("RETRY"); b.addActionListener(this); b.setSize(50, 25); b.setLocation(620, 620); add(b); } mc.setSize(600, 600); //キャンバスサイズ mc.setLocation(0, 0); //キャンバス配置座標 mc.addMouseListener(this); mc.addMouseMotionListener(this); add(mc); setVisible(true); addWindowListener(new Close()); //ウィンドウクローズ } /*** ボタン等のイベント ***/ public void actionPerformed(ActionEvent e) { life = 10; mc.repaint(); } /*** マウスボタンが押されたとき ***/ public void mousePressed(MouseEvent e) { mouse_x = e.getX(); mouse_y = e.getY(); System.out.println("(" + mouse_x + "," + mouse_y + ")"); //マウス座標確認用 mc.repaint(); } /*** キャンバス ***/ public class MyCanvas extends Canvas { /*** 描画ステータス ***/ public void paint(Graphics g) { super.paint(g); int line_x, line_y; //ライン描画用変数 int hall_x, hall_y; //ホール描画 int i, j; //ループ用変数 Dimension size = getSize(); //ウインドウのサイズを取得 Sleep s = new Sleep(); //スリープ用メソッド Random rnd = new Random(); Color brown = new Color(160, 0, 0); //茶色 /*** ライフがあるとき ***/ if (life > 0) { /***** 背景色を青にする *****/ g.setColor(Color.blue); g.fillRect(0, 0, size.width, size.height); /*** ボックスの背景色を設定 ***/ g.setColor(Color.green); g.fill3DRect(100, 100, 300, 300, true); /***** 縦軸・横軸を描画*****/ line_x = 100; line_y = 100; g.setColor(Color.red); /*** 縦軸を描画 ***/ for (i = 0; i < 4; i++) { g.drawLine(line_x, 100, line_x, 400); line_x += 100; } for (i = 0; i < 4; i++) { g.drawLine(100, line_y, 400, line_y); line_y += 100; } /*** 土竜の出現するボックスを描画 ***/ g.setColor(Color.black); hall_y = 130; for (i = 0; i < 3; i++) { hall_x = 115; for (j = 0; j < 3; j++) { g.fillOval(hall_x, hall_y, 75, 40); hall_x += 100; } hall_y += 100; } do { fore_mole_point = rnd.nextInt(9); } while(mole_point == fore_mole_point); mole_point = fore_mole_point; switch(mole_point) { case 0: mole_x = 125; mole_y = 135; break; case 1: mole_x = 225; mole_y = 135; break; case 2: mole_x = 325; mole_y = 135; case 3: mole_x = 125; mole_y = 235; break; case 4: mole_x = 225; mole_y = 235; break; case 5: mole_x = 325; mole_y = 235; break; case 6: mole_x = 125; mole_y = 335; break; case 7: mole_x = 225; mole_y = 335; break; case 8: mole_x = 325; mole_y = 335; break; default: break; } g.setColor(brown); g.fillOval(mole_x, mole_y, 50, 25); if (mole_x <= mouse_x && mole_y <= mouse_y && mole_x + 50 >= mouse_x && mole_y + 25 >= mouse_y) { /*** 成功時アクション ***/ g.setColor(Color.red); g.fillOval(mole_x, mole_y, 50, 25); } s.Sleep(500); life--; } /*** ライフが無いとき ***/ if (life <= 0) { g.setColor(Color.red); g.fillRect(0, 0, size.width, size.height); g.setColor(Color.blue); g.drawString("GAME-OVER(´・ω・`)", 250, 300); } } } }
- ベストアンサー
- Java
- canvas上で画像を移動する方法について
javascript超初心者です。 canvas上でimage1.pngをドラッグして移動させるために、次のようなコードを書きました。 window.addEventListener("load", function() { var canvas = document.getElementById("dCanvas"); var ctx=canvas.getContext("2d"); var image = new Image(); image.src="./images/image1.png"; var imageDrag = false; var imageObject = { x:0, y:0, width:100, height:50, }; image.onload = function () { ctx.drawImage(image,imageObject.x, imageObject.y); } canvas.addEventListener("mousemove", function(e){ //マウスの移動 var x = e.clientX; var y = e.clientY; if (imageDrag) { ctx.clearRect(0,0,800,400); ctx.drawImage(image, imageObject.x + x - startX, imageObject.y + y - startY); } }); canvas.addEventListener("mouseup",function(e){ if(imageDrag){ //ドラッグを終えたときのマウスの座標 var x = e.clientX; var y = e.clientY; imageObject.x += x-startX; imageObject.y += y-startY; imageDrag = false; } }); canvas.addEventListener("mousedown",function(e){ var x = e.clientX; var y = e.clientY; if(x > imageObject.x && x < imageObject.x+imageObject.width && y > imageObject.y && y < imageObject.y+imageObject.height){ imageDrag = true; //ドラッグを始めたときのマウスの座標 startX = x; startY = y; } }); canvas.addEventListener("mouseleave",function(){ imageDrag = false; }); var startX = -1; var startY = -1; }, true); パソコンでは作動したのですが、タブレット(Galaxy tab）上の Ｆｉｒｅｆｏｘではタッチ動作で動きません。 パソコン、タブレット両対応にするには、どうすればよいでしょうか。 よろしくご教授下さい。
- 締切済み
- JavaScript
- オブジェクトに新しい関数を追加したい。
いつもお世話になってます！ このサイトでいろいろと勉強させて頂いています！ 表題の通り、あるオブジェクトに新しい関数を追加したいですが、書き方が悪いのかうまく行きません。 例えば、変数名canvasというdivオブジェクトを生成したとします。 var canvas = document.createElement('div'); このcanvasにline(start_x,start_y,end_x,end_y)なんて線を描く関数を付けたいな…と思ったのです。 理想として、以下のような書き方がしたいのです。 var canvas = document.createElement('div'); canvas.setSize(0,0,600,400); // divのサイズ canvas.setColor(255,0,0); // 色決め canvas.line(0,0,100,100); // (0,0)～(100,100)に線を引く。 document.appendChild(canvas); こんな事、可能でしょうか？ また、documentに対してこのような関数を追加したりする事は可能でしょうか？ お時間がある時にでも教えていただければと思います。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
補足
初心者なのでどのようなプログラムミングを使えばいいか教えてください。 お願いします。