您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家展示了js如何实现跳一跳小游戏,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
效果
流程分析
1、鼠标按下开始蓄力
2、鼠标松开,根据鼠标按下的时间让小球运动相应的距离
3、判断小球落点是否在平台内
4、如果在平台范围内,产生下一个平台,分数加10.如果不在游戏结束,判断分数是否大于历史最高分,更新历史最高分。
动画效果
5、鼠标按下小球所在平台要有蓄力效果,鼠标松开后慢慢恢复,
6、小球在空中的运动曲线要平滑
7、小球和平台要有3D效果
注意事项
8、运动涉及到计算器和延时器,要注意清除定时器以免扰乱动画效果
9、鼠标按下和松开为一个完整的流程,在小球运动完之前不能重复触发
10、确保小球运动的时间与鼠标按下的时间相关联
布局
<div class="wrap"> <h4 class="tit">鼠标按下蓄力,松开鼠标小球开始运动</h4> <h2>分数:</h2> <h3>历史最高:</h3> <div class="con"></div> <div class="blc1"></div> </div>
样式
* { margin: 0; padding: 0; } .wrap { height: 500px; position: relative; overflow: hidden; } .con { background-color: hotpink; /*左边的没有背景色,右边的加了背景色*/ background-image: radial-gradient(10px at 4px 4px, rgba(0, 0, 0, 0), rgba(2, 2, 2, 1)); width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 30px; bottom: 30px; z-index: 2; } .blc1 { box-shadow: 10px 10px 7px #000; border-radius: 30%; width: 40px; height: 40px; background-color: midnightblue; position: absolute; left: 20px; bottom: 20px; } .tit { text-align: center; }
js
function randomInt(min, max) { //产生[min,max]范围内的整数 return Math.round(Math.random() * (max - min)) + min; } function randomColor() { //产生随机的颜色 var map = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']; var str = '#'; for (var i = 0; i < 6; i++) { var index = randomInt(0, 15); str += map[index]; } return str; } var wrap = document.querySelector('.wrap'); var con = document.querySelector('.con'); var oldtime = 0; //记录鼠标按下的时间 var timer2 = null; //小球平抛运动定时器 var timer3 = null; //鼠标按下变形定时器 var num = 0; //游戏成绩 var mouseD = false; //记录鼠标是否按下 var mouseUp = true; //记录鼠标是否松开 var h2 = document.querySelector('h2'); var h3 = document.querySelector('h3'); var max = localStorage.getItem('max'); var div = document.createElement('div'); //创建下一个平台 h3.innerText = '历史最高:' + localStorage.getItem('max'); //从浏览器数据库获取最高分 div.style.left = 35 + randomInt(30, 60) + 'px'; //初始化平台距离左边的值 var div_sex = randomInt(30, 70); //初始化平台大小,范围 div.style.bottom = 40 - div_sex / 2 + 'px'; //平台距离底部为小球底部减去平台 div.style.height = div_sex + 'px'; div.style.width = div_sex + 'px'; div.className = 'blc1'; //添加初始化样式 div.style.backgroundColor = randomColor(); //随机颜色 wrap.appendChild(div); //存入平台 document.onmousedown = function () { //监听页面点击事件 if (!mouseD) { //如果鼠标按下没有抬起 var blc = document.querySelectorAll('.blc1'); //获取所有平台 oldtime = Date.now(); //记录鼠标按下的时间 var target = blc[blc.length - 2]; //小球所在的平台 var down_c = 10; //平台最大下沉距离 var left = target.offsetLeft; //记录鼠标按下后下沉效果之前平台的left值 var bottom = 40 - target.offsetHeight / 2; //记录鼠标按下后下沉效果之前平台的bottom值 var con_l = con.offsetLeft; //记录鼠标按下后下沉效果之前小球的left值 var con_b = 30; //记录鼠标按下后下沉效果之前小球的bottom值 timer3 = setInterval(() => { //下沉效果定时器 down_c -= 0.03; //每一次变化0.03px if (down_c <= 0) { //最小值为0 down_c = 0.03; } target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000'; //边框阴影向里缩,实现3D效果 target.style.left = left + 10 - down_c + 'px'; target.style.bottom = bottom + -10 + down_c + 'px'; con.style.left = con_l + 10 - down_c + 'px'; con.style.bottom = con_b - 10 + down_c + 'px'; //小球和平台一起向右下角移动,配合阴影达到3D效果 }, 1); mouseD = true; //鼠标已经按下 mouseUp = false; //鼠标即将松开 } } document.onmouseup = function () { if (!mouseUp) { //如果没有触发mousedown事件不会执行以下代码 mouseUp = true; //锁定事件,小球运动结束前不能执行以下代码 clearInterval(timer3); //清除下沉动画 var timer4 = null; //上升动画 var blc = document.querySelectorAll('.blc1'); //获取所有平台 var target = blc[blc.length - 2]; //同下沉动画 var left = target.offsetLeft; var down_time = 0; var down_c = 0; var click_time = Date.now() - oldtime; //鼠标按下的时间 var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 ? 10 : click_time * 0.03); //原来的bottom-下沉的距离,最大为10 timer4 = setInterval(() => { //恢复原来的状态 down_time++; if (down_time > click_time) { clearInterval(timer4); } down_c += 0.03; if (down_c >= 10) { down_c = 10; } target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000'; target.style.left = left - down_c + 'px'; target.style.bottom = bottom + down_c + 'px'; }, 1); var clicktime = (Date.now() - oldtime) * 1.5; //小球运动时间为鼠标按下的1.5倍,减少蓄力时间 var time2 = 0; //小球跳一跳计时器 var y = 30; //小球初始bottom值 var x = con.offsetLeft; //小球初始left值 clearTimeout(tout); //清除延时器 timer2 = setInterval(() => { //小球弹跳计时器 time2 += 20; y = 30 + clicktime / 50 * Math.sin(time2 * Math.PI / clicktime); //将总的时间分成180份通过sin(0,180)从0到0的特性完成一个圆滑的抛物线 con.style.left = x + time2 / 20 + 'px'; con.style.bottom = y + 'px'; }, 20); var tout = setTimeout(function () { //控制小球运动的时间与鼠标按下的时间*1.5相等,控制小球运动的时间 clearInterval(timer2); //结束小球运动 x = con.offsetLeft; //获取运动结束后小球的left值 var blc = document.querySelectorAll('.blc1'); //获取所有的平台 if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap .lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10 ) { //判断小球是否位于平台里面 num += 10; //每跳一次加10分 h2.innerText = '分数:' + num; //动态展示分数 //生成下一个平台 var div_sex2 = randomInt(40, 60); var newdiv = document.createElement('div'); newdiv.style.bottom = 40 - div_sex2 / 2 + 'px'; newdiv.style.height = div_sex2 + 'px'; newdiv.style.width = div_sex2 + 'px'; newdiv.style.left = x + randomInt(80, 120) + 'px'; newdiv.style.backgroundColor = randomColor(); newdiv.className = 'blc1'; wrap.appendChild(newdiv); } else { alert('游戏结束,分数:' + num); max = max > num ? max : num; localStorage.setItem('max', max) //更新最高分 location.reload(); //刷新当前页面 } wrap.scrollLeft = wrap.scrollWidth; //控制滚动条位于最右边 mouseD = false; //完成一次事件,重新开启 mouseUp = true; // }, clicktime) } }
以上就是关于js如何实现跳一跳小游戏的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。