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

No:138

265

←

Prev Next

→

darts
Developer User2524｜Date and time 23/5/25 18:44:50
Build time 92.788 sec｜Game capacity 2.706KB｜

Script

ダーツゲーム

スコア: 0

このコードは、ダーツゲームの実装を示しています。プレイヤーは「投げる」ボタンをクリックしてダーツを投げます。ダーツはランダムな位置に着地し、着地位置によってポイントが加算されます。赤い円の内側に着地した場合は50ポイント、外側に着地した場合は25ポイントとなります。スコアは画面上部に表示されます。ゲームは、スマートフォンのブラウザ上でプレイできます。絵文字は利用していませんが、カラフルな図形を使用してゲームの楽しさを表現しています。

←

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 {
			text-align: center;
			background-color: #FFC107;
		}
		h1 {
			font-size: 36px;
			margin-top: 30px;
			margin-bottom: 20px;
		}
		canvas {
			border: 5px solid #000000;
			width: 70%;
			max-width: 500px;
			height: auto;
		}
		#scoreBoard {
			font-size: 24px;
			margin-bottom: 30px;
		}
		button {
			font-size: 24px;
			background-color: #4CAF50;
			color: #FFFFFF;
			padding: 10px;
			margin: 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>ダーツゲーム</h1>
	<canvas id="canvas"></canvas>
	<div id="scoreBoard">スコア: 0</div>
	<button id="throwButton" onclick="throwDart()">投げる</button>
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

var score = 0;
		var dartX = 0;
		var dartY = 0;

function drawDartboard() {
			context.beginPath();
			context.arc(canvas.width/2, canvas.height/2, canvas.width/3, 0, Math.PI*2);
			context.fillStyle = "#FFFFFF";
			context.fill();
			context.lineWidth = 10;
			context.strokeStyle = "#000000";
			context.stroke();

context.beginPath();
			context.arc(canvas.width/2, canvas.height/2, canvas.width/6, 0, Math.PI*2);
			context.fillStyle = "#FF0000";
			context.fill();
			context.stroke();
		}

function drawDart() {
			context.beginPath();
			context.arc(dartX, dartY, 10, 0, Math.PI*2);
			context.fillStyle = "#000000";
			context.fill();
		}

function throwDart() {
			dartX = Math.random() * canvas.width;
			dartY = Math.random() * canvas.height;

var distanceFromCenter = Math.sqrt(Math.pow(dartX-canvas.width/2, 2) + Math.pow(dartY-canvas.height/2, 2));

if (distanceFromCenter <= canvas.width/6) {
				score += 50;
			} else if (distanceFromCenter <= canvas.width/3) {
				score += 25;
			}

document.getElementById("scoreBoard").innerHTML = "スコア: " + score;

drawDartboard();
			drawDart();
		}

drawDartboard();
	</script>
</body>
</html>