Scribd
Upload
15 views2 pages

Ádasdad

This document contains an HTML page that implements a canvas-based application for practicing arrow key controls. It features a circular canvas with a moving dot that responds to arrow key presses, allowing users to control the dot's position around the circle. The application uses JavaScript to handle key events and update the dot's angle accordingly.

Uploaded by

lega7255
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views2 pages

Ádasdad

This document contains an HTML page that implements a canvas-based application for practicing arrow key controls. It features a circular canvas with a moving dot that responds to arrow key presses, allowing users to control the dot's position around the circle. The application uses JavaScript to handle key events and update the dot's angle accordingly.

Uploaded by

lega7255
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Key Circle Practice</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f9;
}
canvas {
background: white;
border: 2px solid #333;
border-radius: 50%;
}
</style>
</head>
<body>
<canvas id="circleCanvas" width="400" height="400"></canvas>

<script>
const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');

const centerX = canvas.width / 2;


const centerY = canvas.height / 2;
const radius = 150;

let angle = 0; // starting angle (in radians)

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
ctx.stroke();

// Draw moving dot


const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
}

function updatePosition(direction) {
const step = Math.PI / 18; // 10 degrees per press
if (direction === 'left') {
angle -= step;
} else if (direction === 'right') {
angle += step;
} else if (direction === 'up') {
angle -= step;
} else if (direction === 'down') {
angle += step;
}
draw();
}

// Listen for arrow keys


document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') updatePosition('left');
if (e.key === 'ArrowRight') updatePosition('right');
if (e.key === 'ArrowUp') updatePosition('up');
if (e.key === 'ArrowDown') updatePosition('down');
});

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

You might also like