当前位置:
首页 > 网站开发 > JavaScript >
-
JavaScript教程之原生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>
栏目列表
最新更新
求1000阶乘的结果末尾有多少个0
详解MyBatis延迟加载是如何实现的
IDEA 控制台中文乱码4种解决方案
SpringBoot中版本兼容性处理的实现示例
Spring的IOC解决程序耦合的实现
详解Spring多数据源如何切换
Java报错:UnsupportedOperationException in Col
使用Spring Batch实现批处理任务的详细教程
java中怎么将多个音频文件拼接合成一个
SpringBoot整合ES多个精确值查询 terms功能实
数据库审计与智能监控:从日志分析到异
SQL Server 中的数据类型隐式转换问题
SQL Server中T-SQL 数据类型转换详解
sqlserver 数据类型转换小实验
SQL Server数据类型转换方法
SQL Server 2017无法连接到服务器的问题解决
SQLServer地址搜索性能优化
Sql Server查询性能优化之不可小觑的书签查
SQL Server数据库的高性能优化经验总结
SQL SERVER性能优化综述(很好的总结,不要错
uniapp/H5 获取手机桌面壁纸 (静态壁纸)
[前端] DNS解析与优化
为什么在js中需要添加addEventListener()?
JS模块化系统
js通过Object.defineProperty() 定义和控制对象
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比