JavaScript で ジャンプするボールを作ろう！
YouTube連動記事
この記事はYouTube連動記事です。動画のほうでも紹介していますのであわせてご確認ください。
【YouTube】 JavaScript で ジャンプするボールを作ろう！（まとめ版）
【YouTube】 JavaScript で ジャンプするボールを作ろう！（分割版）
第１回 第２回 第３回 第４回 第５回 第６回
●各ソースへのリンク
01.ファイルの新規作成
デスクトップで何もないところを右クリックして右クリックメニュー → 新規作成 →
テキストドキュメントをクリックします。
ファイル名は「JumpBall.txt」としておきます。
作成されたテキストドキュメントについて
ファイル名に拡張子「.txt」が表示されていない場合は 表示するようにしてください。
もし表示されてない方は
エクスプローラ → 表示 → フォルダ→オプション → 表示タブ 登録されている拡張子を表示しない
のチェックを外すで 「.txt」が表示されます。
02.HTML基本部分の作成
まずHTMLの基本部分を打ち込みますインデントに注意しながら入力してみてください。
ダウンロード コピーできました！
jumpball_01.txt
<html> <head> <title> Jump Ball </title> </head> <body> <button>start</button> <div>●</div> </body> </html>
入力が終わったらファイルを保存します デスクトップでファイルを右クリックし 右クリックメニュー → 名前の変更で 拡張子を変更します
「拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか」とでます。
「はい」を押します。
jumpBall.htmlファイルのアイコンが変わります。
これはテキストファイルから ブラウザで開くHTMLファイルに変わったことを示しています。
ファイルをダブルクリックしてみましょう。
ブラウザが開きます。
ブラウザの中は スタートボタンと黒丸が表示されていると思います。
もしお手本通りにうまく行かない方は 上記プログラムソースをコピーしてファイル保存して 比較してみてください。
どうしてもわからないっていう場合は
お手本と比較してみようの動画もありますのでそちらも参考にしてみてください。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
よくある間違いとしては、カッコが全角になっていたりとか スペースが全角になっていたりといったところです。
03.HTMLファイルのままサクラエディタで開く
拡張子をHTMLにしたのでダブルクリックするとブラウザが開いてしまいます。ブラウザが開いてしまうので、プログラムが変更できません。
なのでHTMLファイルのままの状態でプログラムを変更するには
「右クリックを押して プログラムから開く」です
右クリックメニューから サクラエディタを選ぶとプログラムを書ける状態で開くことができます。
04.スタイルシートの作成
スタイルシートを書いていきます。さきにdivにIDを付けます
divの開始タグの後ろにスペースを１つあけてid="ball"を書きます。
<div id="ball">●</div>
headの中に「スタイルシート」を書きます。
スタイルシートは
文字の色を変えたり、文字のサイズや 背景色などデザインを設定する部分です
スタイルシートはCSSとも言います。
#ball {
color:red;
font-size:20px;
}
ここでは●の色を赤に変えて、文字のサイズを20pxにしています。
ダウンロード コピーできました！
jumpball_02.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
}
-->
</style>
</head>
<body>
<button>start</button>
<div id="ball">●</div>
</body>
</html>
05.画面の使い方
パソコンの画面の使い方についてブラウザとテキストエディタを左右に並べると分かりやすくなります。
プログラムを左で書いたら右で動きを確認です。
左右逆でもかまいません。
06.ボールを絶対座標にする
普通のタグは左から右、上から下という風に順番に並んで表示されていきますが、position:absolute の設定を行うと 左上からどれくらいの位置にあるのかという設定で表示することができます。
絶対座標といいます
左上が0の0で、右下に向かって数値が増えます
上からの座標値はtop、左からの座標値はleft で指定します。
ダウンロード コピーできました！
jumpball_03.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
</head>
<body>
<button>start</button>
<div id="ball">●</div>
</body>
</html>
07.JavaScript 開始
JavaScriptを書きます。 JavaScriptはscriptタグの中にかきます。<script> <!-- --> </script>この中にプログラムを書いていきます。
var y = 50;
これは「yという名前の変数を宣言」しています。
変数は変わる数と書きます。
変数の中には数字とか文字とかいろいろなデータを入れることができます。
今回、yの中には数のデータをいれているのですが
プログラムの処理が進むとyの中に入っている数が変わります。 数が変わるので変数です。
宣言というのは「yという名前の変数をいまから使います！」と宣言してます。
宣言しないで変数を使おうすると
「yって何？意味わかんないんだけど」ってシステムに怒られます。
イコール50の部分は「 yの中に今 50を入れたよ」という意味です。
イコールは代入という処理になります。
セミコロンは１つの処理の終わりという意味です。
1つ処理を書いたらセミコロンです。
なるべく1行1処理で書くんですが
2行以上ある処理の場合は最後の行にセミコロンを書きます。
変数yは、ボールのy座標として使います。
08.関数
function (ファンクション) は日本語で関数ってやつですね。関数はいくつかの処理をまとめて書いたものです。
プログラムは長くなるとどこに何を書いたのかわからなくなります。
また同じような処理があちこちで書く必要がでてきます。
同じ処理だったらどっかにまとめて登録しておいて
共通で使うほうが効率がいいです。
どっかに登録しといて共通で使えるやつ
それが関数です。
関数の構文は以下の通りです
function 関数名(引数) {
処理
}
関数の名前はほんとはなんでもいいんですがふつうは意味のある名前を付けます
今回ジャンプするボールの「移動」の処理を書いていくのでmoveとします
引数はなしとします。
function move() {
}
このあとmove関数の中の処理を書いていきます
09.要素を操作する
関数の処理の1行目を書いていくのですがちょっと難しいです。
var elm = document.getElementById("ball");
読み方は
バー エルム ドキュメント どっと ゲットエレメントバイアイディです
大文字小文字も間違えてはいけません。
var elm。
これは「elmという名前の変数をいまから使います！」と宣言してます。
変数yと同じです。
＝ イコール
このイコールは右側にある値をelmの中にいれるよって意味です。
ここも変数yと同じです。
documentは今書いているHTMLのページ全体の情報が入っている特別な変数です。
どこにも宣言されてないんですが「特別なやつ」なので
いつでも使えます。
.getElementById()
これも特別なやつです。
大文字小文字ゼッタイ間違えてはいけません。
死ぬほど間違いやすいです。
.getElementById() の中の "ball"
divのidを指定します
var elm = document.getElementById("ball");は何の処理をしているかというと
elmという変数の中にデータを入れています。
どんなデータかというと
ボールのdivそのものをデータ化して
elmに入れています。
つまりelmを操作すると、divが操作できるという意味です。
ここの処理をしっかり理解するのは難しいので、
最初はとりあえず「決まり文句」として覚えていただいても大丈夫です。
次の行を書きます
elm.style.top = y;
先頭のelmは1行上のelmと同じものです。
.styleの部分について
ドットはelmの中にあるstyleという意味です。
elmにはdivの情報がまるまるはいっているので
意味としてはdivのstyle、divの色とか文字サイズの情報がはいってるやつだよってことです
.top
これはelmの中にあるstyleの中のtopだよという意味です。
topは y座標のことです。
まだelmは何も操作していないので最初のtopの数値がはいっています。
最初のtopの数値ってなに？っていうと
styleタグの中に書かれた数値が最初のtopの数字になります。
初期値は200ピクセルです
= y の部分を説明します。
イコールは、elm.style.top に 新しい数値をいれるよって意味です。
次にmove関数を呼び出す処理を作ります。
startボタンをクリックしたら move関数 が呼ばれるようにします。
<button onclick="move">start</button>
これで、startボタンをクリックしたらmove()処理が走ります。
ボタンクリックからどう処理が流れるのか、というのをイメージできるとよいです。
ダウンロード コピーできました！
jumpball_04.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
elm.style.top = y;
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
スタートボタン押してみます
ボールの位置が変われば成功です
もしボールの位置が変わらない方は、いったん先には進まないで どこを間違えているのか見つけてから次に進むようにしましょう。
一応これで動くものができました。
10.ボタンを押すたびに動く
さてここまででできたのは
ボタンとボールの表示、そして
ボタンを押すとボールの位置が変わるところまでです。
もう少し詳しくいうと
startボタンを押すとmove()関数が呼ばれ
move()関数の中でボールの位置を変更しています
さてさて
このままでは さすがに動き的につまらないので
今度はボタンを押すたびに毎回縦の位置が変わっていく、
毎回y座標が変わるという処理をやっていきます。
さっきの行の間ですね。
新しく行を追加しまして、y +=10;っていうの入れます。
これはyの中身が10増えるよっていう意味です。
function move(){
var elm = document.getElementById("ball");
y +=10;
elm.style.top = y;
}
ダウンロード コピーできました！
jumpball_05.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
y += 10;
elm.style.top = y;
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
はい、今回ちょっとこの1行だけ追加できたら
ブラウザで確認してみましょう。
スタートボタンを何度も押してみましょう
y座標が10個ずつぐらい・・・ちょっとわかりずらいですが すこしずつ移動しているのが分かると思います。
ここでは、どんな風に動いていくかが見えたらよいかなと思います。
11.一定時間ごとに動く
今はボタンを一回押すたびにボールが10動きます
これを変えて最初に1回ボタンを押したら
一定時間ごとに10動くようにします
何度もボタンを押さなくてもいいようにします
一定時間ごとに動くようにするには
setTimeout()というJavaScriptに最初から用意されている関数を使います。
setTimeout()のように最初から用意されている関数をAPIと呼びます。
（APIの定義はちょっと難しいのでここでの説明は割愛します）
setTimeoutの使い方です。
setTimeoutにはデータを２つ渡します。
関数に渡すデータは引数(ひきすう)といいます。
引数は()の中に書きます。
引数１つめ、一定時間に何の処理をするのかを書きます。
１つめと２つめの引数のあいだはカンマで区切ります
2つめは一定時間ごとの時間を指定します
インターバルと言います
単位はミリ秒です。
１ミリ秒は1000分の1秒です。
なので1000と書くと1秒、500と書く0.5秒になります。
setTimeout(move, 1000);
ダウンロード コピーできました！
jumpball_06.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
y += 10;
elm.style.top = y;
setTimeout(move, 1000);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
moveを呼ぶとまた1秒後にmoveが呼び出されるので
1秒ごとに無限にmoveが呼ばれます。
12.if文
ボールが下に移動するようになったので
ちょっと、ここでさらにもういくつか処理を入れていきます。
if文という条件分岐処理を書いていきます。
ifなのでもし〇〇だったら××するよという意味です
if の右の丸カッコの中に条件を書きます
{}の中にどんな処理をするかを書きます
もし〇〇だったら××するよという意味で書くときは
if (〇〇) {××}となります。
一般的に()は１行で書いて
{}は改行して書きます
今回書く場所は
y+=10;の次の行になります。
if文の内容としては 「もしyが100以上なら yは100にしておく」です
if (y >= 100){
y = 100;
}
if文を書く位置や条件は最初は慣れないかも知れませんが
プログラミングを繰り返すとわかってくるので安心してください。
ここでポイントです。
波カッコ始めから波カッコ終わりまでのなかは
右にインデントをひとつずらしてください。
波カッコ始めの次の行から
右に１つインデントです。
波カッコ終わりが来たら
左に１つインデントを戻します。
いまはボールがどんどん下のほうにいくだけなので
ボールの位置が100以上になったらそれ以上いかないようにするのがこのif文です
ダウンロード コピーできました！
jumpball_07.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
y += 10;
if (y >= 100){
y = 100;
}
elm.style.top = y;
setTimeout(move, 1000);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
最初上から50pxの位置にあって
1秒で10ずつ移動します。
5秒たつと100pxに到達します。
6秒目からボールが動かなくなります
少しここで数字をかえて試してみましょう
いま1秒ごとにボールが動くので これを0.2秒ごとに動くようにしてみます。
setTimout の 1000 を 200 に変えます
setTimeout(move, 200);
ダウンロード コピーできました！
jumpball_08.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
y += 10;
if (y >= 100){
y = 100;
}
elm.style.top = y;
setTimeout(move, 200);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
さっきよりはやくなりました。
(画像ではわかりにくいのですが速くなってます)
もっと変えてみましょう
if文の100を300にしてみます。
if (y >= 300){
y = 300;
}
()の中、条件に書いてる100と、{}の中y+=100の2箇所を変えます
ダウンロード コピーできました！
jumpball_09.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
function move(){
var elm = document.getElementById("ball");
y += 10;
if (y >= 300){
y = 300;
}
elm.style.top = y;
setTimeout(move, 200);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
さっきよりボールが下のほうへ移動するようになりました。
どの数字がどのようにプログラムに影響するのか
他にもいろいろ数字を変えながら
ゆっくり試してみるといいかもしれません
13.ボールのバウンド
ボールが一番下までいったら
反転して上にいく、という風にプログラムを変えていきます。
y += 10 の
10を変数にしていきます
まずyの増分 (加速度) となる変数です
var addy = 10;
これは「addyという名前の変数をいまから使います！」と宣言してます。
つづいて
y += 10 を変えて
y += addy
とします。
ここまで動き的にはなにも変わりません
ダウンロード コピーできました！
jumpball_10.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
var addy = 10;
function move(){
var elm = document.getElementById("ball");
y += addy;
if (y >= 300){
y = 300;
}
elm.style.top = y;
setTimeout(move, 200);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
ブラウザで確認して、先ほどと動きが変わらないことを確認します。
※プログラミングでは「動きが変わらないことを確認すること」もとても大事です。
ここでポイント
ボールが一番下までいったらという条件は
ここのif文です
if (y >= 300){
y = 300;
}
ここに
addy = -addy;という処理を加えます。
if (y >= 300){
y = 300;
addy = -addy;
}
これでボールが一番下までいったら
反転して上にいく、という風にプログラムが変わりました
addy = -addy;は符号反転です。
プラスはマイナスにします。
マイナスはプラスにします。
もしaddyが10なら-10にします。
-10なら+10にします。
ダウンロード コピーできました！
jumpball_11.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
var addy = 10;
function move(){
var elm = document.getElementById("ball");
y += addy;
if (y >= 300){
y = 300;
addy = -addy;
}
elm.style.top = y;
setTimeout(move, 200);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
ボールが下までいくと反転して上にいくのがわかると思います。
14.地球の重力
さてここでちょっと話題をずらします。
地球は重力があります。
ボールが落ちるときだんだん速くなります。
このだんだん速くなるという部分を
これをプログラムでも再現してみたいと思います。
やり方は簡単です。次のelse文の項でやっていきます。
15.else 文
if文のうしろにelse文をつけます。
if文はもし〇〇だったら××するよという意味でしたが
else文は
この〇〇でなかったときに処理を実行します。
else{
addy += 1;
}
addy += 1;は、addを1だけ増やすという意味です。
これでmoveが一回実行されるごとに加速します。
物理の授業でいうところの重力加速度になります。
ダウンロード コピーできました！
jumpball_12.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
var addy = 10;
function move(){
var elm = document.getElementById("ball");
y += addy;
if (y >= 300){
y = 300;
addy = -addy;
}
else {
addy += 1;
}
elm.style.top = y;
setTimeout(move, 200);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
ブラウザで確認してみます
ボールがぼよーんと跳ねてるような動きになります。
動かして見ていただくとわかるのですが
一度ボールが下まで行って跳ねた後
また下向きにボールが落ちていきます
これはaddy+=1が関係しています。
16.加速度の計算の仕組み
ボールが落ちていくとき
落ちる速度は速くなります
重力のように、だんだん速くなります
ボールが落ちきって一番下（地面のイメージ）の座標300に着いたとき、加速度addyは反転します。
加速度addyはマイナスの値になりました
でも、次にmove呼ばれたときも行われる処理はaddy+=1です。
つまりaddyがマイナスの時
move呼ばれるたびにyは減ります
ここがポイントです。
ボールはどんどん上に行きますが
addy は 必ず +1 されます
addyはマイナス値なので+1されるごとにどんどん0に近づきます
addy が0になったら上昇が止まります
でもまたmoveが呼ばれてaddy += 1されます
addy はまた1、2、3と増えていくので
ボールはまた下へ落ちていきます
あとはこの繰り返しです
17.ひとまず完成へ
動きを眺めていただくと気づかれると思うのですが
ボールが跳ねたあと最初の位置より高くあがっています。
ここの計算は少し難しくなるところなのですが
実は加速度addyが最初に10あるのが原因です。
addyの初期値は0にすると見栄えが良くなります。
あと動きがカクカクしているので
setTimeout(move, 200);の第二引数インターバルを
0.2秒から0.1秒に変えます
setTimeout(move, 100);
このへんの数字の扱いはとても難しいので
まずはお手本通りに書いてみて試してみてください
ダウンロード コピーできました！
jumpball_13.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
-->
</style>
<script>
<!--
var y = 50;
var addy = 0;
function move(){
var elm = document.getElementById("ball");
y += addy;
if (y >= 300){
y = 300;
addy = -addy;
}
else {
addy += 1;
}
elm.style.top = y;
setTimeout(move, 100);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
</body>
</html>
ちなみに一般的なパソコンでは
1ミリ秒単位で「正確に」処理を行うことは難しいです
JavaScriptでは特に難しいです。
パソコンのスペックにもよりますので
100ミリ秒以下の値を指定するときは注意してみてください
ボールが跳ねる処理的には完成です。
18.地面を作る
いったん完成はしたものの
何もない空間にボールが跳ねてる寂しさを感じます。
ということで
ボールの下に地面を作ろうと思います。
地面はJavaScriptではなくHTMLとCSSで作っていきます。
divを一つ追加して表現します
<div id="ground"></div>
groundのスタイルを作ります。
ボールの設定の次の行のところに書いていきます
#ground {
position:absolute;
left:50px;
top:320px;
width:500px;
height:2px;
background-color:brown;
}
position:absolute;
left:50px;
ここまではボールと同じです。
topはボールが跳ねる位置300と言いたいところなんですが、
実はボールのサイズが20あるのでここが実は320としています。
widthは横幅、heightは高さです。
お手本は 500 x 2の横に細長い棒みたいな地面です
この辺は見た目だけなので実際の数値はお好みでかまいません
background-color は背景色です。
これスペル長いので間違わないように気をつけましょう。
1文字でも違うと表示されません。
backgroundとcolorの間にハイフンがあるとこなんか要注意です。
背景色は地面なので茶色を指定しています。
ダウンロード コピーできました！
jumpball_14.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
#ground {
position:absolute;
left:50px;
top:320px;
width:500px;
height:2px;
background-color:brown;
}
-->
</style>
<script>
<!--
var y = 50;
var addy = 0;
function move(){
var elm = document.getElementById("ball");
y += addy;
if (y >= 300){
y = 300;
addy = -addy;
}
else {
addy += 1;
}
elm.style.top = y;
setTimeout(move, 100);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
<div id="ground"></div>
</body>
</html>
19.横に移動する
上下にバウンドしてるだけなので
横にもちょっと動かしたいと思います。
これまでy座標をずっとやってきたので同じような感じで
まずx座標の変数を作っていきます
var x = 50;
x座標の加速度も作ってあげます。
var addx = 3;
計算処理も同じように
x += addx;
計算した座標を要素に反映
elm.style.left = x;
x座標の加速度は3を設定しています。
地球の重力は下、縦方向にはありますが、横方向にはないので
x座標方向に加速はしません
ここがxとyの違いになります
ダウンロード コピーできました！
jumpball_15.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
#ground {
position:absolute;
left:50px;
top:320px;
width:500px;
height:2px;
background-color:brown;
}
-->
</style>
<script>
<!--
var x = 50;
var y = 50;
var addx = 3;
var addy = 0;
function move(){
var elm = document.getElementById("ball");
x += addx;
y += addy;
if (y >= 300){
y = 300;
addy = -addy;
}
else {
addy += 1;
}
elm.style.left = x;
elm.style.top = y;
setTimeout(move, 100);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
<div id="ground"></div>
</body>
</html>
ボールが跳ねながら右に移動していきます
20.横の移動も跳ね返るようにする
で、これも一番右までいったらまた戻ってきて欲しいですよね。
なのでまたちょっとプログラムを書きたします
xが500を超えたらxの加速度が反対向きになるようにします
if (x > 500){
x = 500;
addx = -addx;
}
ついでに左端でも跳ね返るようにします
if (x < 50){
x = 50;
addx = -addx;
}
このへんの処理もxとyの違いになります
ソースコード最終形
ダウンロード コピーできました！
jumpball_16.html
<html>
<head>
<title>
Jump Ball
</title>
<style>
<!--
#ball {
color:red;
font-size:20px;
position:absolute;
top:200px;
left:100px;
}
#ground {
position:absolute;
left:50px;
top:320px;
width:500px;
height:2px;
background-color:brown;
}
-->
</style>
<script>
<!--
var x = 50;
var y = 50;
var addx = 3;
var addy = 0;
function move(){
var elm = document.getElementById("ball");
x += addx;
y += addy;
if (x >= 500){
x = 500;
addx = -addx;
}
if (x < 50){
x = 50;
addx = -addx;
}
if (y >= 300){
y = 300;
addy = -addy;
}
else {
addy += 1;
}
elm.style.left = x;
elm.style.top = y;
setTimeout(move, 100);
}
-->
</script>
</head>
<body>
<button onclick="move();">start</button>
<div id="ball">●</div>
<div id="ground"></div>
</body>
</html>
ボールが左から右に跳ねながら動いていって
右端までいったらかえってくるのが見えると思います
21.完成
ソースコードは jumpball_16.html で
完成です。
自分で作ってみてうまくいかないなどありましたら
これまで紹介したソースコードをコピーしてみてください。
また、ソースの比較方法としては「ウィンマージでファイルを比較する」という動画もありますので、そちらもご参考にしていただければと思います。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
ジャンプするボールをJavaScriptで作ろうは以上となります。
ご閲覧いただきありがとうございました。