利用js制作一个简单的QQ农场小游戏

 html文件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ农场</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="main">
			<div class="table_jz">
				<table>
					<tr>
			<td><img src="img/none.png" id="0" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="1" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="2" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="3" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="4" onclick="changeState(this.id)"></td>
					</tr>
					<tr>
			<td><img src="img/none.png" id="5" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="6" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="7" onclick="changeState(this.id)"></td>
                        <
  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,我可以为您提供一个HTML制作的猜拳小游戏代码示例,但是关于利用Eclipse制作简单UI猜拳小游戏的代码,因为涉及到具体的编程语言和技术,建议您使用相关的教程或者参考资料进行学习和实践。以下是HTML制作猜拳小游戏的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>猜拳小游戏</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 50px; } .option { margin: 10px; padding: 10px; background-color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease; } .option:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .option img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .result { margin-top: 50px; text-align: center; font-size: 24px; font-weight: bold; } </style> </head> <body> <h1>猜拳小游戏</h1> <div class="container"> <div class="option" data-value="1"> <img src="https://i.imgur.com/8pYv5Xr.png" alt="石头"> <p>石头</p> </div> <div class="option" data-value="2"> <img src="https://i.imgur.com/0aLqjYn.png" alt="剪刀"> <p>剪刀</p> </div> <div class="option" data-value="3"> <img src="https://i.imgur.com/6jRVIzG.png" alt="布"> <p>布</p> </div> </div> <div class="result"></div> <script> // 获取所有选项元素 const options = document.querySelectorAll('.option'); // 获取结果元素 const result = document.querySelector('.result'); // 定义猜拳结果数组 const results = ['平局', '你赢了', '你输了']; // 定义选项名称数组 const names = ['石头', '剪刀', '布']; // 为每个选项元素绑定点击事件 options.forEach(option => { option.addEventListener('click', () => { // 生成计算机随机选择的选项值 const computerValue = Math.floor(Math.random() * 3) + 1; // 获取当前选项的值 const userValue = parseInt(option.dataset.value); // 计算猜拳结果 const resultValue = (userValue - computerValue + 3) % 3; // 显示结果 result.textContent = `你选择了${names[userValue - 1]},计算机选择了${names[computerValue - 1]},${results[resultValue]}`; }); }); </script> </body> </html> ``` 这是一个简单HTML页面,包含一个标题、三个选项和一个结果显示区域。每个选项都有一个图片和一个名称,并且带有一个自定义属性`data-value`表示选项的值(1表示石头,2表示剪刀,3表示布)。当用户点击任意一个选项时,JavaScript代码会生成计算机随机选择的选项值,并计算出猜拳结果,最后在结果显示区域显示结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值