石头剪刀布游戏html

这是一个使用HTML、CSS和JavaScript编写的石头剪刀布游戏的代码展示。页面包含游戏界面、得分显示以及玩家和电脑的选择展示。通过阻止右键菜单、开发者工具和选择功能,提高了代码的安全性和用户体验。
摘要由CSDN通过智能技术生成

 

 

 

成果展示:

 

6eb1aa6dc87246dabe77d4827de96717.png

 

701b8a1956ca43de9bab78953ac8b1af.png

 

上代码!!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/normalize.css" />
  <title>石头剪刀布</title>
  <link rel="icon" href="https://haiyong.site/img/favicon.png" sizes="192x192" />
</head>

<body>
  <div id="container">
  <div style="font-size:30px;text-align:center;height:88px;line-height:88px;background:#662577;color:#ffffff">我是渴望的C++</div>
    <h2>石头剪刀布</h2>
    <div id="game-container">
      <div id="points">
        <label for="playerPoints">玩家分数:</label>
        <span class="playerPoints"></span>
        <label for="computerPoints">电脑分数:</label>
        <span class="computerPoints"></span>
      </div>
      <div id="choice">
        <div id="playerChoice">
          < img src="" alt="" id="playerChoiceImg">
          <h3 id="playerChoiceTxt"></h3>
        </div>
        <div id="computerChoice">
          < img src="" alt="" id="computerChoiceImg">
          <h3 id="computerChoiceTxt"></h3>
        </div>
      </div>
      <div id="buttons">
        <button class="btn">石头</button>
        <button class="btn">布</button>
        <button class="btn">剪刀</button>
      </div>
    </div>
  </div>
<footer class="page-footer">
  <span>关注我</span>
  <a href=" " target="_blank">
    < img class="touxiang"  src="https://haiyong.site/img/favicon.png">
  </a >
</footer>
<footer class="page-left">  
  <a href="https://code.haiyong.site/" target="_blank">
    < img class="touxiang"  src="https://code.haiyong.site/wp-content/uploads/2022/10/logo.jpg">
  </a >
  <span>不迷路</span>
</footer>
    <script>
        
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Ctrl+Shift+C
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 67)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                //Ctrl+S
                }else if((e.ctrlKey) && (e.keyCode == 83)){
                return false;
            }
        };
            document.oncontextmenu = function (){
                return false;
            }
        }
        document.onselectstart=new Function('event.returnValue=false;');
        document.body.onselectstart = function() {
            self.event.returnValue=false
          };
    </script>
  <script src="js/script.js"></script>
</body>

</html>


拿走不谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值