javascript猜拳,html猜拳游戏

JavaScript利用Math随机数，实现一个猜拳小游戏，

请输入你的出拳数字input /br /

button比赛/button

div/div

script

window.onload=function(){

   document.querySelector("button").onclick=function(){

      var m=document.querySelector("div");

      var x1=Number(document.querySelector("input").value);

      if(x11||x13){

         m.innerHTML="你输入的数字有误，只能是1、2、3";

      }else{

         var x2=Math.floor(Math.random()*3)+1;

         m.innerHTML="结果：";

         if(x1==x2){

            m.innerHTML+="打平了";

         }else if((x2-x1)==1||(x1-x2)==2){

            m.innerHTML+="你赢了";

         }else{

            m.innerHTML+="你输了";

         }

         m.innerHTML+="br /你出拳："+x1+"br /电脑出拳："+x2;

      }

   }

}

/script

相关问答

Q1: JS函数声明里面有参数，但是运行时却没有明显传参进去，期间发生了什么事情？

这个display是当前空间自身，相当于this

onclick可以动态传参

Html代码

复制代码 代码如下:

body

input id="certid" type="text" value="123456"

input id="btn" type="button" value="button" onclick=""

/body

Javascript代码

复制代码 代码如下:

script

function show(value1,value2)

{

alert(value1+","+value2);

}

var i = 10;

btn.onclick = function(){

show(certid.value,i);

};

script

这样就实现了动态给onclick事件句柄赋值,并支持参数的传递.

详细出处参考：

Q2: 猜拳的问题

石头、剪子、布

维基百科，自由的百科全书

Jump to: navigation, search

石头、剪刀、布

放大

石头、剪刀、布

石头、剪子、布，有时使用其他的次序来表达，如“剪刀、石头、布”，各地经常有其独特称呼（见下文）。这是一种在儿童和青少年中广泛流传的手技游戏，有时跟“掷硬币”、“掷骰子”有相同的功能，就是用来产生随机结果以作决策。但有时它并不随机，因为游戏者可以根据经验，判断对手的手法，所以说，玩这个游戏是有一定技巧的。

很多情况下，如“飞盘争夺赛”运动中或“大学辩论赛”赛场上，规则规定用“石头、剪子、布”来决定那一队伍先发（多于用掷硬币的方法）。

“石头、剪子、布”还在实况角色扮演游戏中起到决定随机结果的作用，因为“石头、剪子、布”不需要任何道具。

目录

[隐藏]

* 1 玩法

o 1.1 规则

o 1.2 口令

+ 1.2.1 跨地区

+ 1.2.2 华北

+ 1.2.3 华东

+ 1.2.4 华南

+ 1.2.5 西南

+ 1.2.6 西北

+ 1.2.7 其他方式的口令

o 1.3 不用手的玩法

o 1.4 其他国家或地区的玩法

* 2 策略

* 3 作弊

* 4 变种

* 5 数学及非递移性

* 6 比赛

o 6.1 国际“石头、剪刀、布”协会 世界冠军赛

* 7 历史

* 8 流行文化中的小知识

* 9 参考文献

* 10 外部链接

[编辑]

玩法

Image:SssStein.jpg Image:SssSchere.jpg Image:SssPapier.jpg

这三种基本手势(从左到右分别是石头，剪子，布)能赢其余两者之一。

[编辑]

规则

两个玩家先各自握紧拳头，然后其中一人或者两人一起共同念出口令，在说完最后一个音节的同时，两个玩家出示自己心中想好的手势（“石头”、“剪子”或“布”）。

石头

握紧的拳头。

剪子

或称“剪刀”，中指和食指伸直，其余手指握紧。

布

五指伸直，张开手掌。手心向下，或向上，或竖直（拇指向上）。

每一个手势代表一个“武器”，互相克制的原则是：剪子剪不动石头（石头胜利）；布被剪子剪开（剪子胜利）；石头被布包裹（布胜利）。如果双方出示了一样的手势，就是平局。

通常这种简短的比赛可能会被重复多次，以三局两胜或五局三胜来决定胜负。

[编辑]

口令

使用汉语的人在不同地区有不同的口令。有时，人们利用口令来称呼“石头、 剪子、布”这个游戏。

[编辑]

跨地区

1. “一—二—三！”（来自不同地区的人之间比赛时通常使用的。）

2. “石头—剪子—布！”

3. “猜（Cèi）—猜（Céi）—猜（Céi）！”（北方地区）

4. “丁（Dìng）—杠（Gǎng）—猜（Céi）！”（山西、内蒙古、安徽等地）

[编辑]

华北

1. “猜（Cèi）—丁（Dīng）—壳（Ké）！”（北京附近。）

2. “砸—剪子—包！” （天津）

3. “锛—铰—裹！”（天津）

4. “恰（qià）—气（qì）—敲（qiāo）！”（承德，也有将“气（qì）”读成带er音的，即“气儿（qìr）”）

5. “嘿—喽—喽！”（唐山）

[编辑]

华东

1. “Qíng—Zōng—Bāng！”（杭州）

2. “Qǐng—Dóng—Cèi！”（苏沪）

3. “Hòng—Lèng—Bā！”（温州）

4. “Jiāng—Jūn—Bò！”（浙北）（跟日语里的很像）

[编辑]

华南

1. “包—剪—揼！”（珠江三角洲一带）

2. “程寻磨较叉烧包，老鼠唔食豆沙包！”（广东，“磨较”亦有作“糯米”，“豆沙包”亦有作“奶油包”或“汉堡包”，或只讲“叉烧—包！”或“汉堡—包！”）

3. “锤子—剪刀—布！”（福建地区）

[编辑]

西南

1. “剪子—包袱—锤！”

2. “叮当铃子—响!”（四川地区）

3. “石头—剪子—帕子是包!”（重庆地区）

4. “Qing Zhong Shi Zai Se！”(自贡地区)

[编辑]

西北

1. “猜（Cài）—包—吃（Chi）！”（兰州及其周边地区）

2. “猜（Cài）—咚—吃（Chi）！”或者“包剪锤” （西安）

[编辑]

其他方式的口令

也有使用童谣的方式作为口令的。

[编辑]

不用手的玩法

在中国北方寒冷的冬季，即使在室外短时间伸出手也可能让人感到不舒服，而本游戏在玩者戴手套的情况下不能顺利进行，于是不用手的玩法应运而生。玩者双脚并拢在原地跳三下以实现同步。在第三跳落地时根据双脚的位置来表示所使用的“武器”。双脚并拢是石头，一前一后是剪子，一左一右是布。

[编辑]

其他国家或地区的玩法

澳大利亚人在玩此游戏时的口令经常是“剪刀，布，石头！”或“布，剪刀，石头！” ，重音放在“石头”（最后一个词）上。也有喊作“锤子，剪刀，布！”，重音的位置相同。在喊出最后一个词时（“石头”或“布”）做出手势，所以玩者们只能通过两次喊声以实现同步。

受到日生巴西人的影响，巴西人在玩此游戏时的口令是“Jan...ken...po!”，重音放在“po”上。在喊出“po”的同时做出手势。所以，与澳大利亚人的喊法相同，在真正出拳前只有两次喊声以实现同步。

在台湾，通常在进行游戏前都不喊口令。在数3声后，两个玩者同时做出手势，做出手势后手就不允许晃动。外来游客对此可能会感到很困惑，因为他们往往以为台湾人的第一次晃手是“石头”，故不少台湾人在与外国人进行游戏时会出“布”开始，以免混淆。

[编辑]

策略

选手之间的策略可包括应用心理学去预测，或者干扰对手的行为。使用迷惑性的语言（例如：“敦厚老实的石头哟，可是战无不胜的啊！”）去干扰对手的作法是允许的。

从数学上来讲，最优玩法（根据博弈论）其实就是一种随机的选择，因此，当排除心理因素后，这是一个简单并且直观的游戏，就如同和计算机玩一样。但是，这里所说的“最优”是指不存在有比期望的随机概率更好的玩法。然而，对手如果不是采用“最优”策略，而是采用某种“次优”策略的话，采用随机玩法并不一定是最好的玩法。事实上，如果对手是人或者非随机程序的话，那么几乎可以肯定他采用的是某种“次优”策略，这种情况下，针对对手的弱点可以设计出一个更好的策略。基于这种思路而设计的Roshambot计算机程序，轻松击败了人类玩家（甚至包括它的开发者Perry Friedman，他曾经在2001年8月击败7名对手，包括前世界扑克大赛冠军Phil Hellmuth，并赢得800美元的奖金）。阿尔伯达大学的扑克选手Darse Billings组织了一个Roshambot程序大赛，希望能够通过这种活动研究这些的非随机的概率，以及它们在计算机游戏中的其他各种应用（例如，在扑克游戏中，发掘推测对手各种非随机出牌模式是游戏过程中的一个重要策略）。

11岁的Alice Maclean在2005年提出了一种引人注意的出拳策略。当时拍卖行Christie's和Sotheby's协商，决定采用“石头-剪子-布”这种游戏来决定如何对珍贵的古董进行分配。Alice Maclean的父亲Nicholas当时是Christie's的一名雇员，他向女儿征询了一些意见。后来根据记者报道，Alice Maclean的策略可以归结为以下几个法则：“首先每个人都知道你要先出剪刀。出石头太明显了，剪刀能够赢布”。

[编辑]

作弊

刚接触这项游戏的人通常很快会学得一个技巧，那就是尽量不出布，直到对手认为你可能会出石头。在多出的毫秒之间，你便可以微调自己的出拳策略。让对手认为你会出布或剪刀也有一样的效果；不过，除非你能善加运用“折返”(double-back)策略，不然隐藏出布的念头极有可能会引发对手也同样出布的直觉。

出拳之前的开赛仪式是喊口令（“1—2—3，出拳！”），这样做是为了使比赛双方同步，以达到同时出拳的目的。这样做对于初次见面的比赛选手是大有文章可作的，原因是喊口令的速度通常还没确定下来。口令速度默认是以快者为准。这样给快的一方带来好处，也就是他可以掌控比赛的节奏，使得对手花上更多精力去追上进度，而不是集中精神去出招。

[编辑]

变种

见 石头、剪子、布变种

[编辑]

数学及非递移性

石头、剪子、布具有数学上的非递移性，递移关系R的定义是（a R b 与 b R c）则a R c。一个集合同时具有反身性、反对称性与递移性时，可称作偏序关系，类似于“大”与“小”的关系。理论上，一个集合里较“大”的元素是比较接近最优化选择，可是，在这个集合里并不存在。因为石头、剪子、布都不具递移关系，如：石头赢剪刀，剪刀赢布、布赢石头。因为元素a,b,c都可传递到自己身上，所以这个关系可以称作非递移性。

[编辑]

比赛

石头、剪子、布的比赛偶尔在不同地方举行。有些比赛的网站讽刺其他游戏的网站。真正的石头、剪子、布的比赛是一个有趣的心理学较量。石头、剪子、布的策略是随机地选一个，但是人类不能达到真正随机，所以比赛的技术在于利用对手的非随机性。某些有经验的选手能连续达到比赛决赛就能证明技术能影响比赛结果

在日本, じゃんけん 比赛常常出现在电视综艺节目，特别是明星之间的比赛。石头、剪子、布也用来做广告来争取观众参与游戏。

[编辑]

国际“石头、剪刀、布”协会 世界冠军赛

自2002年起国际“石头、剪刀、布”协会制定一系列用于国际比赛的规则，举行年度国际性世界冠军赛还有常年举办很多地区性和全国性的活动。该冠军赛不单吸引了来自五湖四海的选手，更是争取到广泛的国际媒体关注。国际“石头、剪刀、布”协会的活动以其巨额的现金奖品，精心的舞台布置和各具特色的选手而名扬四海。

国际“石头、剪刀、布”协会 世界冠军赛 自2002年来的赛果

年份 主办城市 冠军 性别 国籍

2002 加拿大安大略省多伦多 Pete Lovering 男 加拿大

2003 加拿大安大略省多伦多 Rob Krueger 男 加拿大

2004 加拿大安大略省多伦多 Lee Rammage 男 加拿大

2005 加拿大安大略省多伦多 Andrew Bergel 男 加拿大

2004年起美国电视网（福克斯体育网Fox Sports Net）开始转播该冠军杯赛事。

[编辑]

历史

如同围棋和麻将，“石头、剪刀、布”，或“猜拳”，也是由中国人发明的。按照明朝人谢肇浙所写的《五杂俎》这本书，猜拳的传统可以追溯到汉朝的手势令。 在与亚洲交往之前，西方没有任何有关“石头、剪刀、布”的记载。19世纪后期的西方的作家在提到它的时候总认为是一种亚洲游戏。中国人和韩国人一般都叫“石头、剪刀、布”，而日本人则改成了“石头、剪刀、纸（paper）”。这个事实暗示着“石头、剪刀、纸”是从19世纪的日本传入美洲的。

[编辑]

流行文化中的小知识

* 在世嘉 Master System 的游戏《阿历克斯在魔域里》，阿历克斯·吉特就跟他的敌人玩上了“石头、剪刀、布 ”。而且，游戏里的大头目就叫Janken

* 在《That '70s Show》节目中出现过“石头、剪子、布”的一个比较时尚的变种：“脚、蟑螂、核弹”。脚能击败蟑螂，因为脚能踩扁它；核弹赢脚，因为核弹能炸飞它；而蟑螂赢核弹则是因为蟑螂在核弹爆炸后能够存活下来。

* 皮尔斯·安东尼在他的幻想系列Xanth里弄出了一新游戏变种，叫作“火，水，沙”，以推动情节发展。对于这三种招数相生相克的关系有两种看法。美人鱼族认为水能灭火，火能融沙，沙能盖水。龙族则认为火能蒸发水，水能稀释沙，沙能扑灭火。这种分歧造成了两种族间长时间的世仇。

* 在电视系列动画片《南方公园》中，Cartman和他的朋友们常玩“用Rochambeau来决定”的游戏，游戏方法是猛踢对手的档部，第一个翻倒的人就是失败者。这个，当然意味着第一个出招的人往往就是胜利者。这是一种选择的方式，而且称作Rochambeau（石头、剪子、布的英文）。但需要郑重指出的是，这个游戏显然与于此处讨论的实际意义上的“石头、剪子、布”的游戏不同。

* 在美国电视剧宋飞正传，Kramer 与 Mickey 猜拳：

KRAMER 与 MICKEY: 石头、剪子、布(英文为paper，即纸)，出拳!

MICKEY: 嗯，石头赢布!

(Mickey 打 Kramer 的手掌)

KRAMER: 布不是赢石头的吗？

MICKEY: 不是，扔石头可以飞穿纸嘛。

KRAMER: 哪什么才能赢石头？

MICKEY: (望一望手) 没有东西可以赢石头。

KRAMER: 那好，我们再来。

KRAMER MICKEY: 石头、剪子、布(英文为paper，即纸)，出拳!

KRAMER: 石头。

MICKEY: 石头。

双方不断出石头。

* 在电视连续剧“辛普森一家”里， The Simpsons, Bart Simpson以下简称Bart 和 Lisa Simpson以下简称Lisa 在9F16一集里玩了一把这游戏, "The Front前线", 以确定在他们写的脚本Itchy and Scratchy中，谁的名字排头:

LISA: 看来,只有一种办法决定这事了，石头、剪刀、布.

LISA'S 想: 可怜的Bart，很容易就猜到他的招数，他总出“石头”

BART'S 想:好啊“石头”，战无不胜！

BART: 石头!

LISA: 布.

BART: 啊!

[编辑]

参考文献

* Sogawa, Tsuneo (2000). "Janken". Monthly Sinica, Vol.11, No.5. (Japanese)

* Culin, Stewart. (1895). Korean Games, With Notes on the Corresponding Games at China and Japan. (evidence of nonexistence of Rock, Paper, Scissors in the West)

* Gomme, Alice Bertha. (1894, 1898). The traditional games of England, Scotland, and Ireland, 2 vols. (ditto)

[编辑]

外部链接

* 国际“石头、剪刀、布”协会

* 地方性的“石头、剪刀、布”变种, 从 "Multiculturalpedia"

* RoShamBo 程序比赛

* BombBeatsThemAll, AIM Rock Paper Scissors bot that allows two people to play RPS over AIM

* 斯坦福大学的 RoshamBot

* Javascript RPS 游戏在 CoolToons

* 用Email来玩的“石头、剪刀、布” (二人)

* stensakspapir.dk - 挑战你的朋友或者看人家玩 (Flash制品)

取自""

Category: 儿童游戏

参考资料：

Q3: 怎么用JavaScript制作一个猜拳游戏？？？？

!DOCTYPE html

html

head

style type="text/css"

    #main{

        text-align:center;

        margin-left:25%;

        width:50%;

        border:1px solid black;

    }

    #player,#result,#cpu{

        height:100%;

        float:left;

    }

    #player{

        background:#dde;

    }

    #cpu{

        background:#ecc;

    }

    #player,#cpu{

        width:25%;

    }

    #result{

        width:50%;

    }

    #viewBox{

        width:80%;

        height:45%;

    }

    #choiceBox .item{

        float:left;

        width:33.33%;

        height:100%;

        line-height:100%;

        background:#bbe;

        cursor:pointer;

    }

    #choiceBox{

        height:25%;

        width:60%;

        margin-left:20%;

    }

/style

/head

body

div id="main"

    div id="viewBox"

        div id="player"玩家/div

        div id="result"/div

        div id="cpu"电脑/div

    /div

    div id="choiceBox"

        span class="item"剪刀/span

        span class="item"石头/span

        span class="item"布/span

    /div

/div

script type="text/javascript"

    var _main = document.getElementById("main");

    var _viewBox = document.getElementById("viewBox");

    var _choiceBox = document.getElementById("choiceBox");

    var _player = document.getElementById("player");

    var _result = document.getElementById("result");

    var _cpu = document.getElementById("cpu");

    _choiceBox.childNodes[1].onmouseover =

    _choiceBox.childNodes[3].onmouseover =

    _choiceBox.childNodes[5].onmouseover = function(){this.style["background"] = "#aae"};

    _choiceBox.childNodes[1].onmouseout =

    _choiceBox.childNodes[3].onmouseout =

    _choiceBox.childNodes[5].onmouseout = function(){this.style["background"] = "#bbe"};

    function resize(){

        var width = window.innerWidth;

        var height = window.innerHeight;

        var smaller = width  height ? height : width;

        _main.style["height"] = height * 0.5 + "px";

        _main.style["margin-top"] = height * 0.2 + "px";

        _main.style["font-size"] = smaller * 0.08 + "px";

        _player.style["line-height"] = height * 0.225 + "px";

        _result.style["line-height"] = height * 0.225 + "px";

        _cpu.style["line-height"] = height * 0.225 + "px";

        _viewBox.style["padding"] = height * 0.05 + "px " + width * 0.05 + "px";

        _choiceBox.childNodes[1].style["line-height"] = height * 0.125 + "px";

        _choiceBox.childNodes[3].style["line-height"] = height * 0.125 + "px";

        _choiceBox.childNodes[5].style["line-height"] = height * 0.125 + "px";

        _choiceBox.style["font-size"] = smaller * 0.04 + "px";

    };

    resize();

    window.onresize = resize;

    //以下是猜拳逻辑部分

    var choiceItems = [{name:"剪刀"},{name:"石头"},{name:"布"}];

    choiceItems[0]["next"] = choiceItems[1];

    choiceItems[0]["pre"] = choiceItems[2];

    choiceItems[1]["next"] = choiceItems[2];

    choiceItems[1]["pre"] = choiceItems[0];

    choiceItems[2]["next"] = choiceItems[0];

    choiceItems[2]["pre"] = choiceItems[1];

    _choiceBox.childNodes[1].onclick = function(){cal(choiceItems[0]);};

    _choiceBox.childNodes[3].onclick = function(){cal(choiceItems[1]);};

    _choiceBox.childNodes[5].onclick = function(){cal(choiceItems[2]);};

    function cal(player_choice){

        var cpu_choice = choiceItems[parseInt(Math.random() * 3)];

        _player.innerHTML = player_choice["name"];

        _cpu.innerHTML = cpu_choice["name"];

        if(cpu_choice == player_choice){

            _result.innerHTML = "-";

        }else if(cpu_choice == player_choice["pre"]){

            _result.innerHTML = "win";

        }else if(cpu_choice == player_choice["next"]){

            _result.innerHTML = "loss";

        }

    }

/script

/body

/html