Tutoriel sur la création d'un effet pierre-papier-ciseaux en HTML5-js tutoriel-php.cn

Tutoriel sur la création d'un effet pierre-papier-ciseaux en HTML5

php中世界最好的语言

Libérer： 2017-12-02 11:38:46

original

3122 Les gens l'ont consulté

Je crois que tout le monde a joué au jeu pierre-papier-ciseaux. Aujourd'hui, je vais vous apporter un code pour le jeu HTML5 pierre-papier-ciseaux basé sur angulaire.js. jeu de combat de machines. L'utilisateur peut choisir l'une des options : ciseaux, pierre ou papier, et l'ordinateur sélectionnera au hasard une option pour concourir. Ensuite, jetons un coup d'œil au code source

<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="default">
         <meta name="msapplication-tap-highlight" content="no">
         <title>html5制作剪刀石头布效果</title>
         <meta name="keywords" content=" html5制作剪刀石头布效果" />
         <meta name="description" content=" html5制作剪刀石头布效果" />
         <link rel=&#39;stylesheet prefetch&#39; href=&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css&#39;>
         <link rel="stylesheet" type="text/css" href="css/normalize.css" />
         <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
         <link rel="stylesheet" href="css/style.css">  
</head>
<body ng-app="app" ng-controller="ctrl">
         <main style="background-image: {{b}}">
    <article>
      <div ng-class="{&#39;flip-me&#39;: answered}">
        <div>
          <div>
            <div class="chip bg-light">
              <span class="fa fa-hand-spock-o fa-fw ghost"></span>
            </div>
          </div>
          <div>
            <div class="chip bg-light">
              <span class="fa fa-hand-{{splashIcon}}-o fa-fw"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="answers row around" ng-class="{&#39;ghost&#39;: spocked}">
        <div class="column align-center">
          <div ng-class="uiSetMoveClasses(&#39;rock&#39;, 1)" ng-click="uiPlay(&#39;rock&#39;)">
            <span class="fa fa-hand-rock-o fa-fw fa-2x"></span>
          </div>
        </div>
        <div class="column align-center">
          <div ng-class="uiSetMoveClasses(&#39;paper&#39;, 2)" ng-click="uiPlay(&#39;paper&#39;)">
            <span class="fa fa-hand-paper-o fa-fw fa-2x"></span>
          </div>
        </div>
        <div class="column align-center">
          <div ng-class="uiSetMoveClasses(&#39;scissors&#39;, 3)" ng-click="uiPlay(&#39;scissors&#39;)">
            <span class="fa fa-hand-scissors-o fa-fw fa-2x"></span>
          </div>
        </div>
      </div>
      <footer class="row around">
        <div>
          <span>Me</span>
          <h1>{{score.me}}</h1>
        </div>
        <div>
          <span>Spock</span>
          <h1>{{score.spock}}</h1>
        </div>
      </footer>
    </article>
    <div class="message-wrap content {{answered}}" ng-class="{&#39;show&#39;: answered}">
      <div class="message row align-center" ng-click="uiPlayAgain()" ng-class="{&#39;bg-warning&#39;: spocked, &#39;bg-info&#39;: winner===&#39;tie&#39;,&#39;bg-success&#39;: winner==&#39;me&#39;,&#39;bg-alert&#39;: winner==&#39;spock&#39;}">
        <div>{{message}}</div>
        <div class="chip beacon-1">
          <span class="fa fa-3x fa-refresh"></span>
        </div>
      </div>
    </div>
  </main>
         <script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js&#39;></script>
         <script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js&#39;></script>
         <script src="js/main.js"></script>
</body>
</html>

Copier après la connexion

<.>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes de mise en œuvre pour l'exploitation des cookies HTTP à l'aide de Js

À propos du stockage de stockage Web local Introduction détaillée

Lors de la mise en page d'une page Web, s'il faut d'abord écrire du HTML ou du CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!