JavaScript基础-练习-页面小游戏剪刀石头布

文章目录

1. 最简版本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    div.status {
        margin: 5px;
        background-color: lightgrey;
        width: 200px; 
        height: 160px;
        /* border: 2px solid green; */
   
    }
    div.in {
        float: left;
        width: 90px; 
        height: 90px;
    }
    p.pIn {
        text-align: center;
    }

    img {
    /* border: 1px solid #ccc; */
    height: 80px;
    width: 80px;
    display: block;
    margin: 5px;
    border: 2px solid;
}
</style>
</head>
<body>


<select id="numb" name="numb">
    <option value="0">剪刀</option>
    <option value="1">石头</option>
    <option value="2">布</option>
    </select><br><br>


<button type="button" onclick="myFunction()">出拳</button><br>

<!--定义p元素，输出JS的结果 -->
<div class="status">
    <div class="in">
        <p class="pIn">您</p>
        <P id="xPicture"></P>
    </div>
    <div class="in">
        <p class="pIn">对手</p>
        <P id="yPicture"></P>

    </div>
    
</div >


<p id="result"></p>
<!-- <img src="./images/a0.png"> -->


<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;
    y = Math.floor(Math.random() * 3);
    var yObject = new Array();
    yObject[0] = "剪刀";
    yObject[1] = "石头";
    yObject[2] = "布";
    imgX = "<img " + "src="+"\"\./images/a"+x+"\.png\"" +" >"
    imgY = "<img " + "src="+"\"\./images/a"+y+"\.png\"" +" >"
    z = x - y;
    if (z < 0){
        z = z +3
    };
    switch (z){
        case 0: 
            text="平局";
            break;
        case 1: 
            text="你赢了";
            break;
        case 2: 
            text="你输了";
            break;

    }
    
    document.getElementById("result").innerHTML = text;
    document.getElementById("xPicture").innerHTML = imgX;
    document.getElementById("yPicture").innerHTML = imgY;
    document.getElementById("yString").innerHTML = yObject[y];
}
</script>

</body>
</html>
  • 效果
    在这里插入图片描述

2. 网页版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}
div.out {
	margin-left:26%;
	/* padding:1px 16px; */
	background-color: #f1f1f1;
	margin-top: 10px;
	padding: 0;
	height: 1000px;

}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
    div.status {
        margin: 0 auto;
        background-color: lightgrey;
        width: 190px; 
        height: 160px;
        /* border: 2px solid green; */
   
    }
    div.in {
        float: left;
        width: 90px; 
        height: 90px;
    }
    p.pIn {
        text-align: center;
    }

    img {
    /* border: 1px solid #ccc; */
    height: 80px;
    width: 80px;
    display: block;
    margin: 5px;
    border: 2px solid;
}
</style>
</head>
<body>
    <div id="header" style="background-color:#adbfc7;">
        <h1 style="margin-bottom:0; text-align: center;">html练习册</h1></div>

        <ul>
            <li><a class="active" href="./index.html">主页</a></li>
            <li><a href="./game01.html">剪刀石头布</a></li>
            <li><a href="#contact">决斗吧</a></li>
            <li><a href="#about">关于</a></li>
          </ul>   

<div class="out" >
	<div style="text-align: center;">
<select id="numb" name="numb" style="margin: 10px;">
    <option value="0">剪刀</option>
    <option value="1">石头</option>
    <option value="2">布</option>
    </select><br><br>


<button type="button" onclick="myFunction()">出拳</button><br><br>

<!--定义p元素，输出JS的结果 -->
<div class="status">
    <div class="in">
        <p class="pIn">您</p>
        <P id="xPicture"></P>
    </div>
    <div class="in">
        <p class="pIn">对手</p>
        <P id="yPicture"></P>

    </div>
    
</div >


<p id="result">结果</p>
<!-- <img src="./images/a0.png"> -->
</div>
</div>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;
    y = Math.floor(Math.random() * 3);
    var yObject = new Array();
    yObject[0] = "剪刀";
    yObject[1] = "石头";
    yObject[2] = "布";
    imgX = "<img " + "src="+"\"\./images/a"+x+"\.png\"" +" >"
    imgY = "<img " + "src="+"\"\./images/a"+y+"\.png\"" +" >"
    z = x - y;
    if (z < 0){
        z = z +3
    };
    switch (z){
        case 0: 
            text="平局";
            break;
        case 1: 
            text="你赢了";
            break;
        case 2: 
            text="你输了";
            break;

    }
    
    document.getElementById("result").innerHTML = text;
    document.getElementById("xPicture").innerHTML = imgX;
    document.getElementById("yPicture").innerHTML = imgY;
    document.getElementById("yString").innerHTML = yObject[y];
}
</script>

</body>
</html>
  • 结果
    在这里插入图片描述

posted on 2022-05-02 22:42  运维开发玄德公  阅读(9)  评论(0)  编辑  收藏  举报  来源

导航