"Jogo" ligar frases

eurobot

eurobot

Power Member
Boas,
Estou a desenvolver um site para um trabalho de Português, e queria fazer um "jogo" para esse mesmo site que envolvia ligar o nome das personagens às suas descrições, idealmente a estrutura seria algo como:
Personagem x. .Descrição personagem y.
Personagem y. .Descrição personagem z.
Personagem z. .Descrição personagem x.
E o utilizador teria de ligar com linhas a personagem à descrição, e já escrevi isto em javascript para a pontuação:
Código: 
<script type="text/JavaScript">
<!--
var n = 0
if(Personagem x corresponder a descrição x.){
	n++};
if(Personagem y corresponder a descrição y.){
	n++};
if(Personagem z corresponder a descrição z.){
	n++};


document.write("Your score was ")
document.write(n)
document.write("Out of 4 points!")
if(n<5){
	document.write("You suck!")};
if(5<=n<7){
	document.write("It could have been better")};
if(7<=n){
	document.write("Well done!")};
//-->
</script>
A minha pergunta é como fazer a parte de ligar as frases de modo a que possa dar informação às condições das if clauses do javascript, qual é a forma mais fácil de fazer isto?

Desde já obrigado,
Eurobot
 
Última edição:
A ser honesto, desenhar linhas no browser, não é tão simples como parece.

A forma mais fácil será a usares a tag de <canvas> no HTML (ex. http://jsbin.com/esuhiw/edit#javascript,html - clicka em render e desenha) no entanto isso complica um bocado as coisas depois, ou seja, a forma de incluires textos e imagens de forma a que possas saber as suas coordenadas e puder interagir com eles…
Não é impossivel, mas secalhar um bocado mais complicado do que estas a pensar à partida.
Outro contra desta abordagem, é que não funciona em browsers antigos.

No entanto se quiseres tentar, http://dev.opera.com/articles/view/html-5-canvas-the-basics este artigo deve-te dar os básicos para posicionares todas as imagens e textos que precisas.
 
ImAnAlcoholic disse:
A ser honesto, desenhar linhas no browser, não é tão simples como parece.

A forma mais fácil será a usares a tag de <canvas> no HTML (ex. http://jsbin.com/esuhiw/edit#javascript,html - clicka em render e desenha) no entanto isso complica um bocado as coisas depois, ou seja, a forma de incluires textos e imagens de forma a que possas saber as suas coordenadas e puder interagir com eles…
Não é impossivel, mas secalhar um bocado mais complicado do que estas a pensar à partida.
Outro contra desta abordagem, é que não funciona em browsers antigos.

No entanto se quiseres tentar, http://dev.opera.com/articles/view/html-5-canvas-the-basics este artigo deve-te dar os básicos para posicionares todas as imagens e textos que precisas.
Clicar para expandir...
Muito obrigado, vou começar a ler, btw, será que isto vai funcionar num ipad2?
 
ImAnAlcoholic disse:
Tal e qual como está, não vai funcionar no iPad.
Algum refactoring ajuda: http://jsbin.com/esuhiw/43/edit (não tenho aqui iPad para testar, mas no simulador, nao apresentou problemas…)
Clicar para expandir...
Muito obrigado.
Também preciso de desenhar mecânicas para outros três tipos de "jogos" diferentes, tentei fazer um sketch dos três para se perceber melhor:
http://postimage.org/image/xu19gjpet/
 Alguém me pode dizer que tipo de tecnologias é que tenho de usar para isto? Claro que não estou à espera que me metam o código feito nas mãos mas se me puderem mostrar exemplos, que usem o mesmo tipo de técnicas, ou qualquer tipo de fontes que me ajudem nisto agradecia, eu gostava de aprender a fazer sites dinâmicos com pés e cabeça mas estou um bocado pressionado de tempo (é para dia 10) por isso se me puderem indicar o que tenho de ler/ver para por isto a funcionar agradecia.
 
ImAnAlcoholic disse:
Mas tens de desenhar linhas ou arrastar elementos para os locais certos?
Clicar para expandir...
Arrastar os elementos, as linhas era só para exemplificar a movimentação, são coisas "simples" acho, um pormenor que é capaz de ser mais complicado é que na time bar, eu quero que os elementos passem a estar na vertical, de resto é bastante straight forward, só não sei mesmo por onde começar...
 
Arrastar elementos é uma lógica completamente diferente de desenhar linhas...
A começar por, aconselho-te a usares uma library de javascript (não é que seja muito dificil arrastar elementos, mas uma library ajuda bastante neste caso especifico)

E já alguem no forum tinha pedido ajuda com arrastar elementos, por isso vou-te dar o mesmo exemplo http://jsbin.com/edoceb/10/edit#javascript,html (clicka em render) nesse caso especifico, a cena era arrastar uma div e guardar a sua posição, ou seja se arrastares e fizeres refresh, a div vai estar na mesma posição em que a deixaste, é um exemplo um bocado diferente, mas deve-te dar um inicio à logica de arrastar objectos.

Repara que estou a usar as libraries de jQuery e jQueryUI para poder arrastar os elementos facilmente.
 
ImAnAlcoholic disse:
Arrastar elementos é uma lógica completamente diferente de desenhar linhas...
A começar por, aconselho-te a usares uma library de javascript (não é que seja muito dificil arrastar elementos, mas uma library ajuda bastante neste caso especifico)

E já alguem no forum tinha pedido ajuda com arrastar elementos, por isso vou-te dar o mesmo exemplo http://jsbin.com/edoceb/10/edit#javascript,html (clicka em render) nesse caso especifico, a cena era arrastar uma div e guardar a sua posição, ou seja se arrastares e fizeres refresh, a div vai estar na mesma posição em que a deixaste, é um exemplo um bocado diferente, mas deve-te dar um inicio à logica de arrastar objectos.

Repara que estou a usar as libraries de jQuery e jQueryUI para poder arrastar os elementos facilmente.
Clicar para expandir...
Muito obrigado, mas confesso que estou um bocado perdido ainda, indo por partes:
O draggable, dragstart e dragstop são funções? Como não estão definidas em lado nenhum presumo que sejam do jQuery certo?
Depois confesso que não percebi muito bem para onde está o script a mandar informação, falas em server-side, não percebo muito bem o que está a acontecer, o movimento é exactamente como eu quero, agora queria que me fosse de alguma forma fornecida informação sobre a localização das divs quando o user resolvesse submeter o posicionamento que lhes tinha dado, de modo a poder compara-las com as posições em que deviam estar e em consequência fornecer um determinado output (algo como o que está no primeiro post deste tópico). Basicamente acho que isto não seria necessário para o que pretendo:
Código: 
   $.ajax('http://couto.jsapp.us/save/', {
                type: 'GET',
                dataType: 'json',
                data: encodeURIComponent(JSON.stringify(positions))
Mas também não sei o que tenho de usar ao invés de isto...
Acabei de encontrar isto na net:
Código: 
<script type="text/javascript"> 
  $(function() {
    $("#d1").draggable({
      drag: function(event, ui) {
         $("#x").val(ui.position.left);
         $("#y").val(ui.position.top);
     }
   });
  });
</script>
É possível usar algo do género com o script que me mostraste?
 
Última edição:
ImAnAlcoholic disse:
http://jsbin.com/ojewez/edit#javascript,html acho que tens a explicação de tudo.
Clicar para expandir...
wow, muito obrigado mesmo, está super bem explicado e conciso.
Com a tua ajuda já consegui fazer tanto o 1 como o 2 (ok, este foi literalmente feito por ti) disto: http://postimage.org/image/xu19gjpet/
 Só me falta mesmo a barra cronológica (3), e a árvore genealógica e gostava de saber se existem ferramentas próprias para esse tipo de coisas no html, ou tenho de usar o canvas? (nem sei se conseguirei com este, mas devo conseguir, mas gostava de saber se existe alguma forma mais directa)
edit:
Lembrei-me agora que talvez pudesse usar uma imagem de fundo com uma tabela com borders invisíveis por cima (para a árvore genealógica), o que acham? possível? Aconselhável?
 
Última edição:
Inicie sessão ou registe-se para poder participar.
Back
Topo