简单http请求实现石头剪刀布

最新推荐文章于 2023-12-25 15:06:45 发布

pq_hz

最新推荐文章于 2023-12-25 15:06:45 发布

阅读量93

点赞数

分类专栏：极客

本文链接：https://blog.csdn.net/weixin_50746784/article/details/113736569

版权

极客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的网页版石头剪刀布游戏。用户点击石头、剪刀或布的按钮，服务器通过Node.js接收请求并返回游戏结果。服务器端通过随机数决定电脑出拳，并判断胜负。游戏进行三次后，服务器会返回'告辞'结束游戏。

摘要由CSDN通过智能技术生成

//index.htnl
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
 <div id="output" style="height: 400px;width: 600px; overflow: auto; background: #eee;"></div>
  <div style="display: flex;">
    <div id="rock" style="height: 40px;width: 80px">石头</div>
    <div id="scissor" style="height: 40px;width: 80px">剪刀</div>
    <div id="paper" style="height: 40px;width: 80px">布</div>
  </div>

</body>
</html>
<script>
  const $button={
    rock:document.getElementById('rock'),
    scissor:document.getElementById('scissor'),
    paper:document.getElementById('paper')
  }
  const $output=document.getElementById('output')
  Object.keys($button).forEach(key=>[
    $button[key].addEventListener('click',function(){
      fetch(`http://${location.host}/game?action=${key}`)
        .then((res)=>{
          return res.text()
        })
        .then((res)=>{
          $output.innerHTML+=res+'<br/>'
        })
    })
  ])
</script>

//index.js
const http=require('http')
const url=require('url')
const queryString=require('querystring')
const fs=require('fs')
const game=require('../commonjs/lib')
let count=0
http.createServer((req,res)=>{
  const pathUrl=url.parse(req.url)
  if(pathUrl.pathname=='/'){
  //服务端渲染页面
    fs.createReadStream(__dirname+'/index.html').pipe(res)
  }
  if(pathUrl.pathname=='/game'){
    const query=queryString.parse(pathUrl.query)
    const playAction=query.action
    const gameResult=game(playAction)
    if(count>=3){
      res.writeHead(500)
      res.end('告辞')
      return 
    }
    if(gameResult==0){
      res.end('平局')
    }else if(gameResult==-1){
      ++count
      res.end('你赢了')
    }else{
      res.end('你输了')
    }
    res.writeHead(200)
  }
}).listen(3000)

//lib.js
module.exports=function(playerAction){
  let computerAcition//电脑出的手势
  var random=Math.random()*3
  if(random<1){
    computerAcition='rock'
  }else if(random>2){
    computerAcition='scissor'
  }else{
    computerAcition='paper'
  }
  
  console.log(computerAcition);
  if(playerAction==computerAcition){
    // console.log('平局');
    return 0
  }else{
    if((playerAction=='rock'&&computerAcition=='scissor')||(playerAction=='scissor'&&computerAcition=='papper'||(playerAction=='papper'&&computerAcition=='rock'))){
      // console.log('你赢了');
      return -1
    }else{
      // console.log('你输了');
      return 1
    }
  }
}