Forum PHP.pl > [CANVAS] Mini gra. Kwadrat poruszający się po łuku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CANVAS] Mini gra. Kwadrat poruszający się po łuku

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

sergieus

18.02.2014, 15:51:56

Witam chciałem napisać mini grę w której chodziło by o kliknięcie w kwadracik, w danym przedziale na łuku.. I wtedy zliczała by to jako punkt i wyswietlało ile mamy punktów. Na razie mam cos takiego ale nie wiem jak zabrać się za ruch kwadracika

Kod

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
var i=0;
document.write(i);
</script>
<canvas id="example" width="550" height="250">
Twoja przeglądarka nie obsługuje elementu Canvas.
</canvas>
<script>
function katToRadians(kat) {
return radians = (Math.PI/180)*kat;
}
var example = document.getElementById('example');
var context = example.getContext('2d');
var context2 = example.getContext('2d');

context.fillStyle = "rgb(255,0,0)";
context.fillRect(45, 194, 10, 10);
example.onclick = function() {alert('Click'+i);i++;};
context.arc(200,200,150,katToRadians(0),katToRadians(180),true);
context.stroke();
</script>
</body>
</html>

lukasz1985

18.02.2014, 16:28:12

W skrócie, wygląda to tak:

http://jsfiddle.net/Na3FN/4/

Musisz wykonywać pewną funkcje, która na początku wyczyści kanwas a później narysuje to co ma narysować.

Czyszczenie kanwy na początku jest po to żeby usunąć to, co wcześniej zostało narysowane (w poprzedniej klatce) inaczej - narysowywałbyś ciągle nowe elementy na to co było w poprzedniej klatce.

We właściwy ruch kwadrata się nie wglębiałem - masz pozycję x i pozycję y (posX i posY), więc trygonometrię ruchu po kole zostawiam Tobie.

EDIT: Chociaż jednak z ruchem po kole : http://jsfiddle.net/Na3FN/5/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.