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，不能等于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实现猜拳游戏
本文实例为大家分享了JS实现猜拳游戏的具体代码,供大家参考,具体内容如下 一.简单版猜拳游戏 编写一个用户和计算机猜拳的游戏,用户输入剪刀.石头或布,与计算机的出拳进行比较,判断胜负. 分析: 1.首先得用prompt()方法建立一个用户输入框: 2.核心是用到Math.random()这个函数,该函数的作用是取[0,1)之间的随机数,可以利用这个函数让计算机随机出拳: 3.用if-else语句判断会出现的各种结果并作出判定: 具体代码如下: /** * a是用户输入的内容 * b是计算机的随机
-
JavaScript基于面向对象实现的猜拳游戏
本文实例讲述了JavaScript基于面向对象实现的猜拳游戏.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>猜拳游戏</title> <link rel="stylesheet" href="css/game.css" rel="exte
-
JavaScript编写猜拳游戏
本文实例为大家分享了JavaScript编写猜拳游戏的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <script rel="script" src="js1.js"></
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos
-
从0到1学习JavaScript编写贪吃蛇游戏
本文实例为大家分享了JavaScript编写贪吃蛇游戏的具体代码,供大家参考,具体内容如下 游戏截图 1.画出游戏界面 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//获取地图 2.给小蛇设置参数 var time = 160 ; //蛇的速度 var x = y = 8; var t = 20; //蛇身长 var map = []; //记录蛇运行路径 var siz
-
如何利用JavaScript编写一个格斗小游戏
拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色
-
基于JavaScript编写一个翻卡游戏
目录 前言 翻卡动画 生成随机分布数组 均匀元素下的随机算法 不均匀元素下的随机算法 生成最终数组 点击事件 完整代码 前言 首先将这个游戏需求拆分成三个部分: 翻卡动画 生成随机分布数组 点击事件 翻卡动画 假如我们的盒子模型不是个二维的平面,而是有个三维的体积,让它可以有正反两面,那我们在做的时候是不是只要将它真实的翻个面就可以了.让我们来想想将它变成三维的方法. 之后发现了这个属性: transform: translateZ(1px); 使用了它,就可以把盒子内部的元素与盒子的底部撑出个
-
JavaScript实现五子棋游戏的方法详解
本文实例讲述了JavaScript实现五子棋游戏的方法.分享给大家供大家参考,具体如下: 最近半个月一直在看深入的学习JavaScript,里面有很多重点和难点,比如闭包.词法分析.面向对象等.今天给大家分享一个由JavaScript编写的五子棋游戏,主要用到JavaScript的面向对象.事件委托.闭包等知识,还是挺有分量的,正好可以检测学习的成果. 老规矩,先上图,再说话. 效果图: 五子棋素材图: 代码: <!DOCTYPE html> <html> <head>
-
C语言实现猜拳游戏
一.问题 C语言实现猜拳游戏,用户自己选择对手,可以创建玩家角色.可以记录当前对战情况(对战局数,得分情况) 二.解决思路 猜拳游戏大家都不陌生,从小玩到大,遇到棘手的选择,猜拳往往是最能服众的处理办法.那么今天我们就用C语言来实现这个小游戏.这题比较简单,创建两个字符数组,对应对手和玩家.接着用户选择要出的(石头,剪刀,布),然后是电脑选择,最后把两个选择进行对比,判断输赢. 三.代码实现 第一步,编写game.h头文件,把需要用到的函数声明及一些宏定义写在里面 #ifndef __GAME_
-
python实现一个猜拳游戏
本文实例为大家分享了python实现一个猜拳游戏的具体代码,供大家参考,具体内容如下 设计一个猜拳的游戏,要求如下: 1.游戏开始时,输入玩家名字 2.可以选择3个电脑对手(电脑名字自定) 3.游戏规则为:1.剪刀 2.石头 3.布 4.游戏开始,玩家vs电脑,玩家选择出一个,电脑随机1-3 5.具有局数统计(如:现在是第几局).输赢统计(玩家胜几局,电脑胜几局) 效果图如下: 代码如下: import random #先导入随机数 class game(): #创建一个游戏的类 里面分为两个属
-
Java实现人机猜拳游戏
本文实例为大家分享了Java实现人机猜拳游戏的具体代码,供大家参考,具体内容如下 实现: User类 public class User { private String name; private int score=0; private int num; public String GetName() { return this.name; } public void SetName(String name) { this.name=name; } public int GetScore()