怎么新建MySQL数据库
发布时间：2022-06-22
作者：admin
阅读：779
阅读：779
很多朋友都对“如何用JS实现猜拳游戏，实现过程及代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！
现在大家对于如何用JS实现猜拳游戏，实现过程及代码是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
本文实例为大家分享了JavaScript编写猜拳游戏的具体代码，供大家参考，具体内容如下
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script rel="script" src="js1.js"></script>
<style>
#Div {
width: 1000px;
height: 700px;
position: relative;
border-style: groove;
border-width: 2px;
}
/*猜拳区*/
#area {
width: 300px;
height: 200px;
background-color: #011bfd;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
/*显示区*/
#results {
width: 400px;
height: 50px;
background-color: #f7f8fd;
text-align:center;
font-size:30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*卡牌石头*/
#stone {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 30%;
transform: translate(-50%, -50%);
}
/*卡牌剪刀*/
#scissors {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
/*卡牌布*/
#cloth {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 70%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="Div">
<div id="area"></div>
<div id="results"></div>
<div id="stone" draggable="true"></div>
<div id="scissors" draggable="true"></div>
<div id="cloth" draggable="true"></div>
</div>
<script rel="script">
show();
</script>
</body>
</html>
JavaScript 代码：
/***
area 区域
stone 石头 石头 = 石头 石头 > 剪刀 石头 < 布
scissors 剪刀 剪刀 < 石头 剪刀 = 剪刀 剪刀 > 布
cloth 布 布 > 石头 布 < 剪刀 布 = 布
***/
/***
查看数据类型：Object.prototype.toString.call(变量)
刷新局部：window.location.reload('#area');
***/
function Init () {
//获取并且绑定HTML的ID,返回HTML格式（HTMLDivElement）
const area = document.querySelector("#area");
const results = document.querySelector("#results");
const stone = document.querySelector("#stone");
const scissors = document.querySelector("#scissors");
const cloth = document.querySelector("#cloth");
//定义拖拽的卡牌
let ondragstart_ID = null
//猜拳类型编写成数组
const random_Action = ['stone', 'scissors', 'cloth'];
//随机获取数组中的一个数组的键
const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
//获取数组中的键值，如数组random_Action中的'stone'（random_Action[0]）
const random_Value = random_Action[random_Digital-1];
//编写猜拳类型的方法
function attribute (parameter) {
//鼠标移入时（猜拳卡片变大）
parameter.onmouseover = function () {
this.style.height = '200px';
this.style.width = '150px';
}
//鼠标移出时（猜拳卡片恢复初始状态）
parameter.onmouseleave = function () {
this.style.height = '150px';
this.style.width = '100px';
}
//元素开始拖动时（猜拳卡片变透明）
parameter.ondragstart = function () {
this.style.opacity = '0.3';
ondragstart_ID = parameter.id
}
}
//创建猜拳类型的对象，给猜拳对象的属性赋值
this.show_attribute = function () {
attribute(stone)
attribute(scissors)
attribute(cloth)
}
//编写卡牌拖动事件
this.overout = function () {
//当卡牌拖拽到area（猜拳区域）之上
area.ondragenter = function () {
//判断随机数random_Digital，不能等于null
if (random_Digital !== null) {
//判断拖拽的卡牌
if (ondragstart_ID === 'stone') {
//判断随机数对等于哪一个
switch (random_Value) {
case stone.id:
results.innerHTML = 'stone = stone,平局！';
break;
case scissors.id:
results.innerHTML = 'stone > scissors,你赢了！';
break;
case cloth.id:
results.innerHTML = 'stone < cloth,你输了！';
break;
default:
//刷新
window.location.reload();
}
//元素拖动结束（猜拳卡片恢复初始状态）
stone.ondragend = function () {
this.style.opacity = '1';
}
//延迟1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
//判断拖拽的卡牌
}else if (ondragstart_ID === 'scissors') {
//判断随机数对等于哪一个
switch (random_Value) {
case stone.id:
results.innerHTML = 'scissors < stone,你输了！';
break;
case scissors.id:
results.innerHTML = 'scissors = scissors,平局！';
break;
case cloth.id:
results.innerHTML = 'scissors > cloth,你赢了！';
break;
default:
//刷新
window.location.reload();
}
//元素拖动结束（猜拳卡片恢复初始状态）
scissors.ondragend = function () {
this.style.opacity = '1';
}
//延迟1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
//判断拖拽的卡牌
}else if (ondragstart_ID === 'cloth') {
//判断随机数对等于哪一个
switch (random_Value) {
case stone.id:
results.innerHTML = 'cloth > stone,你赢了！';
break;
case scissors.id:
results.innerHTML = 'cloth < scissors,你输了！';
break;
case cloth.id:
results.innerHTML = 'cloth = cloth,平局！';
break;
default:
//刷新
window.location.reload();
}
//元素拖动结束（猜拳卡片恢复初始状态）
cloth.ondragend = function () {
this.style.opacity = '1';
}
//延迟1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
}
}
}
}
}
//调用函数
function show() {
const show_html = new Init();
show_html.show_attribute()
show_html.overout()
}现在大家对于如何用JS实现猜拳游戏，实现过程及代码是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理