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

No:1770

1647

←

Prev Next

→

Quadratic Function Games
Developer GOひろし｜Date and time 23/6/19 0:49:09
Build time 59.72 sec｜Game capacity 4.453KB｜

Script

二次関数ゲーム

スコア: 0

このゲームは、1つの二次関数グラフが描かれ、その上をボールを左右に動かしながら、スコアを稼ぐゲームです。最初にランダムな二次関数が生成され、ボールを動かして、二次関数グラフ上の縦軸に対する位置に応じてスコアが加算されます。ボールがグラフ上のx軸に到達するとゲームオーバーになり、スコアが表示されます。絵文字は使用されておりません。主に数式やグラフを扱うため、スマホでも操作がしやすいように、ボタンを使って左右に動かすようになっています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>二次関数ゲーム</title>
	<style>
		body {
			background-color: #FFDAB9;
			font-family: Arial, sans-serif;
		}

h1 {
			text-align: center;
		}

#graph-container {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20px auto;
			border: 2px solid black;
			height: 500px;
			width: 80%;
		}

#graph {
			height: 100%;
			width: 100%;
		}

#buttons {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20px auto;
			height: 50px;
			width: 60%;
		}

button {
			font-size: 1.5em;
			padding: 10px;
			margin: 0 10px;
			border-radius: 5px;
			background-color: #FFFFF0;
			box-shadow: 2px 2px black;
		}

#score {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2em;
			margin: 20px auto;
			height: 50px;
			width: 60%;
			background-color: #FFE4B5;
			border-radius: 5px;
			box-shadow: 2px 2px black;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>二次関数ゲーム</h1>

let A = Math.floor(Math.random() * 10) + 1;
		let B = Math.floor(Math.random() * 10) + 1;
		let C = Math.floor(Math.random() * 10) + 1;

drawGraph();

let x0 = Math.floor(Math.random() * (canvas.width - 50)) + 25;
		let y0 = A * x0 ** 2 + B * x0 + C;
		drawBall(x0, y0);

let score = 0;
		let scoreDisplay = document.getElementById("score-value");
		scoreDisplay.innerText = score;

document.getElementById("button-left").addEventListener("click", function() {
			x0 = x0 > 25 ? x0 - 10 : x0;
			let y = A * x0 ** 2 + B * x0 + C;
			clearBall(x0 + 10, y);
			drawBall(x0, y);
			updateScore(y);
		});

document.getElementById("button-right").addEventListener("click", function() {
			x0 = x0 < canvas.width - 25 ? x0 + 10 : x0;
			let y = A * x0 ** 2 + B * x0 + C;
			clearBall(x0 - 10, y);
			drawBall(x0, y);
			updateScore(y);
		});

function drawGraph() {
			ctx.beginPath();
			ctx.moveTo(0, canvas.height / 2);
			ctx.lineTo(canvas.width, canvas.height / 2);
			ctx.strokeStyle = "black";
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(canvas.width / 2, 0);
			ctx.lineTo(canvas.width / 2, canvas.height);
			ctx.strokeStyle = "black";
			ctx.stroke();

function drawBall(x, y) {
			ctx.beginPath();
			ctx.arc(x, canvas.height - y, 10, 0, Math.PI*2);
			ctx.fillStyle = "yellow";
			ctx.fill();
			ctx.strokeStyle = "black";
			ctx.stroke();
		}

function clearBall(x, y) {
			ctx.beginPath();
			ctx.arc(x, canvas.height - y, 10, 0, Math.PI*2);
			ctx.fillStyle = "#FFDAB9";
			ctx.fill();
			ctx.strokeStyle = "#FFDAB9";
			ctx.stroke();
		}