AI game creator

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

No:3312

1976

←

Prev Next

→

megademo
Developer User3655｜Date and time 23/6/24 12:47:49
Build time 19.805 sec｜Game capacity 1.94KB｜

Script

このアプリは、オレンジ色のボールが画面内を跳び回る簡単なゲームです。タップするとゲームが始まり、ボールが画面内を動き回ります。スマホで操作することを前提にしており、画面が自動的にリサイズされます。JavaScriptを使用して書かれており、1つのhtmlファイルに全てが含まれています。また、絵文字も使用しています。Enjoy! 😃

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<html>
<head>
	<title>メガデモ</title>
	<meta name="viewport" content="width=device-width">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			background-color: #000;
		}
	</style>
</head>
<body onload="initialize()">
	<canvas id="canvas"></canvas>
	<script>
		var canvas, ctx;
		var x = 0, y = 0;
		var vx = 5, vy = 5;
		var radius = 30;
		var lastTime = Date.now();
		var deltaTime = 0;

function initialize() {
			canvas = document.getElementById("canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

if(canvas.getContext) {
				ctx = canvas.getContext("2d");
				ctx.fillStyle = "#fff";
				ctx.font = "24px sans-serif";
				ctx.fillText("メガデモ", canvas.width / 2 - 50, canvas.height / 2);

canvas.addEventListener("click", function() {
					animate();
				});
			}
		}

function animate() {
			if(canvas.getContext) {
				ctx.clearRect(0, 0, canvas.width, canvas.height);

var currTime = Date.now();
				deltaTime = currTime - lastTime;
				lastTime = currTime;

ctx.beginPath();
				ctx.arc(x, y, radius, 0, Math.PI * 2, true);
				ctx.closePath();
				ctx.fillStyle = "orange";
				ctx.fill();

x += vx * deltaTime / 10;
				y += vy * deltaTime / 10;

if(x + radius > canvas.width || x - radius < 0) {
					vx = -vx;
				}
				if(y + radius > canvas.height || y - radius < 0) {
					vy = -vy;
				}

requestAnimationFrame(animate);
			}
		}
	</script>
</body>
</html>