怎么用JavaScript制作一个猜拳游戏????

JavaScript018

怎么用JavaScript制作一个猜拳游戏????,第1张

<!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>

大哥,刚刚看到你的就开始写了。各种功能都有,包括判断你输入的字符是否正确,假如不符合的字符就提示。不玩了就可以直接按0退出。

然后,只要是赢三次,输三次都自动退出,并输出你输赢,还可以自动共玩多少局,输赢局数统计!希望能帮到您。

/*

猜拳游戏思路

1、定义输入函数

2、提示用户输入猜拳数值

3、定义随机一个数作为电脑数值

4、判断[用户输入数值]与 [电脑随机数值]

5、能够相等就是打平,不能相等就利用&&、||逻辑符判断输赢

6、设定数值1-石头 2-剪刀  3-布

*/

import java.util.*//嵌入Java.util包所有

public class Cq{

public static void main(String[] args){

int win=0//赢的记录

int lose=0//输的记录

int all=1//计数总的局数

int a=1//控制循环条件使用

System.out.println("--------------猜拳游戏---------------")

System.out.println("游戏规则:赢三次便赢,输三次便输。")

while(a>0){//假如a=0的话就不用继续玩

Scanner in=new Scanner(System.in)//定义输入函数in,Scanner包功能,输入数值用的

System.out.println("请输入一个数值:1、石头    2、剪刀     3、布     0、退出游戏")//提示输入数值

System.out.println(" ")//空行

int x=in.nextInt()//让用户输入X的数值

Random on=new Random()//定义电脑的随机数值的函数on

int y=on.nextInt(3)+1//定义y随机函数数值范围(1--3)

if(x>=4){   //判断用户是否输入非1--3范围

System.out.println("亲,请正确输入:1、石头 2、剪刀 3、布。你输入了:"+x)

}else if(x==0){

a=0

System.out.println("欢迎再次玩“猜拳游戏”!")

return

}

else{

/*下面是判断用户输入x的数值 嵌套if*/

if(x==y){

if(x==1){ //判断打平的情况

System.out.println("你:石头------电脑:石头    PK:平手"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}

else if(x==2){

System.out.println("你:剪刀------电脑:剪刀   PK:平手"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}else {

System.out.println("你:布------电脑:布    PK:平手"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}

/*   打平手的判断END*/

}else if(x==1&&y==2||x==2&&y==3||x==3&&y==1){ //开始判断赢的情况

if(x==1&&y==2){

win++//win1

System.out.println("[你]:石头---VS---[电脑]:剪刀    PK:赢了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}else if(x==2&&y==3){

win++//win2

System.out.println("[你]:剪刀---VS---[电脑]:布   PK:赢了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}else {

win++//win3

System.out.println("[你]:布---VS---[电脑]:石头     PK:赢了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}

//判断赢的情况END

}else {//开始判断输的情况

if(x==1&&y==3){

lose++

System.out.println("[你]:石头---VS---[电脑]:布    PK:输了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}else if(x==2&&y==1){

lose++

System.out.println("[你]:剪刀---VS---[电脑]:石头    PK:输了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}else {

lose++

System.out.println("[你]:布---VS---[电脑]:剪刀    PK:输了!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

all++

}

}//判断输的情况END

if(win==3){

System.out.println("")

System.out.println("")

System.out.println("游戏结束:恭喜您!你已经赢了[电脑]三局!!!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

a=1

return

}else if (lose==3) {

a=1

System.out.println("")

System.out.println("")

System.out.println("游戏结束:很遗憾,电脑赢了你三盘!继续加油!"+"    共玩"+all+"局,"+"赢:"+win+",输:"+lose)

return

}

else{continue}

}//判断是否输入数值1-3范围,如果不是1-3会提醒重新输入 END

}//while

}

}