communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Table des matières
html5-坦克大战
小球上下左右移动
Maison interface Web Tutoriel H5 Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

黄舟
黄舟
Jan 22, 2017 am 10:55 AM

Dans l'article précédent, nous avons présenté les connaissances de base sur Canvas et utilisé Canvas pour dessiner divers graphiques et images. Sur la base de l'article précédent, nous allons créer un jeu de combat de chars basé sur HTML5.

1. Utilisez Canvas pour dessiner notre réservoir

La structure du réservoir que nous avons conçu est comme indiqué dans l'image ci-dessous. Si certains amis ont de meilleurs designs, j'espère partager et communiquer avec eux.

Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

Comme le montre l'image ci-dessus, notre réservoir est essentiellement composé de trois rectangles, d'un cercle et d'un segment de ligne. La taille de chaque composant est marquée en px , utilisons. les connaissances mentionnées dans l'article précédent pour dessiner notre réservoir Remarque : lorsque nous dessinons le réservoir, nous devons choisir ici un point de référence le coin supérieur gauche du réservoir, comme indiqué sur l'image.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"/> 

</head> 

<body> 

<h1 id="html-坦克大战">html5-坦克大战</h1> 

<!--坦克大战的战场--> 

<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> 

<script type="text/javascript"> 

    //得到画布 

    var canvas1 = document.getElementById("tankMap"); 

       

    //定义一个位置变量 

    var heroX = 80; 

    var heroY = 80; 

       

    //得到绘图上下文 

    var cxt = canvas1.getContext("2d"); 

    //设置颜色 

    cxt.fillStyle="#BA9658"; 

    //左边的矩形 

    cxt.fillRect(heroX,heroY,5,30); 

    //右边的矩形 

    cxt.fillRect(heroX+17,heroY,5,30); 

    //画中间的矩形 

    cxt.fillRect(heroX+6,heroY+5,10,20); 

    //画出坦克的盖子 

    cxt.fillStyle="#FEF26E"; 

    cxt.arc(heroX+11,heroY+15,5,0,360,true); 

    cxt.fill(); 

    //画出炮筒 

    cxt.strokeStyle="#FEF26E"; 

    cxt.lineWidth=1.5; 

    cxt.beginPath(); 

    cxt.moveTo(heroX+11,heroY+15); 

    cxt.lineTo(heroX+11,heroY); 

    cxt.closePath(); 

    cxt.stroke(); 

       

       

</script> 

</body> 

</html>

Copier après la connexion

Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

2. Comment faire bouger le tank ?

Avant d'étudier comment faire bouger le tank, étudions d'abord comment faire bouger une petite balle grâce au clavier.

Nous ajoutons d'abord une fonction d'écoute à la balise

1

<body onkeydown="test()">

Copier après la connexion
Fonction d'écoute

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//现在按键盘上ASDW移动小球 

//说明：当我们按下一个键，实际上触发了一个onkeydown事件 

function test(){ 

    var code = event.keyCode;  //键盘上字幕的ASCII码 

    switch(code){ 

        case 87: 

            ballY--; 

            break; 

        case 68: 

            ballX++; 

            break; 

        case 83: 

            ballY++; 

            break; 

        case 65: 

            ballX--; 

            break; 

    } 

    //重新绘制 

    drawBall(); 

}

Copier après la connexion
Nous pouvons définir deux variables globales en externe pour les représenter respectivement Les coordonnées de l'axe x et de l'axe y sont ensuite modifiées en modifiant les valeurs de ballX et ballY pour changer la position de la balle. Nous utilisons la touche WDSA du clavier pour la contrôler. L'effet est très. étrange, comme indiqué ci-dessous :

Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

Nous n'avons pas effacé la balle à la position précédente lors du tirage. Nous devons l'effacer avant de redessiner à chaque fois. Le code complet est affiché ci-dessous :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

   

   

<meta charset="utf-8"> 

   

<!--当按键后，去调用test--> 

<body onkeydown="test()"> 

<h1 id="小球上下左右移动">小球上下左右移动</h1> 

<canvas id="test" width="400px" height="300px" style="background-color:black"> 

</canvas> 

<script type="text/javascript"> 

   

    //得到画布 

    var canvas1 = document.getElementById("test"); 

       

    //定义一个位置变量 

    var ballX = 80; 

    var ballY = 80; 

       

    //得到绘图上下文 

    var cxt = canvas1.getContext("2d"); 

    drawBall(); 

    function drawBall(){ 

        //画出一个红色的圆球 

        cxt.beginPath();  //要注意闭合路径 

        cxt.fillStyle="#FF0000"; 

        cxt.arc(ballX,ballY,10,0,360,true); 

        cxt.closePath(); 

        cxt.fill(); 

    } 

       

    //现在按键盘上ASDW移动小球 

    //说明：当我们按下一个键，实际上触发了一个onkeydown事件 

    function test(){ 

        var code = event.keyCode;  //键盘上字幕的ASCII码 

        switch(code){ 

            case 87: 

                ballY--; 

                break; 

            case 68: 

                ballX++; 

                break; 

            case 83: 

                ballY++; 

                break; 

            case 65: 

                ballX--; 

                break; 

        } 

        //把画布清理 

        cxt.clearRect(0,0,400,300); 

        //重新绘制 

        drawBall(); 

    } 

</script> 

  

Copier après la connexion
3. Laissons notre tank bouger


Ce serait très facile si notre tank ne se déplaçait que dans une seule direction. le code ci-dessus pour dessiner un char. Avant de faire bouger le char, la première chose à considérer est de savoir comment faire tourner le char autour de son centre dans toutes les directions. D'accord, publions l'image ci-dessus et analysons-la.

Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

Je n'entrerai pas dans les détails du processus de calcul détaillé. Je pense que tout le monde est bon en mathématiques. Calculez les coordonnées et les positions de chaque composant en fonction des proportions dans le. photo ci-dessus. Une fois le char tourné, la méthode de dessin est la suivante :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//设置颜色 

cxt.fillStyle="#BA9658"; 

//上边的矩形 

cxt.fillRect(tank.x-4,tank.y+4,30,5); 

//下边的矩形 

cxt.fillRect(tank.x-4,tank.y+17+4,30,5); 

//画中间的矩形 

cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10); 

//画出坦克的盖子 

cxt.fillStyle="#FEF26E"; 

cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true); 

cxt.fill(); 

//画出炮筒 

cxt.strokeStyle="#FEF26E"; 

cxt.lineWidth=1.5; 

cxt.beginPath(); 

cxt.moveTo(tank.x+15-4,tank.y+11+4); 

if(tank.direct==1){         //只是炮筒的方向不同 

    cxt.lineTo(tank.x+30-4,tank.y+11+4); 

}else{ 

    cxt.lineTo(tank.x-4,tank.y+11+4); 

} 

cxt.closePath(); 

cxt.stroke();

Copier après la connexion
D'accord, nous constatons maintenant que seule la direction du canon du pistolet est différente lorsque le char est orienté vers la gauche et vers la droite. la direction du canon du pistolet est différente lorsqu'il est orienté vers le haut et vers le bas. À ce stade, nous pouvons diviser les quatre directions en deux situations, puis traiter chaque petite situation. En même temps, le code est encapsulé avec des idées OO. Le code est le suivant :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"/> 

</head> 

<body onkeydown="getCommand();"> 

<h1 id="html-坦克大战">html5-坦克大战</h1> 

<!--坦克大战的战场--> 

<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> 

<script type="text/javascript"> 

    //定义一个Hero类(后面还要改进） 

    //x表示坦克的横坐标 

    //y表示纵坐标 

    //direct表示方向 

    function Hero(x,y,direct){ 

        this.x=x; 

        this.y=y; 

        this.speed=1; 

        this.direct=direct; 

        //上移 

        this.moveUp=function(){ 

            this.y-=this.speed; 

            this.direct=0; 

        } 

        //右移 

        this.moveRight=function(){ 

            this.x+=this.speed; 

            this.direct=1; 

        } 

        //下移 

        this.moveDown=function(){ 

            this.y+=this.speed; 

            this.direct=2; 

        } 

        //左移 

        this.moveLeft=function(){ 

            this.x-=this.speed; 

            this.direct=3; 

        } 

    } 

   

   

    //得到画布 

    var canvas1 = document.getElementById("tankMap"); 

    //得到绘图上下文 

    var cxt = canvas1.getContext("2d"); 

       

    //我的tank 

    //规定0向上、1向右、2向下、3向左 

    var hero = new Hero(40,40,0); 

    drawTank(hero); 

    //绘制坦克 

    function drawTank(tank){ 

        //考虑方向 

        switch(tank.direct){ 

            case 0:     //向上 

            case 2:     //向下 

                //设置颜色 

                cxt.fillStyle="#BA9658"; 

                //左边的矩形 

                cxt.fillRect(tank.x,tank.y,5,30); 

                //右边的矩形 

                cxt.fillRect(tank.x+17,tank.y,5,30); 

                //画中间的矩形 

                cxt.fillRect(tank.x+6,tank.y+5,10,20); 

                //画出坦克的盖子 

                cxt.fillStyle="#FEF26E"; 

                cxt.arc(tank.x+11,tank.y+15,5,0,360,true); 

                cxt.fill(); 

                //画出炮筒 

                cxt.strokeStyle="#FEF26E"; 

                cxt.lineWidth=1.5; 

                cxt.beginPath(); 

                cxt.moveTo(tank.x+11,tank.y+15); 

                if(tank.direct==0){         //只是炮筒的方向不同 

                    cxt.lineTo(tank.x+11,tank.y); 

                }else{ 

                    cxt.lineTo(tank.x+11,tank.y+30); 

                } 

                cxt.closePath(); 

                cxt.stroke(); 

                break; 

            case 1: 

            case 3: 

                //设置颜色 

                cxt.fillStyle="#BA9658"; 

                //上边的矩形 

                cxt.fillRect(tank.x-4,tank.y+4,30,5); 

                //下边的矩形 

                cxt.fillRect(tank.x-4,tank.y+17+4,30,5); 

                //画中间的矩形 

                cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10); 

                //画出坦克的盖子 

                cxt.fillStyle="#FEF26E"; 

                cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true); 

                cxt.fill(); 

                //画出炮筒 

                cxt.strokeStyle="#FEF26E"; 

                cxt.lineWidth=1.5; 

                cxt.beginPath(); 

                cxt.moveTo(tank.x+15-4,tank.y+11+4); 

                if(tank.direct==1){         //只是炮筒的方向不同 

                    cxt.lineTo(tank.x+30-4,tank.y+11+4); 

                }else{ 

                    cxt.lineTo(tank.x-4,tank.y+11+4); 

                } 

                cxt.closePath(); 

                cxt.stroke(); 

                break;   

        } 

           

    } 

       

    //接收用户按键的函数 

    function getCommand(){ 

        var code = event.keyCode;  //键盘上字幕的ASCII码 

        switch(code){ 

            case 87: 

                hero.moveUp(); 

                break; 

            case 68: 

                hero.moveRight(); 

                break; 

            case 83: 

                hero.moveDown(); 

                break; 

            case 65: 

                hero.moveLeft(); 

                break; 

        } 

        //把画布清理 

        cxt.clearRect(0,0,400,300); 

        //重新绘制 

        drawTank(hero); 

    } 

</script> 

</body> 

</html>

Copier après la connexion


Le chemin de Xiaoqiang vers le développement mobile HTML5 (7) – Tank Battle Game 1

Ce qui précède est celui de Xiaoqiang. Chemin de développement mobile HTML5 (7) —— Contenu du jeu Tank Battle 1. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour
3 Il y a quelques semaines By DDD
Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?
2 Il y a quelques semaines By DDD
Inzoi: Comment postuler à l'école et à l'université
3 Il y a quelques semaines By DDD
Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?
2 Il y a quelques semaines By DDD
Roblox: Dead Rails - Comment invoquer et vaincre Nikola Tesla
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7814
15
Tutoriel Java
1646
14
Tutoriel CakePHP
1402
52
Tutoriel Laravel
1300
25
Tutoriel PHP
1238
29
Afficher plus
Related knowledge
Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles