|
<!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" /> |
|
<style> |
|
canvas { |
|
border: 1px solid black; |
|
display: block; |
|
margin: 50px auto; |
|
} |
|
iframe { |
|
width: 100%; |
|
height: 500px; |
|
border: 1px solid black; |
|
} |
|
</style> |
|
</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> |
|
<iframe src="https://app.cu.bzh/" frameborder="0" sandbox="allow-scripts allow-same-origin allow-modals"></iframe> |
|
<canvas id="gameCanvas" width="400" height="400"></canvas> |
|
<script> |
|
const canvas = document.getElementById('gameCanvas'); |
|
const ctx = canvas.getContext('2d'); |
|
|
|
let circle = { |
|
x: 200, |
|
y: 200, |
|
radius: 20, |
|
speed: 5 |
|
}; |
|
|
|
function drawCircle() { |
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
ctx.beginPath(); |
|
ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); |
|
ctx.fillStyle = 'red'; |
|
ctx.fill(); |
|
ctx.closePath(); |
|
} |
|
|
|
document.addEventListener('keydown', (e) => { |
|
switch (e.key) { |
|
case 'ArrowUp': |
|
circle.y -= circle.speed; |
|
break; |
|
case 'ArrowDown': |
|
circle.y += circle.speed; |
|
break; |
|
case 'ArrowLeft': |
|
circle.x -= circle.speed; |
|
break; |
|
case 'ArrowRight': |
|
circle.x += circle.speed; |
|
break; |
|
} |
|
drawCircle(); |
|
}); |
|
|
|
drawCircle(); |
|
|
|
</script> |
|
</div> |
|
</body> |
|
</html> |
|
|
