<html>
<head>
<title>大富翁</title>
<style>
body{
background-image: url(http://img95.699pic.com/photo/40118/7559.gif_wh300.gif);
background-size: 100% 100%;
}
#title{
margin-left: 30px;
text-align:center;
font-size: 50px;
}
#container{
margin-top:30px;
margin-right: 150px;
width: 380px;
height: 520px;
background-color: #fff;
float:right;
}
#rules{
margin-top: 0px;
margin-left: 25px;
}
#anpinledao{
font-size:40px;
margin-left: 25px;
}
#fifty{ width: 30px; }
#onehundred{ width: 30px;}
#play{
width: 120px;
border-color: black;
border-style: solid;
padding:3px;
margin-top: -60px;
margin-left:540px;
line-height: 25px;
position: absolute;
}
#thanks{
margin-left:25px;
}
.bai{
width: 50px;
}
.img {
position:absolute;
top:0;
height: 37px;
width:37px;
cursor: pointer;
right: 50%;
transform: translateX(-50%);
animation: drop 5s linear;
}
.box {
position:absolute;
top:0;
width:37px;
height:37px;
cursor: pointer;
right: 50%;
transform: translateX(-50%);
animation: drop 4s linear;
}
@keyframes drop {
0% {
top: 120px;
}
100% {
top: calc(100vh - 80px);
}
}
</style>
</head>
<body>
<p><b><span id="title">大富翁</span></b></p><div id="container"><!--游戏面板--></div>
<div id="rules"><br><b>游戏规则-策略小游戏</b></br>
<br>在这个游戏中，一共有两种钞票<img src="silver.png" id="fifty">50米和<img src="gold.png" id="onehundred">100米</br>
<br>点击钞票即可增加财富额</br>
<br>每次游戏限时30s,其中你只有10次捡起钞票的机会</br>
<br>值得注意的是!!!<b>掉落的100米数量都是不同且有限的</b></br>
<br>你会采取什么策略来得到更多的钱呢</br>
<br>还在等什么呢,快点开始游戏吧！</br></div>
<div id="thanks"><p><b>致谢：</b></p>
<p>感谢刘爽同学提供的帮助与鼓励</p>
<p>图片来源:http://img95.699pic.com/photo/40118/7559.gif_wh300.gif</p></div>
<div><span id="anpinledao"><b>安贫乐道</b></span><img src="bai.png" class="bai"><img src="bai.png" class="bai"><img src="bai.png" class="bai"></div><div id="play">
<div id="timeleft">倒计时:30s</div>
<div id="click">已点击:0次</div>
<div id="score">累积获得:0元</div>
<div><button onclick="startGame()">开始游戏</button></div>
<div><button onclick="endgame()">结束游戏</button><div>
</div>
</body>
<script>
var container = document.getElementById("container");
var score = 0;
var timer1 = null;
var timer2=null;
var countsecond=null;
var count1 = 0;
var count2=0;
var count=0;
var click=0;
var timeleft = 30;
var play=null;
var interval=1000;
var gap=1000;
function createimg() {
var img= document.createElement("img");//添加money元素
img.src="silver.png"
img.className = "img";
img.style.right = Math.floor(Math.random() * 320+150) + "px";
container.appendChild(img);
img.onclick = function() {//点击消除money
container.removeChild(img);
count1++;
};
var checkBottom = setInterval(function() {//触底消失
if (img.getBoundingClientRect().bottom >= 630) {
clearInterval(checkBottom);
container.removeChild(img);
}
}, 10);
timer1=setTimeout(function(){//使money以不同时间间隔落下
createimg();
setInterval(function(){interval=Math.random()*2000+1000},1000);
}, interval);}
function createBox() {//同上
var box= document.createElement("img");
box.src="gold.png"
box.className = "box";
box.style.right = Math.floor(Math.random() * 320+150) + "px";
container.appendChild(box);
box.onclick = function() {
container.removeChild(box);
count2++;
};
var checkBottom = setInterval(function() {
if (box.getBoundingClientRect().bottom >= 630) {
clearInterval(checkBottom);
container.removeChild(box);
}
}, 10);
timer2 = setTimeout(function(){
createBox();
setInterval(function(){gap=Math.random()*5000+3000},3000);
}, gap);
}
function startGame(){
clearTimeout(timer1);
clearTimeout(timer2);
timeleft=30;
click=0;
count=0;
count1=0;
count2=0;
container.innerHTML = "";
countdown();
if(click<10){//限制点击次数
createimg();
createBox();
play = setInterval(function(){
click=count1+count2;
count=count1*50+count2*100;
document.getElementById("click").innerHTML = "已点击" + click + "次"
document.getElementById("score").innerHTML = "累计获得:" + count + "元"
if (click >= 10) {
alert("您已点击10次!")
endgame()
}
},1000)
}
}
function endgame(){
timeleft=30;
alert("游戏结束!您的最终财富额为"+count+"元!")
clearTimeout(timer1);
clearInterval(play);
clearTimeout(timer2);
clearInterval(countsecond);
container.innerHTML = "";
if(count<=600){
alert("安贫乐道,salute")
}
if(count<=1000&&count>600){
alert("你小子想要这么多钱干嘛!安贫乐道去！！！")
}
if(count==1000){
alert("恭喜您!成为幸运的大富翁！给学校捐栋楼吧！")
}
}
function countdown() {
countsecond=setInterval(function() {
if (timeleft > 0) {
timeleft--;
document.getElementById("timeleft").innerHTML = "倒计时" + timeleft + "s";
}
if(timeleft==0){
clearInterval(countsecond);
endgame();
}
}, 1000);
}
</script>
<html>
personal_articraft.zip （4个子文件） 
personal_articraft 
bai.png 23KB
index.html 6KB silver.png 257KB gold.png 282KB资源评论
youlandquan
- 粉丝: 0
- 资源: 1
最新资源
- 基于PHP的FeelDesk工单管理系统开源版设计源码
- 基于Antv-X6的组态编辑器与可视化设计源码
- factoryio2.5工厂流水线仿真程序，期末专周可用，多个场景可以咨询 使用简单的梯形图与SCL语言编写，通俗易懂，起到抛砖引玉的作用，比较适合有动手能力的入门初学者 软件环境： 1、西门子编程
- 基于公有云平台的OpenIoT项目设计源码
- 基于微信小程序文件系统的MxLocalBase本地数据库设计源码
- 基于C语言的2023级寒假实践打地鼠游戏设计源码
- 基于matlab的孔入式静压轴承程序，进油孔数为4个，采用有限差分计算轴承油膜厚度及油膜压力 程序已调通，可直接运行
- 控制电机-感应电动机转差型矢量控制伺服模型系统 仿真模型+实验报告（内附实验参数，仿真波形等） 注意：matlab版本需在2016a以下，否则可能打不开
- 控制电机－正弦波永磁同步电动机矢量控制系统仿真 仿真模型+实验报告（内附实验参数，仿真波形等） 注意：matlab版本需在2016a以下，否则可能打不开
- 基于扰动观测器的永磁同步电机（PMSM）模型预测控制（MPC）仿真 速度外环基于模型预测控制、电流内环基于无差拿控制搭建，控制效果理想，模块程序设计通俗易通
- 基于Laravel的简化Smarty模板引擎设计源码
- NSGA2遗传算法多目标优化 三维视图 寻优多个函数（函数类型见图二类型），出图为三维红色为帕列托（图一）， 带最终结果图（图三）
- 基于graqhql/mongodb/nodejs/nuxtjs的Vue跨世代实时在线文档编辑系统设计源码
- 基于Java的用户线程模型设计源码
- 基于Rust Axum框架的Web后端项目设计与源码实践
- 基于HTML、CSS和JavaScript的eui后台UI框架设计源码预览版账号密码提供
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
