Universidade Estadual de Ponta Grossa
Leticia de Lima Farias
REA SOBRE O JOGO PONG, DARLING.JS
Engenharia de Computação
Algoritmos e Programação
Professor Dierone C. Foltran Jr.
Ponta Grossa
2018
Introdução
Motor de jogo, também conhecido pelo termo em inglês, =
game
engine, ou simplesmente engine, é um programa de computad=
or
e/ou conjunto de bibliotecas, para simplificar e abstrair o desenvolvimento=
de
jogos ou outras aplicações com gráficos em tempo real, para videogames e/ou
computadores rodando sistemas operacionais. E o jogo Pong foi um dos primei=
ros
da história, muitas engines estão no mercado atualmente, e podem ser criada=
s do
zero, para poder melhorar desempenho e gráficos.
JOGO
Pong é um game de esporte
desenvolvido e publicado pela Atari em 1972. Com uma proposta simples que
lembra a dinâmica do pingue-pongue, o título marcou a história dos videogam=
es
por ser o primeiro jogo lucrativo da história. O protótipo que deu certo
idealizado por Allan Alcorn e lançado para rodar inicialmente apenas em
máquinas arcade, na década de 1970. O projeto surgiu a partir do período de
treinamento e desenvolvimento do engenheiro, que não tinha nenhuma experiên=
cia
com jogos eletrônicos. Foi então que Nolan Bushnell, fundador da Atari,
resolveu fazer alguns ajustes pontuais no projeto piloto de Alcorn para
torná-lo mais acessível. Em consequência disso, foram realizados ajustes na
jogabilidade, como melhorias no ângulo da câmera e na física da bolinha pol=
igonal,
para deixar o jogo mais intuitivo. Além disso, Bushnell acrescentou efeitos
sonoros simples, porém relevantes à época, e elevou a velocidade das raquet=
es
virtuais. A premissa de Pong é usar a raquete virtual para rebater a bolinh=
a e
pontuar mais que o adversário. O primeiro jogador a alcançar os 10 pontos f=
ica
com a vitória. Embora Pong tenha sido concebido para proporcionar disputas
acirradas contra o computador, a diversão do game estava concentrada no
multiplayer local para dois usuários. Jogo desenvolvido quase sem módulos
adicionais. É fortemente baseado no exemplo do CraftyJs, mas ao contrário,
quase toda a lógica é baseada no código do usuário. Isso mostra como lidar =
com
seus próprios módulos, sistemas e componentes.
JAVASCRIPT
javaScript é uma linguage=
m de
programação interpretada. Originalmente implementada como parte dos navegad=
ores
web, para que scripts pudessem ser executados do lado do cliente e interagi=
ssem
com o usuário sem a necessidade deste script passar pelo servidor, controla=
ndo o
navegador, realizando comunicação assíncrona e alterando o conteúdo do
documento exibido. É atualmente a principal linguagem para programação
client-side em navegadores web. Começa também a ser bastante utilizada do l=
ado
do servidor através de ambientes como o node.js. Foi concebida para ser uma
linguagem script com orientação a objetos baseada em protótipos, tipagem fr=
aca
e dinâmica e funções de primeira classe. Possui suporte à programação funci=
onal
e apresenta recursos como fechamentos e funções de alta ordem comumente
indisponíveis em linguagens populares como Java e C++. Baseada em ECMAScript
padronizada pela Ecma international nas especificações ECMA-262[3] e ISO/IEC
16262. Tipagem dinâmica Como na maioria das linguagens de script, tipos são
associados com valores, não com variáveis. Por exemplo, a variável x poderia
ser associada a um número e mais tarde associada a uma string. JavaScript
suporta várias formas de testar o tipo de um objeto, incluindo duck typing.
Baseada em objetos JavaScript é quase inteiramente baseada em objetos. Obje=
tos
JavaScript são arrays associativos, aumentados com protótipos. Os nomes da
propriedade de um objeto são strings: obj.x =3D 10 e obj["x"] =3D=
10 são
equivalentes, o ponto neste exemplo é apenas sintático. Propriedades e seus
valores podem ser adicionadas, mudadas, ou deletadas em tempo de execução. A
maioria das propriedades de um objeto (e aqueles em sua cadeia de herança v=
ia
protótipo) pode ser enumerada usando-se uma estrutura de repetição for...in.
JavaScript possui um pequeno número de objetos padrão da linguagem como win=
dow
e document.
Uso em páginas
Web
O uso primário de JavaScr=
ipt
é escrever funções que são embarcadas ou incluídas em páginas HTML e que
interagem com o Modelo de Objeto de Documentos (DOM) da página. Alguns exem=
plos
deste uso são: abrir uma nova janela (dialog) com controle programático sob=
re
seu tamanho, posição e atributos; validar valores de um formulário para
garantir que são aceitáveis antes de serem enviados ao servidor; mudar imag=
ens
à medida que o mouse se movimenta sob elas. Um recurso de interface útil
baseada em janela, é um tipo de janela secundária (“filha”) da tela princip=
al,
ou janela principal, para solicitar ou exibir ao usuário determinadas
informações complementares, semelhante a “caixa de diálogo” (dialog). O caso mais comum é do diálogo modal. P=
elo
fato do código JavaScript rodar localmente no navegador do usuário, e não e=
m um
servidor remoto, o navegador pode responder a tais ações rapidamente, fazen=
do
uma aplicação mais responsiva. Além disso, o código JavaScript pode detectar
ações de usuário que o HTML sozinho não pode, tais como teclas pressionadas
individualmente.
Uma JavaScript engine (ta=
mbém
conhecida como interpretador JavaScript ou uma implementação JavaScript)
interpreta código fonte JavaScript e o executa de forma adequada. Por ser o
JavaScript a única linguagem que a maioria dos navegadores populares suport=
am,
tem se tornado uma linguagem alvo para muitos frameworks em outras linguage=
ns,
a despeito do fato de não ter sido planejado para tal. Não obstante as
limitações de desempenho inerente à sua natureza dinâmica, a crescente
velocidade sendo então uma prática linguagem intermediária.
HTML
HTML – Linguagem de Marca=
ção
de Hipertexto, foi inventada em 1990 pelo cientista Tim Berners-Lee. É uma
linguagem para ser interpretada pelos navegadores. Sua principal finalidade=
é
fazer a estruturação das páginas através de um conjunto de tags (etiquetas)=
que
servem para definir a forma na qual se apresentará o texto e outros element=
os
da página. O HTML pode ser interpretado por diversos dispositivos, como:
desktop, celular, tablets, entre outros, desde que exista um navegador capa=
z de
ler e interpretar o código. Um website é composto por diversas páginas web =
ou
documentos web como também são chamados e cada uma dessas páginas é escrita=
em
uma linguagem própria que é o HTML. Apesar de uma página ser um documento
complexo e geralmente extenso, todos devem compartilhar de uma mesma estrut=
ura
básica e relativamente simples, composto por apenas três tags ou marcações,
como também é conhecida. Assim, as tags <html>, <head> e
<body> são essenciais a qualquer tipo de página e a partir delas que =
se
inicia a construção de qualquer site.
doctype – tipo do documen=
to
<html> – tag princi=
pal,
que marca o início e o final do documento.
<head> – tag usada =
para
delimitar o cabeçalho do documento. Dentro dela outras tags de cabeçalho se=
rão
usadas, como o title, meta, link, entre outros.
<title> – tag usada
para indicar o título do documento.
<body> – tag usada =
para
definir o corpo do documento. Dentro dela serão colocadas as tags que irão
compor a nossa página
ESTRUTURA EM =
HTML
DO JOGO PONG
<!DOCTYPE
html>
Todo HTML precisa ter um
DOCTYPE declarado. O DOCTYPE não é realmente um elemento ou tag HTML. Ele
permite que o navegador saiba como o documento deve ser interpretado, indic=
ando
qual versão ou padrão de HTML (ou outra linguagem de marcação) está sendo
usada. All HTML need to have a DOCTYPE declared. The DOCTYPE is not actuall=
y an
element or HTML tag. It lets the browser know how the document should be
interpreted, by indicating what version or standard of HTML (or other markup
language) is being used. For HTML5 documents (which nearly all new web
documents should be), this needs t=
o be
the first thing in your document, before the <html> or <head>
elements. Also, there is no closing tag.
<html
lang=3D"pt-br">
A tag html faz parte da estrutura básica=
do
documento, esta tag deve ser colocada no início do código do documento e é
usada para indicar ao navegador que se trata de um documento HTML, já que os
navegadores poderão ler outros tipos de documentos. E a língua utilizada no
código.
<head><= o:p>
O elemento <head> é=
um
contêiner para metadados (dados sobre dados) e é colocado entre a tag
<html> e a tag <body>.
Metadados HTML são dados sobre o documento HTML e não são exibidos. =
Os
metadados geralmente definem o título do documento, conjunto de caracteres,
estilos, links, scripts e outras informações meta. As seguintes tags descre=
vem
metadados: <title>, <style>, <meta>, <link>,
<script> e <base>.
<meta
charset=3D"utf-8" />
A tag meta deve estar sem=
pre
dentro da tag head e representa vários tipos de metadados que são informaçõ=
es
que descrevem o conteúdo do seu arquivo, ou seja: dados sobre seus dados.
Exemplos de metadados são: palavras-chave, informações pro Google indexar o=
seu
site, resumo do conteúdo, etc. O atributo charset serve para indicar o form=
ato
de codificação de caracteres utilizado no documento. O Charset existem muit=
os
idiomas no mundo e pessoas que falam idiomas diferentes usam computadores.
Essas pessoas querem usar o computador no idioma delas. E idiomas diferentes
tem caracteres diferentes. Pra cada caracter que a gente digita/lê no
computador, existe uma representação dele em byte na memória. Um código para
ele. Cada charset representa o caracter em memória de uma forma diferente. O
charset UTF-8 é o que usamos na web atual e faz parte de um padrão chamado
Unicode. A ideia é que com ele possamos representar qualquer caractere de
qualquer idioma. Ao usar o charset dentro da tag meta de nosso arquivo esta=
mos
dizendo ao navegador: quando for ler esse arquivo, use as regras do charset
UTF-8.
CANVAS
Dentro de <head > e
<style a interface HTMLCanvasElement fornece propriedades e métodos para
manipular o layout e a apresentação dos elementos da tela. Por exemplo:
HTMLCanvasElement.getContext (). Retorna um contexto de desenho na tela ou =
nulo
se a ID do contexto não for suportada. Um contexto de desenho permite desen=
har
na tela. Chamar getContext com "2d" e retornar um objeto
CanvasRenderingContext2D, enquanto chamá-lo com "experimental-webgl&qu=
ot;
(ou "webgl") retorna um objeto
WebGLRenderingContext. Este contexto está disponível apenas em
navegadores que implementam o WebGL. WebGL (Web Graphics Library) é uma API
(interface de Programação de Aplicações) em JavaScript, disponível a partir=
do
novo elemento canvas da HTML5, que oferece suporte para renderização de grá=
ficos
2D e gráficos 3D.
<body><= o:p>
A tag body faz parte da
estrutura básica do documento, sua finalidade é definir o corpo do document=
o,
ou seja, tudo que estiver dentro da tag body será mostrado de alguma forma =
no
conteúdo da página. A tag <body> possui fechamento, assim como cada t=
ag
possui o seu, </body>, e na sua estrutura deverá ficar todas as demais
tags, exceto as tags de cabeçalho da tag <head>.
<script>=
;
A tag <script> é us=
ada
para definir um script (JavaScript). O elemento contém instruções ou aponta
para um arquivo de script externo por meio do atributo. Usos comuns para
JavaScript são manipulação de imagem, validação de formulário e alterações
dinâmicas de conteúdo. Para selecionar um elemento HTML, o JavaScript usa
frequentemente o método document.getElementById ().
Element
A interface Element é a
classe base mais geral da qual todos os objetos em um Document herda. Ela
somente tem métodos e propriedades comuns para todos os tipos de elementos.
Mais classes específicas herdam de Element. Por exemplo, a interface
HTMLElement é a interface base para elementos HTML. E document.getElementBy=
Id
serve para que o ID do elemento a ser localizado. Seja uma string que
diferencia maiúsculas de minúsculas, exclusiva no documento. Ao contrário de alguns outros métodos de
pesquisa de elementos, getElementById () só está disponível como um método =
do
objeto de documento global. Como os valores de ID devem ser exclusivos em t=
odo
o documento, não há necessidade de versões "locais" da função.
Elementos que não estão no documento não são pesquisados por getElementById=
().
Ao criar um elemento e atribuí-lo a um ID, se deve inserir o elemento na ár=
vore
de documentos com Node.insertBefore () ou um método semelhante antes de pod=
er
acessar.
document.addE=
ventListener
addEventListener() regist=
ra
uma única espera de evento em um único alvo. O alvo do evento pode ser um ú=
nico
elemento em um documento, o documento em si, uma janela.Para registrar mais de uma esper=
a de
evento como alvo, chama-se o addEventListener() para o mesmo alvo mas com
diferentes tipos de evento ou captura de parâmetros.
get.Context
É um DOMString (é uma str=
ing
UTF-16 mapeado diretamente), é um construtor para seqüências de caracteres =
ou
uma sequência de caracteres contendo o contexto identificador definindo o
contexto de desenho associado ao canvas. Os valores possiveis são:
"2d", levando a criação de um objeto CanvasRenderingContext2D
representando uma renderização
bidimensional.
ctx.clearRect=
O método clearRect () lim=
pa
os pixels especificados dentro de um determinado retângulo.
SetInterval
A definição e uso do méto=
do
setInterval chama uma função ou avalia uma expressão em intervalos
especificados (em milissegundos). O método setInterval continuará chamando =
a função
até que clearInterval seja chamado ou a janela seja fechada. O valor de ID
retornado por setInterval é usado como o parâmetro para o método clearInter=
val.
Logo para executar uma função apenas uma vez, após um número especificado de
milissegundos, usa-se o método setTimeout.
FUNÇÕES PARA
FUNCIONAMENTO DO JOGO
function movebloco().
function movebola().
function newgame(winner).=
function desenha().
Conclusão
Pode parecer que a única
novidade é a marcação canvas, mas por trás disso o HTML5 implementa aprendi=
zado
no desempenho e gráficas, além de definir melhor o padrão para desenvolvime=
nto
web. A biblioteca do jogo pronto pode ter sido reduzida muito do código aqui
original, observado na engine, mas a ideia era mostrar como fazer a estrutu=
ra
funcional do jogo utilizando o que já está disponível por padrão nos
navegadores. A vantagem de fazer exemplos e testes com os recursos do HTML5=
é
que você acaba aprendendo mais do que usando direto uma biblioteca, que vai
ocultar muitas dessas coisas para simplificar o seu trabalho. Outra vantage=
m é
que, por ser HTML, você pode rodar isso em qualquer coisa que tenha um
navegador.
|
|
|
|
|
|
|
|