JavaScript编写猜拳游戏

本文实例为大家分享了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，不能等于nullif (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()}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: