原生JS-----一个剪刀石头布游戏
html:
<h1>这是一个剪刀石头布游戏</h1> <h2>请出拳吧!少年!</h2> <h3>您已经获胜了<span id="win-count"></span>次!!!</h3> <div id="choose"> <img src="images/jiandao.jpg" alt="剪刀" id="jiandao" width="200" height="200"> <img src="images/shitou.jpg" alt="石头" id="shitou" width="200" height="200"> <img src="images/bu.jpg" alt="布" id="bu" width="200" height="200"> </div> <img src="" id="yourchoose" alt="" width="200" height="200"> <span id="result"></span> <img src="" id="computer" alt="" width="200" height="200">
css:
<style type="text/css"> * { margin: 0; padding: 0; } body { background: gray; text-align: center; color: aqua; } #choose { margin: 50px auto; height: 200px; width: 800px; } #choose img { cursor: pointer; margin-right: 95px; } #choose img:last-child { margin-right: 0; } #result { font-size: 20px; } #win-count { font-size: 20px; color: red; } </style>
Javascript:
<script type="text/javascript"> function $ (id) { return document.getElementById(id); } var winCount = 0; function Game (choose) { choose.addEventListener(\'click\', function () { if (choose == $(\'jiandao\')) { $(\'yourchoose\').src = "images/jiandao.jpg"; } else if (choose == $(\'shitou\')) { $(\'yourchoose\').src = "images/shitou.jpg"; } else { $(\'yourchoose\').src = "images/bu.jpg"; } var computerResult = Math.random(); if (computerResult < 0.33) { $(\'computer\').src = "images/jiandao.jpg"; if (choose == $(\'jiandao\')) { $(\'result\').innerHTML = "平手"; } else if (choose == $(\'shitou\')) { $(\'result\').innerHTML = "你赢了"; winCount++; } else { $(\'result\').innerHTML = "你输了"; } } else if (computerResult < 0.67) { $(\'computer\').src = "images/shitou.jpg"; if (choose == $(\'shitou\')) { $(\'result\').innerHTML = "平手"; } else if (choose == $(\'bu\')) { $(\'result\').innerHTML = "你赢了"; winCount++; } else { $(\'result\').innerHTML = "你输了"; } } else { $(\'computer\').src = "images/bu.jpg"; if (choose == $(\'bu\')) { $(\'result\').innerHTML = "平手"; } else if (choose == $(\'jiandao\')) { $(\'result\').innerHTML = "你赢了"; winCount++; } else { $(\'result\').innerHTML = "你输了"; } } $(\'win-count\').innerHTML = winCount; }); } Game($(\'jiandao\')); Game($(\'shitou\')); Game($(\'bu\')); </script>
版权声明:本文为duxiu-fang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。