js 实现石头剪刀布游戏

最新推荐文章于 2023-08-29 16:31:50 发布
最新推荐文章于 2023-08-29 16:31:50 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SugarXiXixi/article/details/108809888
版权

前言

用户选择出石头剪刀布，电脑系统随机生成石头剪刀布，然后判断结果并显示给用户

 

一、实现效果

二、使用步骤

1.HTML和css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <style>
        #bigbox{
            width: 600px;
            height: 600px;
            background: slateblue;
            margin: 0 auto;
        }
        #bigbox>h1{
            width: 100%;
            text-align: center;
            color: #ffffff;
        }
        .box1{
            height: 200px;
            
        
        }
        .box2{
            height: 220px;
        }
        .box1 img{
            float: left;
            margin: 25px;
        }
        .box2 img{
            float: left;
            margin:20px 63px;
            width: 150px;
            height: 150px;

        }
        .box2 h1{
            

            display: block;
            color: #000;
            float: left;
            line-height: 150px;

        }
        img{
            width: 150px;
            height: 150px;
        }
        p{
            text-align: center;
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
        .text{
            height: 20px;
        }
        .text span{
            font-size: 20px;
            color: #ffffff;
            margin: 0 100px;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div id='bigbox'>
        <h1>请选择</h1>
        <div class="box1">
            <img src="../img/shitou.png" alt="">
            <img src="../img/jiandao.png" alt="">
            <img src="../img/bu.png" alt="">
        </div>
        <div class="text">
            <span>您选择了</span>
            <span>系统选择了</span>
        </div>
        <div class="box2">
            <img src="../img/undefined.png" alt="">
            <h1>pk</h1>
            <img src="../img/undefined.png" alt="">
        </div>

        <p>结果显示中。。。</p>
        
    </div>
</body>

2.JavaScript

     <script>
    let imgs=document.getElementsByTagName('img')
    // console.log(imgs.length)
    for(let i=0;i<3;i++){
        imgs[i].onclick=function(){
            game(this,i)
            
        }
    }
 
    function game(src,i){
        // console.log(i)
        //用户
        let str=src.src;
        let user=document.getElementsByTagName('img')[3]
        user.src=str
        
        //系统
        setTimeout(function (){
            let user=document.getElementsByTagName('img')[4]
            let imgSrc=['../img/shitou.png','../img/jiandao.png','../img/bu.png']
           let num = Math.floor(Math.random() * imgSrc.length)
            console.log(num)
            user.src=imgSrc[num]
            i=i*1
              //结果
        let rs=document.getElementsByTagName('p')[0]
        if(i==0&&num==1 || i==1&&num==2
            || i==2&&num==0){
                rs.innerHTML="恭喜你获得胜利！"
            }else if(i==num){
                rs.innerHTML="平局，请再来一次吧"
            }else{
                rs.innerHTML="不好意思，游戏失败"
                
            }
        },200)
      
       
    }
    

    
</script>

 

总结

利用数组，将石头剪刀布src地址保存，利用随机数将生成0-2的任意数字，电脑延时0.2秒生成。用户利用for循环将照片绑定onclick（），点击图片，用户选择图片修改为当前图片。创建参数函数，传入数组标，以及this对象。通过this.src改变用户选择的显示图片，将数组下标 与随机数进行条件判断。0代表石头，1代表剪刀，2代表布。生成结果操作dom'进行显示

哈哈西西）
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用javascript写一个石头剪刀布的简易小游戏
lsxlyy的博客
05-11 644
代码如下: <!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
纯js完成石头剪刀布游戏（仅仅使用JavaScript完成）
StrangeKNL的博客
08-30 2368
学习js前期练手用，仅仅是js完成
JavaScript编写的石头剪刀布小游戏
11-23
三局两胜制 有计分器 希望对您有所帮助希望对您有所帮助
剪刀、石头、布游戏
mmdev
01-08 407
石头、剪刀、布游戏 /*石头、剪刀、布是孩子们中很流行的一个游戏。在这个游戏中，孩子们用手表示石头、剪刀、布。伸手表示布、拳头表示石头、伸出两根手指表示剪刀。孩子们面对面地数到3，然后亮出各自的选择。如果选择是一样的，表示平局，否则就用如下规则决定胜负。 布覆盖石头 石头砸剪刀 剪刀剪碎布 ...
js实现石头剪刀布游戏
10-14
主要为大家详细介绍了js实现石头剪刀布游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS完成石头剪刀布小游戏
weixin_46240162的博客
03-18 800
原生JS完成石头剪刀布小游戏 2020-03-18 今天花了快两个小时，使用原生JS完成了石头剪刀布小游戏 源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E7%9F%B3%E5%A4%B4%E5%89%AA%E5%88%80%E5%B8%83 效果图： 因为使用的是原生JS，没有使用Vue等框架，...
JavaScript实现的石头剪刀布游戏源码分享
10-25
总结以上知识点，JavaScript实现的石头剪刀布游戏包含以下要点： 1. JavaScript基础语法：包括变量声明、函数定义、条件语句、循环语句等。 2. 随机数生成：利用`Math.random()`与取模运算`%`来生成随机选项。 3. ...
用 Javascript 实现石头剪刀布游戏(附源代码).zip
最新发布
07-22
项目名称：JavaScript 中的石头剪刀布源代码 石头剪刀布是一个使用 JavaScript、CSS 和 HTML 开发的简单游戏项目。这款热门游戏现已推出 HTML 版本。现在，这款游戏已在高图形游戏中推出。整个游戏都使用 javascript...
JavaScript小游戏石头剪刀布
ICode联盟
04-28 417
下载地址 JavaScript代码实现的小游戏石头剪刀布 dd:
JavaScript剪刀石头布
m0_51700376的博客
09-26 403
<!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和DOM编写的石头剪刀布游戏，动态显现比赛详细结果
10-21
用JS编写的石头剪刀布游戏，可以显示输，赢，和平局的总局数，利用DOM技术也可以动态显现比赛详细结果
石头剪刀布简单代码
12-22
运用Java编写的小程序，简单易懂，绝对震撼,可以下载来玩玩，也可以可用于课程设计
js剪刀石头布猜拳游戏代码
04-25
js剪刀石头布猜拳游戏代码是一款基于js+css3制作的电脑和玩家石头剪刀布猜拳游戏源代码。
剪刀、石头、布
11-21
剪刀可以剪布，石头可以砸剪刀，而布可以包石头。程序提示用户随即产生一个数，这个数为0或1或2，分表表示剪刀、石头和布。程序提示用户输入值0、1或者2，然后显示一个信息，表示用户和计算机谁赢得了游戏，谁输了游戏，或是打成平手。。并且用户可以连续的玩这个游戏，直到用户或计算机连赢两次以上为止。 eg.(运行结果) : scissor(0) , rock(1) , paper(2) :1 The computer is rockr .You are rock too .It is a draw . scissor(0) , rock(1) , paper(2) :3 输入有误！ scissor(0) , rock(1) , paper(2) :0 The computer is paper .You are scissor .You won . scissor(0) , rock(1) , paper(2) :0 The computer is rockr .You are scissor .You lose . scissor(0) , rock(1) , paper(2) :0 The computer is paper .You are scissor .You won . scissor(0) , rock(1) , paper(2) :0 The computer is paper .You are scissor .You won . 你已经连赢了两局。 是否继续 （ Y / N ） ：
JS 石头剪刀布游戏代码
qq_35568294的博客
04-23 2823
注意哦，0代表石头及图片，1代表剪刀及图片，2代表布及图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=f...
使用JS完成石头剪刀布小游戏
weixin_45103428的博客
07-04 825
使用JS完成石头剪刀布小游戏 //引入nodejs内置http模块 var http=require("http"); var url = require("url") //创建并监听web服务器 http.createServer(function (request, response) { //发送HTTP头部 //参数1:响应状态码:200表示成功 //参数2:响应头信息,Content-Type内容类型:纯文本 response.writeHead(200,{"Co
js实现石头剪刀布效果
嗟鸠食桑
01-15 1991
这个游戏主要设计到两点： 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布 杀 石头 石头 杀 剪子 。。。 根据以上特点找出规律，写出算法即可。 让电脑随机 这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。 随机刷屏 其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。 界...
js基础实现石头剪刀布
James_C_666的博客
08-29 660
alert("电脑出剪刀，你赢了")alert("电脑出剪刀，你输了")alert("电脑出石头，你赢了")alert("电脑出石头，你输了")alert("电脑出剪刀，平局")alert("电脑出石头，平局")alert("电脑出布，你赢了")alert("电脑出布，你输了")alert("电脑出布，平局")var people = prompt("请输入石头 剪刀 布");
写一个原生js的石头剪刀布游戏
06-03
好的，以下是一个基于原生js的石头剪刀布游戏的代码实现： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>石头剪刀布游戏</title> <style> #result { font-size: 24px; margin-top: 20px; } </style> </head> <body> <h1>石头剪刀布游戏</h1> <p>请选择您的出拳：</p> <button id="rock">石头</button> <button id="paper">剪刀</button> <button id="scissors">布</button> <div id="result"></div> <script src="./game.js"></script> </body> </html> ``` JS代码： ```javascript // 获取按钮元素 var rock = document.getElementById('rock'); var paper = document.getElementById('paper'); var scissors = document.getElementById('scissors'); var result = document.getElementById('result'); // 定义游戏规则 var rule = { 'rock': 'scissors', 'paper': 'rock', 'scissors': 'paper' }; // 绑定按钮点击事件 rock.onclick = function() { play('rock'); } paper.onclick = function() { play('paper'); } scissors.onclick = function() { play('scissors'); } // 定义play函数，进行游戏逻辑的处理 function play(player) { // 随机生成电脑出的拳 var computer = Math.random() < 0.33 ? 'rock' : (Math.random() < 0.67 ? 'paper' : 'scissors'); // 判断输赢 if (player === computer) { result.innerHTML = '平局！'; } else if (rule[player] === computer) { result.innerHTML = '您获胜了！'; } else { result.innerHTML = '电脑获胜了！'; } } ``` 这个游戏的基本逻辑是，用户点击按钮选择出拳，然后电脑随机生成出拳，比较两者之间的关系，输出胜负结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值