Comment ajouter du mouvement réaliste de votre jeu de html5

Jeter un coup d'œil à space.html

Sommaire

. Ce jeu simple fournit un bon exemple pour appliquer un mouvement réaliste de votre jeu HTML5. Il utilise le système de contrôle rendu célèbre dans les jeux classiques Astéroïdes et Spacewar! (Bien Astéroïdes est mieux connu, Spacewar! est de loin le jeu plus tôt et plus influente.)

image0.jpg

Cliquez ici pour obtenir la pleine expérience.

Comment ajouter un vecteur de force à l'objet de votre jeu

Le navire est commandé par les touches fléchées, mais l'effet de Newton est plus facile de voir dans l'espace que sur le terrain (pas de forces de traînée embêtants pour obtenir de la manière). La gauche; et à droite; touches fléchées tournent le navire, mais ils ne touchent pas le mouvement du navire. La flèche vers le haut déclenche une fusée, ce qui ajoute un vecteur de force dans la direction du navire est actuellement confronté.

Voici le code:

espace

Comment simuler l'espace dans votre jeu




Voici le résumé:

  1. Commencer l'exemple de la manière habituelle.

    Comme la plupart simpleGame démos, commencent par un sprite et une scène. Parce que le navire aura une méthode personnalisée, vous en faire un objet unique.

  2. Donnez un navire (checkKeysMéthode).

    La checkKeys () méthode cherche touches et modifie le comportement du navire en conséquence.

  3. Modifiez l'angle de l'image.

    Un sprite a fait deux angles distincts. Elle peut avoir un angle de pointage qu'il est (appelé le imgAngle dans simpleGame) Et l'angle ça bouge (appelé moveAngle). Lorsque vous modifiez l'angle, vous décidez de changer à la fois le mouvement et les angles de l'image sur l'hypothèse que l'objet sera tout simplement voyager dans la direction qu'il fait face.

    Pour des exemples simples, cela est très bien, mais de nombreux types de mouvement nécessite découplage des images et de mouvement angles. La changeImgAngleBy () méthode vous permet de changer la direction de l'image pointe sans changer l'angle de mouvement. (Il y a un changeMotionAngle () Procédé, aussi, mais il n'a pas été utilisé très souvent).

  4. Ajouter un vecteur de force pour simuler la poussée.

    Lorsque l'utilisateur appuie sur la flèche vers le haut, le navire tire ses principales roquettes. Cela ajoute un vecteur de force petite dans la direction du navire est actuellement confronté. Utilisez le getImgAngle () méthode pour déterminer la direction du navire est actuellement confronté, et d'utiliser cette valeur pour spécifier où la force doit être ajouté.

    Parce que ce code se passe dans la boucle de l'animation et est amplifié comme la clé de flèche est maintenu enfoncé, seule une très petite force est nécessaire.


» » » » Comment ajouter du mouvement réaliste de votre jeu de html5