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='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <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="{'flip-me': 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="{'ghost': spocked}"> <div class="column align-center"> <div ng-class="uiSetMoveClasses('rock', 1)" ng-click="uiPlay('rock')"> <span class="fa fa-hand-rock-o fa-fw fa-2x"></span> </div> </div> <div class="column align-center"> <div ng-class="uiSetMoveClasses('paper', 2)" ng-click="uiPlay('paper')"> <span class="fa fa-hand-paper-o fa-fw fa-2x"></span> </div> </div> <div class="column align-center"> <div ng-class="uiSetMoveClasses('scissors', 3)" ng-click="uiPlay('scissors')"> <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="{'show': answered}"> <div class="message row align-center" ng-click="uiPlayAgain()" ng-class="{'bg-warning': spocked, 'bg-info': winner==='tie','bg-success': winner=='me','bg-alert': winner=='spock'}"> <div>{{message}}</div> <div class="chip beacon-1"> <span class="fa fa-3x fa-refresh"></span> </div> </div> </div> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/main.js"></script> </body> </html>
É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!