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   运维开发玄德公  阅读(9)  评论(0)  编辑  收藏  举报  

相关博文：
·  JavaScript基础-02-语句和循环（if语句，Switch语句，for循环，for/in，while循环，do/while，循环控制 break、continue、bresk）
·  CSS基础-15-下拉菜单
·  剪刀石头布小游戏
·  石头、剪刀、布 小游戏， 三局两胜制，有一方累计胜利两次，则游戏结束 （每次开始，玩家和电脑都要出拳）
·  JAVA实现石头剪刀布
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示
AI IDE Trae