Click here for free DL of the app version that can save data.

No:342

197

←

Prev Next

→

Satellite simulator that orbits the earth
Developer User2962｜Date and time 23/6/12 13:43:09
Build time 22.294 sec｜Game capacity 1.855KB｜

Script

Satellite Simulator

Operate a satellite to orbit the earth!

It is designed to bounce off the edge of the screen.

Pictograms:🛰️🌍

Please prepare image files as appropriate. Also、In fact, to confirm that the image has completed loading、The onload event must be specified, but、It is omitted here.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>人工衛星シミュレーター</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript">

// 画面サイズの取得
	const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;

// canvasの設定
	const canvas = document.createElement("canvas");
	canvas.width = screenWidth;
	canvas.height = screenHeight;
	const ctx = canvas.getContext("2d");
	document.body.appendChild(canvas);

// 地球画像の読み込み
	const earthImage = new Image();
	earthImage.src = "earth.png";

// 人工衛星画像の読み込み
	const satelliteImage = new Image();
	satelliteImage.src = "satellite.png";

// 初期位置と速度
	let x = 100;
	let y = 100;
	let vx = 5;
	let vy = 5;

// 描画処理
	function draw() {
		ctx.clearRect(0, 0, screenWidth, screenHeight);
		// 地球の描画
		ctx.drawImage(earthImage, screenWidth/2 - earthImage.width/2, screenHeight/2 - earthImage.height/2);

// 人工衛星の描画
		ctx.drawImage(satelliteImage, x, y);

// 位置の更新
		x += vx;
		y += vy;

// 画面の端で跳ね返るように
		if(x > screenWidth - satelliteImage.width || x < 0) {
			vx = -vx;
		}
		if(y > screenHeight - satelliteImage.height || y < 0) {
			vy = -vy;
		}
	}

// ゲームループ
	setInterval(draw, 20);

</script>
</head>
<body>
	<h1>人工衛星シミュレーター</h1>
	<p>人工衛星を操作して地球を周りましょう！</p>
	<p>画面の端で跳ね返るようになっています。</p>
	<p>絵文字：🛰️🌍</p>
</body>
</html>

※ 画像ファイルは適宜用意してください。また、実際には画像の読み込み完了の確認をするために、onloadイベントの指定が必要ですが、ここでは省略しています。