 [CANVAS] Mini gra. Kwadrat poruszający się po łuku |
| [CANVAS] Mini gra. Kwadrat poruszający się po łuku |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 5 Pomógł: 0 Dołączył: 15.11.2010 Ostrzeżenie: (0%) 
 |
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 (IMG:style_emoticons/default/sad.gif)
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> |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 205 Pomógł: 43 Dołączył: 5.03.2012 Ostrzeżenie: (0%)
|
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/ Ten post edytował lukasz1985 18.02.2014, 16:37:28 |
|
|
|
 |
|
Aktualny czas: 25.08.2025 - 16:25 |
