2. node HTTP：实现网页版石头剪刀布
2020-06-30 本文已影响0人
萘小蒽
首先创建一个node服务
const http = require('http');
const url = require('url');
const fs = require('fs');
let platGame = function (playAction) {
var radom = Math.random() * 3;
var obj = {};
obj.playAction = playAction;
var action, result;
if (radom < 1) {
action = "剪刀";
} else if (radom > 2) {
action = "石头";
} else {
action = "布";
}
obj.action = action;
if (playAction == action) {
result = "平局";
} else if (action == "剪刀" && playAction == "石头" || action == "石头" && playAction == "布" || action == "布" && playAction == "剪刀") {
result = "你赢了"
} else {
result = "你输了"
}
obj.result = result;
return JSON.stringify(obj);
}
var parseQuery = function (query) {
var reg = /([^=&\s]+)[=\s]*([^&\s]*)/g;
var obj = {};
while (reg.exec(query)) {
obj[RegExp.$1] = decodeURI(RegExp.$2);
}
return obj;
}
http.createServer(function (req, res) {
let parse = url.parse(req.url);
let pathname = parse.pathname
console.log(pathname);
if (pathname === '/favicon.ico') {
res.writeHead(200);
res.end();
};
if (pathname == "/action") {
var val = parseQuery(parse.query).playAction;
res.writeHead(200, { "content-type": "text/html;charset=utf-8" });
res.end(platGame(val));
}
if (pathname === '/') {
fs.createReadStream(__dirname + "/index.html").pipe(res)
}
}).listen(3000)
index..html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!-- 灰度 -->
<!-- <meta base='/near_test/'> -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<style>
#app {
width: 400px;
margin: 0 auto;
}
.head {
display: flex;
margin: 50px auto;
}
.btn {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.btn:focus,
.btn:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.head div {
flex: 1;
text-align: center;
}
.el-textarea {
position: relative;
display: inline-block;
width: 100%;
vertical-align: bottom;
font-size: 14px;
}
.el-textarea__inner {
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: #606266;
background-color: #fff;
background-image: none;
border: 1px solid #dcdfe6;
border-radius: 4px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
</style>
<title>工时统计系统</title>
</head>
<body>
<!--vue-ssr-outlet-->
<div id="app">
<div class="head">
<div><button class="btn">石头</button></div>
<div><button class="btn">剪刀</button></div>
<div><button class="btn">布</button></div>
</div>
<div class="el-textarea"><textarea autocomplete="off" placeholder="请出拳" class="el-textarea__inner"
style="min-height: 54px; height: 54px;"></textarea>
<!---->
</div>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementsByClassName('head')[0];
var text = document.getElementsByClassName('el-textarea__inner')[0];
btn.addEventListener('click', function (e) {
var target = e.target;
if (target.className === 'btn') {
var playAction = target.innerText;
var xhr = new XMLHttpRequest();
xhr.open('get', 'action?playAction=' + playAction);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
text.innerHTML += "玩家出："+ res.playAction+"，电脑出："+res.action+"，结果："+res.result+"\n"
}
}
}
})
</script>
</html>
启动后的执行结果：
image.png
