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

No:2601

1888

←

Prev Next

→

Standard or Dialect?
Developer User3392｜Date and time 23/6/22 2:04:45
Build time 48.048 sec｜Game capacity 1.873KB｜

Script

に注意してください。 HTMLファイルにJavaScriptを組み込んで、スマホで遊べるゲームを作成しました！絵文字をふんだんに使っているので、楽しく遊べますよ！以下が、実際のプログラムです。

かわいいアイコンで遊ぼう！

このプログラムでは、かわいいひつじのアイコン（🐻）を使って、ボールを描画しています。ボールは動き回りますが、壁に当たると跳ね返ります。これを使って、ミニゲームなどを作れば面白いかもしれませんね！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

に注意してください。

HTMLファイルにJavaScriptを組み込んで、スマホで遊べるゲームを作成しました！ 絵文字をふんだんに使っているので、楽しく遊べますよ！

以下が、実際のプログラムです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>かわいいアイコンで遊ぼう！</title>
	<style>
		body {
			background-color: pink;
			text-align: center;
		}
		canvas {
			border: 2px solid white;
			border-radius: 20px;
		}
	</style>
</head>
<body>
	<h1>かわいいアイコンで遊ぼう！</h1>
	<canvas id="myCanvas" width="400" height="400"></canvas>
	<script>
		// キャンバスの初期化
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var x = canvas.width/2;
		var y = canvas.height/2;
		var dx = 2;
		var dy = -2;

// アイコン画像の読み込み
		var icon = new Image();
		icon.src = "https://twemoji.maxcdn.com/v/13.1.0/svg/1f63b.svg";

// ボールを描画する関数
		function drawBall() {
			ctx.beginPath();
			ctx.drawImage(icon,x,y,50,50);
			ctx.closePath();
		}

// ループ処理
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			if(x + dx > canvas.width-50 || x + dx < 0) {
				dx = -dx;
			}
			if(y + dy > canvas.height-50 || y + dy < 0) {
				dy = -dy;
			}
			x += dx;
			y += dy;
		}

// インターバルの設定
		setInterval(draw, 10);
	</script>
</body>
</html>
```