index.html

  1. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         * {
  7.             padding: 0;
  8.             margin: 0;
  9.         }
  11.         button {
  12.             display: inline-block
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="output" style="height: 400px; width: 600px; background: #eee">
  19.     </div>
  20.     <button id="rock" style="height: 40px; width: 80px">石头</button>
  21.     <button id="scissor" style="height: 40px; width: 80px">剪刀</button>
  22.     <button id="paper" style="height: 40px; width: 80px">布</button>
  23. </body>
  24. <script>
  25.     const $button = {
  26.         rock: document.getElementById('rock'),
  27.         scissor: document.getElementById('scissor'),
  28.         paper: document.getElementById('paper')
  29.     }
  31.     const $output = document.getElementById('output')
  33.     Object.keys($button).forEach(key => {
  34.         $button[key].addEventListener('click', function () {
  35.             fetch(`http://${location.host}/game?action=${key}`)
  36.                 .then((res) => {
  37.                     return res.text()
  38.                 })
  39.                 .then((text) => {
  40.                     $output.innerHTML += text + '<br/>';
  41.                 })
  42.         })
  43.     })
  44. </script>
  46. </html>

index.js

  1. const fs = require('fs');
  2. const game = require('./game')
  3. const koa = require('koa');
  4. const mount = require('koa-mount')
  6. // 玩家胜利次数，如果超过3，则后续往该服务器的请求都返回500
  7. var playerWinCount = 0
  8. // 玩家的上一次游戏动作
  9. var lastPlayerAction = null;
  10. // 玩家连续出同一个动作的次数
  11. var sameCount = 0;
  13. const app = new koa();
  15. app.use(
  16.     mount('/favicon.ico', function (ctx) {
  17.         // koa比express做了更极致的response处理函数
  18.         // 因为koa使用异步函数作为中间件的实现方式
  19.         // 所以koa可以在等待所有中间件执行完毕之后再统一处理返回值，因此可以用赋值运算符
  20.         ctx.status = 200;
  21.     })
  22. )
  24. const gameKoa = new koa();
  25. app.use(
  26.     mount('/game', gameKoa)
  27. )
  28. gameKoa.use(
  29.     async function (ctx, next) {
  30.         if (playerWinCount >= 3) {
  31.             ctx.status = 500;
  32.             ctx.body = '我不会再玩了！'
  33.             return;
  34.         }
  36.         // 使用await 关键字等待后续中间件执行完成
  37.         await next();
  39.         // 就能获得一个准确的洋葱模型效果
  40.         if (ctx.playerWon) {
  41.             playerWinCount++;
  42.         }
  43.     }
  44. )
  45. gameKoa.use(
  46.     async function (ctx, next) {
  47.         const query = ctx.query;
  48.         const playerAction = query.action;
  49.         if (!playerAction) {
  50.             ctx.status = 400;
  51.             return;
  52.         }
  53.         if (sameCount == 9) {
  54.             ctx.status = 500;
  55.             ctx.body = '我不会再玩了！'
  56.         }
  58.         if (lastPlayerAction == playerAction) {
  59.             sameCount++
  60.             if (sameCount >= 3) {
  61.                 ctx.status = 400;
  62.                 ctx.body = '你作弊！我再也不玩了'
  63.                 sameCount = 9
  64.                 return;
  65.             }
  67.         } else {
  68.             sameCount = 0;
  69.         }
  70.         lastPlayerAction = playerAction;
  71.         ctx.playerAction = playerAction
  72.         await next();
  73.     }
  74. )
  75. gameKoa.use(
  76.     async function (ctx, next) {
  77.         const playerAction = ctx.playerAction;
  78.         const result = game(playerAction);
  80.         // 对于一定需要在请求主流程里完成的操作，一定要使用await进行等待
  81.         // 否则koa就会在当前事件循环就把http response返回出去了
  82.         await new Promise(resolve => {
  83.             // 模拟500毫秒后才返回的现象。
  84.             setTimeout(() => {
  85.                 ctx.status = 200;
  86.                 if (result == 0) {
  87.                     ctx.body = '平局'
  89.                 } else if (result == -1) {
  90.                     ctx.body = '你输了'
  92.                 } else {
  93.                     ctx.body = '你赢了'
  94.                     ctx.playerWon = true;
  96.                 }
  97.                 resolve();
  98.             }, 500)
  99.         })
  100.     }
  101. )
  103. app.use(
  104.     mount('/', function (ctx) {
  105.         ctx.body = fs.readFileSync(__dirname + '/index.html', 'utf-8')
  106.     })
  107. )
  108. app.listen(3000);

game.js

  1. module.exports = function (playerAction) {
  2.     // 计算电脑出的东西
  3.     var computerAction;
  4.     var random = Math.random() * 3
  5.     if (random < 1) {
  6.         computerAction = 'rock'
  7.         // console.log('电脑出了石头')
  9.     } else if (random > 2) {
  10.         computerAction = 'scissor'
  11.         // console.log('电脑出了剪刀')
  13.     } else {
  14.         computerAction = 'paper'
  15.         // console.log('电脑出了布')
  17.     }
  19.     if (computerAction == playerAction) {
  20.         return 0;
  22.     } else if (
  23.         (computerAction == 'rock' && playerAction == 'scissor') ||
  24.         (computerAction == 'scissor' && playerAction == 'paper') ||
  25.         (computerAction == 'paper' && playerAction == 'rock')
  26.     ) {
  27.         return -1;
  29.     } else {
  30.         return 1;
  31.     }
  32. }