js实现石头剪刀布效果

最新推荐文章于 2023-08-29 16:31:50 发布
最新推荐文章于 2023-08-29 16:31:50 发布
阅读量1.9k 收藏 10
点赞数
分类专栏： Javascript 学习 文章标签： js 石头剪刀布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37282601/article/details/86493244
版权
本文介绍了如何使用JavaScript实现石头剪刀布游戏，包括胜负判断算法和电脑随机选择的逻辑，以及增加随机刷屏效果以提升游戏互动性。
摘要由CSDN通过智能技术生成

这个游戏主要设计到两点：

首先是胜负运算

由于石头剪刀布是循环性的
石头 杀 剪子
剪子 杀 布
布 杀 石头
石头 杀 剪子
。。。
根据以上特点找出规律，写出算法即可。

让电脑随机

这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。

随机刷屏

其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。

界面截图

js石头剪刀布界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JS写的石头剪子布游戏</title>
        <style type="text/css">
            div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;}
            div#cu{font-weight:bold;font-size:30px;height:40px;color:red;}
            div#la{border:none;background:none;display:none;}
            span{
最低0.47元/天 解锁文章
于嗟鸠兮
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现剪刀石头布小游戏
weixin_46671666的博客
09-03 3108
这两天用js做了个剪刀石头布的小游戏，实现的是用户与电脑进行对战，原理比较简单，在此记录一下。 下面先说一下游戏的流程： 1、进入游戏先要设置自己的昵称： 2、进入游戏，选择自己的手势： 3、选好之后会有你的信息显示，然后点“比一比”即可 4、显示结果，包含电脑的选择信息、胜负情况以及比分情况： 5、对应的点击各种手势之后会有背景音乐，以及结果出来之后会有胜负不同的背景音乐 然后下面讲述一下实现的代码： 样式Style： <style> .race{
js实现石头剪刀布游戏
10-14
主要为大家详细介绍了js实现石头剪刀布游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js简单实现剪刀石头布
wangweiruning的博客
01-05 3681
剪刀石头布小游戏的规则很简单，接下来就简单实现一下啊 div + css 随便写写 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www....
JavaScript剪刀石头布
m0_51700376的博客
09-26 399
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: gray; text-align: center; color: aqua
JS剪刀石头布
01-06
萌新冒泡，请多指教，简简单单的一个小游戏，大家见笑
JavaScript实现的石头剪刀布游戏源码分享
10-25
总结以上知识点，JavaScript实现的石头剪刀布游戏包含以下要点： 1. JavaScript基础语法：包括变量声明、函数定义、条件语句、循环语句等。 2. 随机数生成：利用`Math.random()`与取模运算`%`来生成随机选项。 3. ...
jQuery石头剪刀布猜拳游戏下载
06-24
总的来说，“jQuery石头剪刀布猜拳游戏下载”是一个实践jQuery和JavaScript交互的好例子，它涵盖了基本的事件处理、DOM操作、随机数生成、条件判断以及简单的动画效果。对于初学者来说，这是一个了解和学习前端开发...
js基础实现石头剪刀布
James_C_666的博客
08-29 658
alert("电脑出剪刀，你赢了")alert("电脑出剪刀，你输了")alert("电脑出石头，你赢了")alert("电脑出石头，你输了")alert("电脑出剪刀，平局")alert("电脑出石头，平局")alert("电脑出布，你赢了")alert("电脑出布，你输了")alert("电脑出布，平局")var people = prompt("请输入石头 剪刀 布");
JavaScript编写的石头剪刀布小游戏
11-23
三局两胜制 有计分器 希望对您有所帮助希望对您有所帮助
javascript 石头，剪子，布
09-14
javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布javascript 石头 剪子 布
石头剪刀布简单代码
12-22
运用Java编写的小程序，简单易懂，绝对震撼,可以下载来玩玩，也可以可用于课程设计
js剪刀石头布猜拳游戏特效代码
03-20
js剪刀石头布猜拳游戏代码是一款基于js+css3制作的电脑和玩家石头剪刀布猜拳游戏源代码。
JS 石头剪刀布游戏代码
qq_35568294的博客
04-23 2815
注意哦，0代表石头及图片，1代表剪刀及图片，2代表布及图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=f...
javascript石头剪刀布
weixin_47460937的博客
09-07 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div#outer{ width: 500px; height: 500px; border:2px solid red; background-color: orange; /*margin:0
利用javascript写一个石头剪刀布的简易小游戏
lsxlyy的博客
05-11 642
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>石头剪刀布</title&g
JavaScript小游戏石头剪刀布
ICode联盟
04-28 417
下载地址 JavaScript代码实现的小游戏石头剪刀布 dd:
js随机数石头剪刀布
最新发布
08-30
你可以使用以下代码生成一个随机数，来模拟石头剪刀布游戏的结果： ```javascript function getRandomChoice() { // 生成一个 0 到 2 之间的随机整数 const random = Math.floor(Math.random() * 3); // 根据随机数返回对应的石头、剪刀或布 switch(random) { case 0: return "石头"; case 1: return "剪刀"; case 2: return "布"; } } // 示例使用 const computerChoice = getRandomChoice(); console.log(computerChoice); // 输出随机的石头、剪刀或布 ``` 希望这个代码能够满足你的需求！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值