JavaScript编写猜拳游戏
程序员文章站
2022-07-05 09:11:21
本文实例为大家分享了javascript编写猜拳游戏的具体代码,供大家参考,具体内容如下html代码:
本文实例为大家分享了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() }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。