HTML+CSS+JS实现的小游戏-"剪刀石头布"

效果

代码

。t1.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="../css/t1.css">
head>
<body>
<div>
    <div id="top">
        <div id="you">
            <div class="desc">
                you
            div>
            <div class="choose">
                <img src="../img/shitou.jpg">
            div>
            <div class="win">
                <img src="../img/win.jpg" style="display: none">
            div>
        div>
        <div id="me">
            <div class="desc">
                me
            div>
            <div class="choose">
                <img src="../img/shitou.jpg">
            div>
            <div class="win">
                <img src="../img/win.jpg" style="display: none">
            div>
        div>
    div>
    <div id="bar">
        <button>再来一局button>
    div>
div>
body>
html>
<script src="./js/t1.js">script>

。t1.css

#top {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    /*background-color: skyblue;*/
}

.desc{
    /*background-color: palegreen;*/
    width: 380px;
    height: 38px;
    text-align: center;
    font-size: 28px;
}

.choose{
    /*background-color: palevioletred;*/
    text-align: center;
    margin-top:20px;
}

.choose img{
    width: 85%;
}

.win{
    text-align: center;
}

.win img{
    margin-top: 20px;
    height: 120px;
}

#you, #me {
    /*background-color: yellow;*/
    height: 500px;
    width: 380px;
}

#bar{
    display: flex;
    justify-content: space-around;
}

#bar button{
    margin-top: 20px;
    width: 300px;
    height: 80px;
    background-color: yellow;

    font-size: 30px;
    font-weight: bold;
    color: rgba(55, 104, 119, 1);
    border-radius:8%;
}

。t1.js

window.onload = function () {
    guess();
    document.getElementById("bar").getElementsByTagName("button")[0].onclick = function () {
        guess();
    };

    /**
     * 一次剪刀石头布游戏
     */
    function guess() {
        let chooses = ['shitou', 'jiandao', 'bu'];

        //出拳
        let you = parseInt(Math.random() * 3);
        let me = parseInt(Math.random() * 3);

        let chooseElements = document.getElementsByClassName("choose");
        chooseElements[0].getElementsByTagName("img")[0].src = "../img/" + chooses[you] + ".jpg";
        chooseElements[1].getElementsByTagName("img")[0].src = "../img/" + chooses[me] + ".jpg";

        //判断谁赢了
        let winner;
        if (chooses[you] == 'shitou') {
            if (chooses[me] == 'shitou') {
                winner = 'both';
            } else if (chooses[me] == 'jiandao') {
                winner = 'you';
            } else {
                winner = 'me';
            }
        } else if (chooses[you] == 'jiandao') {
            if (chooses[me] == 'shitou') {
                winner = 'me';
            } else if (chooses[me] == 'jiandao') {
                winner = 'both';
            } else {
                winner = 'you';
            }
        } else {//you put 布
            if (chooses[me] == 'shitou') {
                winner = 'you';
            } else if (chooses[me] == 'jiandao') {
                winner = 'me';
            } else {
                winner = 'both';
            }
        }
        let winElements = document.getElementsByClassName("win");

        if (winner == 'you') {
            winElements[0].getElementsByTagName("img")[0].style.display = "inline";
            winElements[1].getElementsByTagName("img")[0].style.display = "none";
        } else if (winner == 'me') {
            winElements[1].getElementsByTagName("img")[0].style.display = "inline";
            winElements[0].getElementsByTagName("img")[0].style.display = "none";
        } else {
            //如果出的一样则重来
            guess();
        }

        //log
        console.log('you:' + chooses[you] + ", me:" + chooses[me] + ", winner:" + winner);
    }
}

图片

。jiandao.jpg
HTML+CSS+JS实现的小游戏-
。shitou.jpg
HTML+CSS+JS实现的小游戏-
。bu.jpg
HTML+CSS+JS实现的小游戏-
。win.jpg
HTML+CSS+JS实现的小游戏-

html的结构图

HTML+CSS+JS实现的小游戏-

你可能感兴趣的:(002前端-HTML&CSS)