Update index.html
Browse files- index.html +49 -0
index.html
CHANGED
|
@@ -5,6 +5,13 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width" />
|
| 6 |
<title>My static Space</title>
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<div class="card">
|
|
@@ -14,6 +21,48 @@
|
|
| 14 |
Also don't forget to check the
|
| 15 |
<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
|
| 16 |
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
</div>
|
| 18 |
</body>
|
| 19 |
</html>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width" />
|
| 6 |
<title>My static Space</title>
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
| 8 |
+
<style>
|
| 9 |
+
canvas {
|
| 10 |
+
border: 1px solid black;
|
| 11 |
+
display: block;
|
| 12 |
+
margin: 50px auto;
|
| 13 |
+
}
|
| 14 |
+
</style>
|
| 15 |
</head>
|
| 16 |
<body>
|
| 17 |
<div class="card">
|
|
|
|
| 21 |
Also don't forget to check the
|
| 22 |
<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
|
| 23 |
</p>
|
| 24 |
+
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
| 25 |
+
<script>
|
| 26 |
+
const canvas = document.getElementById('gameCanvas');
|
| 27 |
+
const ctx = canvas.getContext('2d');
|
| 28 |
+
|
| 29 |
+
let circle = {
|
| 30 |
+
x: 200,
|
| 31 |
+
y: 200,
|
| 32 |
+
radius: 20,
|
| 33 |
+
speed: 5
|
| 34 |
+
};
|
| 35 |
+
|
| 36 |
+
function drawCircle() {
|
| 37 |
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
|
| 38 |
+
ctx.beginPath();
|
| 39 |
+
ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
|
| 40 |
+
ctx.fillStyle = 'red';
|
| 41 |
+
ctx.fill();
|
| 42 |
+
ctx.closePath();
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
document.addEventListener('keydown', (e) => {
|
| 46 |
+
switch (e.key) {
|
| 47 |
+
case 'ArrowUp':
|
| 48 |
+
circle.y -= circle.speed;
|
| 49 |
+
break;
|
| 50 |
+
case 'ArrowDown':
|
| 51 |
+
circle.y += circle.speed;
|
| 52 |
+
break;
|
| 53 |
+
case 'ArrowLeft':
|
| 54 |
+
circle.x -= circle.speed;
|
| 55 |
+
break;
|
| 56 |
+
case 'ArrowRight':
|
| 57 |
+
circle.x += circle.speed;
|
| 58 |
+
break;
|
| 59 |
+
}
|
| 60 |
+
drawCircle();
|
| 61 |
+
});
|
| 62 |
+
|
| 63 |
+
drawCircle(); // Initial draw
|
| 64 |
+
|
| 65 |
+
</script>
|
| 66 |
</div>
|
| 67 |
</body>
|
| 68 |
</html>
|