Spaces:

miya3333
/

DiscoveringNumbersGame

Running

App Files Files Community

miya3333 commited on Apr 19

Commit

6a7997c

verified ·

1 Parent(s): 99d898e

Upload 5 files

Browse files

Files changed (5) hide show

app.py +15 -0
index.html +18 -18
run.sh +5 -0
script.js +177 -0
style.css +65 -18

app.py ADDED Viewed

	@@ -0,0 +1,15 @@

+import http.server
+import socketserver
+import os
+# Define the port Spaces expects applications to run on
+PORT = int(os.environ.get("PORT", 7860))
+DIRECTORY = "."
+class Handler(http.server.SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=DIRECTORY, **kwargs)
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"Serving directory {DIRECTORY} at port {PORT}")
+    httpd.serve_forever()

index.html CHANGED Viewed

@@ -1,19 +1,19 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>数字を発見するゲーム</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <div id="gameInfo">
+      探す数字: <span id="target">--</span>
+    </div>
+    <button id="startBtn">ゲーム開始</button>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <div id="message"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
 </html>

run.sh ADDED Viewed

	@@ -0,0 +1,5 @@

+```bash
+#!/bin/bash
+# Execute the Python script
+python app.py

script.js ADDED Viewed

	@@ -0,0 +1,177 @@

+(function(){
+  const canvas = document.getElementById('gameCanvas');
+  const ctx = canvas.getContext('2d');
+  const targetSpan = document.getElementById('target');
+  const startBtn = document.getElementById('startBtn');
+  const messageDiv = document.getElementById('message');
+  let items = [];
+  let remaining = [];
+  let currentTarget = null;
+  const count = 30;
+  const fontSize = 24;
+  ctx.textBaseline = 'alphabetic';
+  ctx.font = fontSize + 'px sans-serif';
+  function isOverlapping(x, y, w, h, arr) {
+    return arr.some(item => {
+      return x < item.x + item.width &&
+             x + w > item.x &&
+             y - h < item.y &&
+             y > item.y - item.height;
+    });
+  }
+  function initGame() {
+    items = [];
+    messageDiv.textContent = '';
+    messageDiv.className = '';
+    targetSpan.textContent = '--';
+    for (let i = 1; i <= count; i++) {
+      const text = i.toString();
+      const metrics = ctx.measureText(text);
+      const width = metrics.width;
+      const height = fontSize;
+      let x, y, attempts = 0;
+      do {
+        x = Math.random() * (canvas.width - width);
+        y = Math.random() * (canvas.height - height) + height;
+        attempts++;
+        if (attempts > 1000) break;
+      } while (isOverlapping(x, y, width, height, items));
+      const angle = Math.random() * 2 * Math.PI;
+      items.push({ num: i, x, y, width, height, angle });
+    }
+    remaining = items.slice();
+    drawAll();
+    pickNext();
+  }
+  function drawAll() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#000';
+    remaining.forEach(item => {
+      ctx.save();
+      const cx = item.x + item.width / 2;
+      const cy = item.y - item.height / 2;
+      ctx.translate(cx, cy);
+      ctx.rotate(item.angle);
+      ctx.fillText(item.num, -item.width / 2, item.height / 2);
+      ctx.restore();
+    });
+  }
+  function pickNext() {
+    if (remaining.length === 0) {
+      currentTarget = null;
+      targetSpan.textContent = '--';
+      messageDiv.className = 'clear';
+      messageDiv.textContent = 'ゲームクリア！';
+      return;
+    }
+    const idx = Math.floor(Math.random() * remaining.length);
+    currentTarget = remaining[idx].num;
+    targetSpan.textContent = currentTarget;
+  }
+  function repositionItems() {
+    const newItems = [];
+    remaining.forEach(orig => {
+      const { num, width, height } = orig;
+      let x, y, attempts = 0;
+      do {
+        x = Math.random() * (canvas.width - width);
+        y = Math.random() * (canvas.height - height) + height;
+        attempts++;
+        if (attempts > 1000) break;
+      } while (isOverlapping(x, y, width, height, newItems));
+      const angle = Math.random() * 2 * Math.PI;
+      newItems.push({ num, x, y, width, height, angle });
+    });
+    return newItems;
+  }
+  function animateReposition(oldItems, newItems, duration, callback) {
+    const startTime = performance.now();
+    function animate(time) {
+      const t = Math.min((time - startTime) / duration, 1);
+      remaining = oldItems.map((oldItem, i) => {
+        const newItem = newItems[i];
+        return {
+          num: oldItem.num,
+          width: oldItem.width,
+          height: oldItem.height,
+          x: oldItem.x + (newItem.x - oldItem.x) * t,
+          y: oldItem.y + (newItem.y - oldItem.y) * t,
+          angle: oldItem.angle + (newItem.angle - oldItem.angle) * t
+        };
+      });
+      drawAll();
+      if (t < 1) requestAnimationFrame(animate);
+      else callback();
+    }
+    requestAnimationFrame(animate);
+  }
+  function drawRedCircle(item) {
+    const cx = item.x + item.width / 2;
+    const cy = item.y - item.height / 2;
+    const r = Math.max(item.width, item.height) / 2 + 5;
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.stroke();
+  }
+  function drawRedCross(item) {
+    const x1 = item.x;
+    const y1 = item.y - item.height;
+    const x2 = item.x + item.width;
+    const y2 = item.y;
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.moveTo(x1, y2);
+    ctx.lineTo(x2, y1);
+    ctx.stroke();
+  }
+  canvas.addEventListener('click', e => {
+    if (currentTarget === null) return;
+    const rect = canvas.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const clickY = e.clientY - rect.top;
+    for (let i = 0; i < remaining.length; i++) {
+      const item = remaining[i];
+      if (clickX >= item.x && clickX <= item.x + item.width &&
+          clickY <= item.y && clickY >= item.y - item.height) {
+        if (item.num === currentTarget) {
+          messageDiv.className = 'correct';
+          messageDiv.textContent = '正解！';
+          drawAll();
+          drawRedCircle(item);
+          setTimeout(() => {
+            remaining.splice(i, 1);
+            const oldItems = remaining.map(it => ({ ...it }));
+            const newItems = repositionItems();
+            animateReposition(oldItems, newItems, 1000, () => {
+              remaining = newItems;
+              pickNext();
+            });
+          }, 500);
+        } else {
+          messageDiv.className = 'wrong';
+          messageDiv.textContent = '違うよ！';
+          drawAll();
+          drawRedCross(item);
+          setTimeout(drawAll, 500);
+        }
+        return;
+      }
+    }
+  });
+  startBtn.addEventListener('click', initGame);
+})();

style.css CHANGED Viewed

@@ -1,28 +1,75 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+* {
+  box-sizing: border-box;
+}
 body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #ece9e6, #ffffff);
+  font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
+  color: #333;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 100vh;
 }
+.container {
+  width: 90%;
+  max-width: 900px;
+  margin-top: 40px;
+  text-align: center;
 }
+#gameInfo {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  background: #fff;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: inline-block;
 }
+#startBtn {
+  background: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  display: block;
+  margin: 0 auto 1rem;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: background 0.3s ease;
+}
+#startBtn:hover {
+  background: #45a049;
 }
+canvas {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  display: block;
+}
+#message {
+  margin-top: 1rem;
+  font-size: 1.25rem;
+  min-height: 1.5em;
+}
+#message.correct {
+  color: #28a745;
+}
+#message.wrong {
+  color: #dc3545;
+}
+#message.clear {
+  color: #17a2b8;
 }