JS 石头剪刀布游戏代码

最新推荐文章于 2024-05-06 23:06:14 发布
最新推荐文章于 2024-05-06 23:06:14 发布
阅读量2.7k 收藏 6
点赞数 1
分类专栏： js 记录 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35568294/article/details/89479661
版权
记录 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏 
注意哦，0代表石头及图片，1代表剪刀及图片，2代表布及图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var stone = document.getElementById("stone");
            var shears = document.getElementById("shears");
            var cloth = document.getElementById("cloth");
            var suiji = document.getElementById("suiji");
            var text = document.getElementById("text");
            var result = document.getElementById("result");
            var src=["shitou.png","jiandao.png","bu.png"];
            var i=0;
            var st=0;
            var jd=1;
            var b=2;
            var now;
            var interval = setInterval(function () {
                suiji.src=src[i];
                i++;
                if(i>2){
                    i=0;
                }
            },100)
            function stop() {
                ma=Math.floor(Math.random(0,.3)*3);
                if(ma==0){
                    now="Stone";
                }else if(ma==1){
                    now="Shears";
                }else{
                    now="Cloth";
                }
            }

            stone.onclick=function(){
                stop();
                if(ma==0){
                    result.innerHTML="石头"
                    text.innerHTML="平局";
                    window.clearInterval(interval);
                    suiji.src=src[0];
                }
                else if(ma==1){
                    result.innerHTML="剪刀"
                    text.innerHTML="你赢了！";
                    window.clearInterval(interval);
                    suiji.src=src[1];
                }
                if(ma==2){
                    result.innerHTML="布"
                    text.innerHTML="你输了！";
                    window.clearInterval(interval);
                    suiji.src=src[2];
                }

            };

            shears.onclick=function(){
                stop();
                if(ma==0){
                    result.innerHTML="石头"
                    text.innerHTML="你输了！";
                    window.clearInterval(interval);
                    suiji.src=src[0];
                }
                else if(ma==1){
                    result.innerHTML="剪刀"
                    text.innerHTML="平局！";
                    window.clearInterval(interval);
                    suiji.src=src[1];
                }
                if(ma==2){
                    result.innerHTML="布"
                    text.innerHTML="你赢了！";
                    window.clearInterval(interval);
                    suiji.src=src[2];
                }

            }

            cloth.onclick=function(){
                stop();
                if(ma==0){
                    result.innerHTML="石头"
                    text.innerHTML="你赢了";
                    window.clearInterval(interval);
                    suiji.src=src[0];
                }
                else if(ma==1){
                    result.innerHTML="剪刀"
                    text.innerHTML="你输了！";
                    window.clearInterval(interval);
                    suiji.src=src[1];
                }
                if(ma==2){
                    result.innerHTML="布"
                    text.innerHTML="平局！";
                    window.clearInterval(interval);
                    suiji.src=src[2];
                }

            }
        }


    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #wrap{
            width: 800px;
            margin: 0px auto;
            margin-top:200px;
            text-align: center;
        }
        p{
            margin: 20px;
        }
        #wrap img{
            display: block;
            width: 200px;
            height:200px;
            float: left;
            margin-left: 35px;
        }
        #header{
            width: 800px;
            margin: 0px auto;
            text-align: center;
        }
        #header p:nth-of-type(1){
            font-size: 30px;
            font-weight: 600;
        }
        #suiji{
            display: block;
            width: 200px;
            height: 200px;
            text-align: center;
            margin: 0px auto;
        }
        #text{
            color:red;
            font-weight: 800;
            font-size: 20px;
        }
    </style>

</head>
<body>
    <div id="header">
        <p>剪刀石头布，猜猜你会赢吗？</p>
        <p>电脑出的是<span id="result"></span></p>
        <img id="suiji" src="shitou.png" alt="">
        <p id="text">  &nbsp;</p>
    </div>
     <div id="wrap">
        <p>你要出什么？</p>
        <img id="stone" src="shitou.png">
        <img id="shears" src="jiandao.png">
        <img id="cloth" src="bu.png">
     </div>
</body>
</html>
大蹦蹦
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js完成石头剪刀布游戏（仅仅使用JavaScript完成）
StrangeKNL的博客
08-30 2351
学习js前期练手用，仅仅是js完成
js实现剪刀石头布小游戏
weixin_46671666的博客
09-03 3083
这两天用js做了个剪刀石头布的小游戏，实现的是用户与电脑进行对战，原理比较简单，在此记录一下。 下面先说一下游戏的流程： 1、进入游戏先要设置自己的昵称： 2、进入游戏，选择自己的手势： 3、选好之后会有你的信息显示，然后点“比一比”即可 4、显示结果，包含电脑的选择信息、胜负情况以及比分情况： 5、对应的点击各种手势之后会有背景音乐，以及结果出来之后会有胜负不同的背景音乐 然后下面讲述一下实现的代码： 样式Style： <style> .race{
JavaScript实现的石头剪刀布游戏源码分享
12-10
这个游戏主要设计到两点： 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布   杀  石头 石头  杀  剪子 。。。 根据以上特点找出规律，写出算法即可。 让电脑随机 这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。 随机刷屏 其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。 界面截图 最后上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的石头剪子布游戏 - 琼台博客</t
js基础实现石头剪刀布
James_C_666的博客
08-29 650
alert("电脑出剪刀，你赢了")alert("电脑出剪刀，你输了")alert("电脑出石头，你赢了")alert("电脑出石头，你输了")alert("电脑出剪刀，平局")alert("电脑出石头，平局")alert("电脑出布，你赢了")alert("电脑出布，你输了")alert("电脑出布，平局")var people = prompt("请输入石头 剪刀 布");
C语言模拟剪刀石头布（附源码）
qq_65226973的博客
05-06 1281
void judge_winner(int player_choose, int compueter_choose) {//判断胜利者。void print_choice(int choice){//数字转化为文字。char judge_continue() {//判断玩家是否需要继续游戏。int computer_choice( ) {//电脑选择。void introduce_game() {//游戏介绍。int player_choice() {//玩家选择。printf("你选择了:\n" );
发一个石头、剪刀、布游戏的代码
weixin_48881529的博客
09-01 507
playter = int(input('请输入石头----1，剪刀----2，布------3:'))print('计算机赢了')print('不分输赢')print('您赢了')
js实现石头剪刀布游戏
10-14
主要为大家详细介绍了js实现石头剪刀布游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js剪刀石头布猜拳游戏代码
04-25
在本项目中，"js剪刀石头布猜拳游戏代码" 是一个利用JavaScript（JS）和CSS3技术实现的互动游戏。这个游戏的核心是通过编程逻辑让电脑与玩家进行猜拳比赛，也就是我们熟知的“石头-剪刀-布”游戏。下面将详细解释...
js剪刀石头布猜拳游戏特效代码
03-20
【描述】中提到的"电脑和玩家石头剪刀布猜拳游戏源代码"意味着： 1. **AI逻辑**：电脑的决策过程可能包含一个简单的算法，如随机选择，或者更复杂的设计，比如模拟玩家的行为模式。 2. **用户交互设计**：游戏需要...
Python石头剪刀布完整代码
li_little_flower的博客
09-21 1万+
print(“游戏介绍：\n” "数字1代表石头\n" "数字2代表剪刀\n" "数字3代表布") 游戏次数 playnumber=0 玩家胜利次数 play_winner=0 电脑胜利次数 computer_winner=0 平局数 draw=0 while True: 判断输入的手势是否合理 while True: guess=int(input(“请输入你的手势：”)) if guess!=1 and guess!=2 and guess!=3: print(“输入有误，请重新输入
石头剪刀布简单代码
12-22
运用Java编写的小程序，简单易懂，绝对震撼,可以下载来玩玩，也可以可用于课程设计
C语言石头剪子布游戏(详解保姆级)
qq_60233095的博客
06-26 1万+
C语言石头剪子布游戏(详解保姆级)
H5+JavaScript 剪刀石头布小游戏完整代码
find1star的博客
09-13 2667
刚学JavaScript的时候做的，槽点太多了，就图一乐，别太较真。有精力的朋友可以自行改成jQuery版或者其他精简又高效写法，我比较懒就不改啦。效果图：（单局游戏中可计数）
JavaScript小游戏石头剪刀布
ICode联盟
04-28 415
下载地址 JavaScript代码实现的小游戏石头剪刀布 dd:
HTML中js简单实现石头剪刀布游戏
m0_54152049的博客
04-03 521
JS学腻了花两分钟写一下石头剪刀布小游戏吧
python：石头剪刀布源代码
Terry_20100630的博客
11-29 6937
前言 在python编程中，编出一个十分优秀的程序十分困难，今天小编给大家带来一期关于石头剪刀布的小游戏，手把手教学，包你学的清清楚楚、明明白白。 你将学到 while循环结构 random 随机模块 python输入与输出 if判断语句 elif判断语句 else判断语句 模块的导入 代码展示 import random choices = ['石头','布','剪刀'] print('石头剪刀布游戏！')...
微信小程序游戏开发│石头剪刀布游戏（附源码）
热门推荐
不断学习，不断进步，提高自己
08-14 1万+
石头剪刀布游戏功能中一方是电脑，另一方是玩家。游戏时电脑一直快速切换出拳显示，当玩家选择底部的剪子、石头、布后，则电脑出拳停止，并在紫色方块中显示用户的出拳图片。游戏判断出输赢结果，记录玩家赢的次数。对战一局后可以单击“再来！”按钮重新一局。...
石头剪刀布php源码,JavaScript实现的石头剪刀布游戏源码分享
weixin_36082346的博客
03-10 343
这个游戏主要设计到两点：首先是胜负运算由于石头剪刀布是循环性的石头 杀 剪子剪子 杀 布布 杀 石头石头 杀 剪子。。。根据以上特点找出规律，写出算法即可。让电脑随机这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。随机刷屏其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。界面截图最后上代码JS写的石...
vscode石头剪刀布网页游戏代码
最新发布
06-12
创建一个简单的VS Code项目来实现石头、剪刀、布（Rock, Paper, Scissors）网页游戏，通常涉及HTML、CSS和JavaScript的结合使用。以下是一个简化的步骤和代码示例： 1. **创建HTML结构**: ```html <!DOCTYPE html> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值