QA@IT
«質問へ戻る

14
タイトル
Javascriptで画像をランダムに動かしたいです。
【初心者】Javascriptで画像をうろうろランダムに動かしたいのですが、開始位置が真ん中になりません。
本文
 UFOという名前の画像を用意して、ボタンをクリックすれば上下左右にランダムに画像が動く
-というコードを書いたんですが、動作しません・・・
-どこがおかしいのでしょうか?
-まずボタンをクリックするとmove()関数が呼び出されてランダムなpx数、ランダムに上下左右動きます。
-そして関数の最後にsetTimeout()関数で再びmove()関数を呼び出し以下繰り返し・・・と動かしたいです。
+というコードを書いたんですが、開始位置が左端からになってしまい、左上だけをうろうろしてしまいます。
+どうすれば真ん中のまま始まるのでしょうか?
 
 ```
 <!DOCTYPE html>
 <script type="text/javascript">
 function move(){
 	var get, rand, x, timer;
-	get = getElementById("pic");
+	get = document.getElementById("pic");
 	x = Math.floor(Math.random() * 10);
 	rand = Math.random();
 	if(rand < 0.25){
-		get.style.top = get.style.top + x + "px";
-	}elseif(rand < 0.50){
-		get.style.bottom = get.style.bottom + x + "px";
-	}elseif(rand < 0.75){
-		get.style.left = get.style.left + x + "px";
+		get.style.top = x + "px";
+	}else if(rand < 0.50){
+		get.style.bottom = x + "px";
+	}else if(rand < 0.75){
+		get.style.left = x + "px";
 	}else{
-		get.style.right = get.style.right + x + "px";
+		get.style.right = x + "px";
 	}
 	timer = setTimeout("move()", 100);
 }

【初心者】Javascriptで画像をうろうろランダムに動かしたいのですが、開始位置が真ん中になりません。

UFOという名前の画像を用意して、ボタンをクリックすれば上下左右にランダムに画像が動く
というコードを書いたんですが、開始位置が左端からになってしまい、左上だけをうろうろしてしまいます。
どうすれば真ん中のまま始まるのでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Nice</title>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<style type="text/css">
    #pic{
        position: absolute;
        top: 200px;
        left: 300px;
        right: 300px;
        bottom: 200px;
    }
</style>
<script type="text/javascript">
function move(){
    var get, rand, x, timer;
    get = document.getElementById("pic");
    x = Math.floor(Math.random() * 10);
    rand = Math.random();
    if(rand < 0.25){
        get.style.top = x + "px";
    }else if(rand < 0.50){
        get.style.bottom = x + "px";
    }else if(rand < 0.75){
        get.style.left = x + "px";
    }else{
        get.style.right = x + "px";
    }
    timer = setTimeout("move()", 100);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div id="pic">
<img src="UFO.jpg" width="400px" height="300px"/>
</div>
<form>
<input type="button" value="スタート" onclick="move()">
</form>
</body>
</html>
UFOという名前の画像を用意して、ボタンをクリックすれば上下左右にランダムに画像が動く
というコードを書いたんですが、開始位置が左端からになってしまい、左上だけをうろうろしてしまいます。
どうすれば真ん中のまま始まるのでしょうか?

```
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Nice</title>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<style type="text/css">
	#pic{
		position: absolute;
		top: 200px;
		left: 300px;
		right: 300px;
		bottom: 200px;
	}
</style>
<script type="text/javascript">
function move(){
	var get, rand, x, timer;
	get = document.getElementById("pic");
	x = Math.floor(Math.random() * 10);
	rand = Math.random();
	if(rand < 0.25){
		get.style.top = x + "px";
	}else if(rand < 0.50){
		get.style.bottom = x + "px";
	}else if(rand < 0.75){
		get.style.left = x + "px";
	}else{
		get.style.right = x + "px";
	}
	timer = setTimeout("move()", 100);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div id="pic">
<img src="UFO.jpg" width="400px" height="300px"/>
</div>
<form>
<input type="button" value="スタート" onclick="move()">
</form>
</body>
</html>
```

質問を投稿

Javascriptで画像をランダムに動かしたいです。

UFOという名前の画像を用意して、ボタンをクリックすれば上下左右にランダムに画像が動く
というコードを書いたんですが、動作しません・・・
どこがおかしいのでしょうか?
まずボタンをクリックするとmove()関数が呼び出されてランダムなpx数、ランダムに上下左右動きます。
そして関数の最後にsetTimeout()関数で再びmove()関数を呼び出し以下繰り返し・・・と動かしたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Nice</title>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<style type="text/css">
    #pic{
        position: absolute;
        top: 200px;
        left: 300px;
        right: 300px;
        bottom: 200px;
    }
</style>
<script type="text/javascript">
function move(){
    var get, rand, x, timer;
    get = getElementById("pic");
    x = Math.floor(Math.random() * 10);
    rand = Math.random();
    if(rand < 0.25){
        get.style.top = get.style.top + x + "px";
    }elseif(rand < 0.50){
        get.style.bottom = get.style.bottom + x + "px";
    }elseif(rand < 0.75){
        get.style.left = get.style.left + x + "px";
    }else{
        get.style.right = get.style.right + x + "px";
    }
    timer = setTimeout("move()", 100);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div id="pic">
<img src="UFO.jpg" width="400px" height="300px"/>
</div>
<form>
<input type="button" value="スタート" onclick="move()">
</form>
</body>
</html>
UFOという名前の画像を用意して、ボタンをクリックすれば上下左右にランダムに画像が動く
というコードを書いたんですが、動作しません・・・
どこがおかしいのでしょうか?
まずボタンをクリックするとmove()関数が呼び出されてランダムなpx数、ランダムに上下左右動きます。
そして関数の最後にsetTimeout()関数で再びmove()関数を呼び出し以下繰り返し・・・と動かしたいです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Nice</title>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<style type="text/css">
	#pic{
		position: absolute;
		top: 200px;
		left: 300px;
		right: 300px;
		bottom: 200px;
	}
</style>
<script type="text/javascript">
function move(){
	var get, rand, x, timer;
	get = getElementById("pic");
	x = Math.floor(Math.random() * 10);
	rand = Math.random();
	if(rand < 0.25){
		get.style.top = get.style.top + x + "px";
	}elseif(rand < 0.50){
		get.style.bottom = get.style.bottom + x + "px";
	}elseif(rand < 0.75){
		get.style.left = get.style.left + x + "px";
	}else{
		get.style.right = get.style.right + x + "px";
	}
	timer = setTimeout("move()", 100);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div id="pic">
<img src="UFO.jpg" width="400px" height="300px"/>
</div>
<form>
<input type="button" value="スタート" onclick="move()">
</form>
</body>
</html>
```