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

No:2274

5110

←

Prev Next

→

Mario Kart
Developer anonymous｜Date and time 70/1/1 9:35:22
Build time unknown sec｜Game capacity 2.122KB｜

Script

マリオカート

『マリオカート』というタイトルのゲームを作成しました。まずは『スタート』ボタンを押すと、画面上に赤いボール（マリオ）が現れ、左右や上下に移動し始めます。『ストップ』ボタンを押すと、ボールの動きが止まります。このゲームは、画面いっぱいを使って遊ぶことができます。スマホでも操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>マリオカート</title>
	<style>
		body {
			background-color: #a1c7f0;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		canvas {
			background-color: #fff;
			display: block;
			margin: 50px auto;
			border-radius: 10px;
		}
		h1 {
			font-size: 50px;
			margin-top: 20px;
		}
		button {
			background-color: #f7921e;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			box-shadow: 2px 2px 5px rgba(0,0,0,.3);
			cursor: pointer;
			font-size: 20px;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1>マリオカート</h1>
	<canvas id="canvas" width="800" height="500"></canvas>
	<button id="startBtn">スタート</button>
	<button id="stopBtn">ストップ</button>
	<script>
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');
		const startBtn = document.getElementById('startBtn');
		const stopBtn = document.getElementById('stopBtn');
		let x = 100;
		let y = 100;
		let dx = 5;
		let dy = 5;
		let r = 20;

let intervalId;
		startBtn.addEventListener('click', function() {
			intervalId = setInterval(draw, 10);
		});

stopBtn.addEventListener('click', function() {
			clearInterval(intervalId);
		});
	</script>
</body>
</html>