スムーズな動きを実現するためのJavaScriptの方法
- 質問者は、スムーズな動きを実現したいと考えています。紹介されているサイトのサンプルでは、動きがカクカクしているため、改善方法を知りたいとのことです。
- 提供されたJavaScriptのコードでは、キーボード入力に応じてキャラクターを上下左右に移動させることができます。しかし、動きがカクカクしているため、よりスムーズな動きを実現するためには、以下のような改善点が考えられます。
- 1. キャラクターの移動量を調整する 2. キーボード入力の処理を最適化する 3. アニメーションを使用するなど、他の手法を検討する
- ベストアンサー
スムーズに動かすにはどうしたらいいでしょうか？
ここで教えて頂いたサイトでJavaScriptを勉強していたら、なんと私が今困っている問題そのものにぶつかり、驚きです！ http://www.openspc2.org/reibun/javascript/move/018/index.html ここで紹介してあるサンプルなんですが、動きがカクカクしています！ これをスムーズにさせたいのですが、どうすればよろしいでしょうか？ <html> <head> <title>キャラクタをキー入力に応じて上下左右に動かす</title> <script Language="JavaScript"><!-- x = 50; y = 100; function moveChar() { kc = event.keyCode; c = String.fromCharCode(kc); if (c == "A") x = x -2; if (c == "D") x = x +2; if (c == "W") y = y -2; if (c == "X") y = y +2; document.images["myChar"].style.left = x; document.images["myChar"].style.top = y; } // --></script> </head> <body onKeydown="moveChar()"> <img src="char.gif" name="myChar" style="position:absolute;left:50px;top:100px;"> </body> </html>
- Hypocrite_k
- お礼率8% (24/290)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
onkeydownなどのイベントでキーの判別と移動を同時に行ってますが、それでは一つのキーの入力しか受け付けられません。 スムーズに動かすには、onkeydownで各キーのスイッチとなる変数をたとえば1に、 onkeyupでキーのスイッチを0にして、移動はタイマーで一定時間ごとにスイッチが1なら移動するような、移動用関数を呼び出して行います。 この方法だと同時に二つの入力を受け付けますので、斜め方向への移動が可能になります。 すぐ下のほうでそのようなことについて私が解答しましたので、参考に。 http://okwave.jp/kotaeru.php3?q=1817537 マリオのような「斜めジャンプ」はどうすれば・・・
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 カクカクとはどんな感じの動きでしょうか。 試してみましたがカクカクした感じはしませんでした。 JavaScriptは実行している端末のスペックや使用状況で 変動するのでご注意ください。 例えば、自分のPCではきびきび動いているプログラムも 他のPCでは動きが遅かったり、自分の思っていた動きとは違うな・・・ ってのが多々あります。
関連するQ&A
- 文字がマウスカーソルを追従するスクリプト
いつもお世話になっております。 以下のサンプルスクリプトでinnerText・style.left・style.topと書いてあるところがあるのですが、これはどういう意味なのでしょうか？ どなたかわかる方、教えてください。 お願いします。 <HTML> <HEAD> <TITLE>マウスポインタ座標表示</TITLE> <STYLE TYPE="text/css"> <!-- #msxy { position:absolute; top:0px; left:0px; width:48px; color:black; background-color:yellow; font-size:7pt; border-width:1px; border-size:1px; border-style:solid; } --></STYLE> <SCRIPT Language="JavaScript"> <!-- function displayMouseXY(evt) { var X = Y = 0; if (document.all) { X = event.x; Y = event.y; document.all["msxy"].innerText = X+","+Y; document.all["msxy"].style.left= X + 8; document.all["msxy"].style.top = Y + 16; } if (document.layers) { X = evt.x; Y = evt.y; with(document.layers["msxy"]) { document.open(); document.write("<SMALL>"+X+","+Y+"</SMALL>"); document.close(); left = X + 8; top = Y + 16; bgColor = "yellow"; } } } if (document.all) document.onmousemove = displayMouseXY; if (document.layers) { window.onmousemove = displayMouseXY; window.captureEvents(Event.MOUSEMOVE); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> マウスポインタ座標表示<BR> <DIV ID="msxy"></DIV> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ
以下のJAVASCRIPTが、動作しないのですが、その原因がわかりません。助けてください <html> <head> <script type="text/javascript"> var x=200,y=100; var dx=10,dy=10; function move() { setTimeout("move()",100); var ball=document.getElementById("ball"); x+=dx; y+=dy; ball.style.left=x; ball.style.top=y; if (x<=50 || x+10>=450) dx=-dx; if (y<=50 || y+10>=450) dy=-dy; } </script> </head> <body onLoad="move()"> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left:200;top:100"> </body> </html>
- 締切済み
- JavaScript
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
- <!DOCTYPE html>有り無しについて
Javascript勉強中の初心者です。Windws7を使っています。 <html lang="ja"> <head> <meta charset="utf-8"> <title>バウンド</title> <style> .area { width:640px;height:480px;background-color:yellow; border-bottom:solid 2px black; } </style> <script> var x=560;var y=420;var xv=10;var yv=10; function moveChar() { x+=xv;y+=yv; if((x>560)||(x<0)){ xv=-xv; } if((y>420)||(y<0)){ yv=-yv; } document.chara.style.left=x; document.chara.style.top=y; } </script> </head> <body onLoad="setInterval('moveChar()',40)"> <div class="area"> <p> <img src="parts/photo.jpg" name="chara" width="80px" height="60px" style="position:absolute;left:560px;top:420px;"> </p> </div> </body> </html> これは、あるサイトのサンプルを改造したバウンド実験のプログラムです。この先頭には 参照した時から<!DOCTYPE html>が無く、それだと意図通り動きます。それが、 <!DOCTYPE html>を先頭につけるとおかしくなります。ＩＥ、ＦＸ、ＧＣ、Ｏｐｅｒａどれでも 確認しています。初期位置にじっと現れ、突然、角へ跳ねて、やがて初期位置の対角へ跳ねて終了。 （1）なぜこうなるのでしょうか？ （2）<!DOCTYPE html>があっても動くようにするにはどう直せばいいのでしょうか？ （3）もしかして、<!DOCTYPE html>は無用ですか？ <!DOCTYPE html>が無いとどう困ることが起こり得るのでしょうか？ どなたか、ご教示ください。よろしくお願いします。
- ベストアンサー
- ブラウザ
- このソースを直して！【JavaScript】
JavaScriptで、「画像をクリックしたらその画像を交互に大きくしたり小さくしたりする」というプログラムを書いたのですが、２回クリックしたら画像をクリックしても何も起こらなくなってしまいました。どうしたら解決するでしょうか？ <html><head><title>test</title> <script type="text/javascript"><!-- x=128; y=128; function kaeru(){ document.images["gazou"].height = x; document.images["gazou"].width = y; if(x=64){x=128; y=128;} if(x=128){x=64; y=64;} } //--></script> </head><body> <a href="JavaScript:kaeru()"> <image src="co.gif" id="gazou" width="64"height="64"> </a> </body></html> 回答よろしくお願いします。 ちなみに if(x=128){x=64; y=64;} の所はelseにしようと思っていたのですが、elseにしたらそのelse文が実行されませんでした。
- ベストアンサー
- JavaScript
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- 締切済み
- JavaScript
- Netscapeで動かない
みなさん、こんにちは。Blackwinglsです。 以下のようなScriptを作成したのですが、Netscapeで動いてくれません(^^;) IEしか持っていないので、Netscapeに対応させるにはどうしたら良いのかさっぱりわかりません。 <script language="JavaScript"> <!-- var ax=20 function mv() { if(document.all) { obj=document.all.L1.style WIDTH=document.body.clientWidth } if(document.layers) { obj=document.L1 WIDTH=window.innerWidth } setTimeout("mv()",100) x=obj.left n=x.length y=(eval(x.substring(0,n-2))-ax) obj.left=y+"px" x2=obj.width n2=x2.length y2=(eval(x2.substring(0,n2-2))) if(y < -y2) { obj.left=WIDTH } } //--> </script> 何処が間違っているのでしょうか？ 良きアドバイスをお願いします。
- ベストアンサー
- JavaScript
- Ｊavascriptの質問です。
Ｊavascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点： (1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。） 恐れ入りますがよろしくお願いいたします。 ■ＨＴＭＬ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■ＣＳＳ @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- オブジェクトを指定してくださいのエラーが出ます
<html> <head> <META http-equiv="Content-Script-Type" content="text/javascript"> <script langage="javascript"> <!-- function start(){ time=setTimeout("jsimage()",1000); } var c=0; function jsimage(){ clearTimeout(time); if(c<=3){ document.write('<div style="position:absolute;left:'+(c*30)+'px;top:0px">\n'); document.write('<img src="logo.gif">\n</div>'); time=setTimeout("jsimage()",1000); c=c+1; } } --> </script> </head> <body> <a href="javascript:start()">start</a> </body> </html> これをIEブラウザで表示させると、一回だけlogo.gifが表示されるのですが、その後に 「エラー：オブジェクトを指定してください」とエラーが出ます。このエラー内容でで指定されているラインは1です、1行目には<html>タグしかないので、よく分からなくて困っています。 何かいい知恵がありましたら教えてください。お願いします
- ベストアンサー
- JavaScript
補足
例えば、→に動いている最中に↑に行くボタンをおすと、一瞬止まって、斜めにいかずに↑に行くということです。 ／ ／ ／ →→→→→ という動きをしたいのですが、これだと、 ↑ ↑ ↑ →→→→→↑ のようになってしまいます。 要は、キーボードから読み込む時に、→に行くボタンと↑に行くボタンを同時に押すと、斜めに行かないということです。 同時に読み込むことは不可能なんでしょうか？