“21天好习惯”第一期-6_空白

未知 02-07 3145

二十一天——打卡第六天（跑酷小游戏）

今天把完善完的跑酷小游戏代码完整的发出来。

这个代码有点小bug（不知道为什么会偶尔卡死），实在不知道哪里有问题，也不知道怎么改。如果有哪个大佬知道还请和我分享分享。

HTML在昨天发的文章里。

CSS

.groundback { width: 100%; height: 70%; background-color: #CCCCCC; } .begin_game { padding-top: 10%; margin: auto; color: #000000; width: 20%; text-align: center; font-size: 30px; transition: 0.5s; } .begin_game:hover { cursor: pointer; color: red; font-size: 40px; } .over_game { padding-top: 10%; margin: auto; color: #000000; width: 20%; text-align: center; font-size: 30px; display: none; } .ground { position: absolute; left: 0; width:100%; height: 30%; background-color: bisque; } .role { position: absolute; top: 70%; left: 3%; width: 50px; height: 50px; transform: translateY(-100%); background-color: #0000FF; z-index: 9; } .xianjin { position: absolute; top: 70%; width: 10%; height: 30%; background-color: white; }

// 生成坑 function getxianjin() { var xianjin = document.createElement("div"); var box2 = document.querySelector(".box2"); var xianjin_all = document.querySelectorAll('.xianjin'); var num box2.appendChild(xianjin); xianjin.className = 'xianjin'; if (xianjin_all.length > 0) { do { num = Math.random() + 0.1; if (num < 0.3) num += 0.3; } while (num * box2.offsetWidth - xianjin_all[xianjin_all.length - 1].offsetLeft < 2 * xianjin.offsetWidth); } else { num = Math.random() - 0.1; if (num < 0.3) num += 0.3; } xianjin.style.left = num * box2.offsetWidth + 'px'; } var xianjin_count = 0; // 坑移动 function xianjin_run() { var xianjin = document.querySelectorAll(".xianjin"); var ground = document.querySelector(".ground"); var i = 0; for (i; i < xianjin.length; i++) { xianjin[i].style.left = xianjin[i].offsetLeft - ground.offsetWidth * 0.004 + 'px'; } } // 背景移动 function ground_run() { var ground = document.querySelector('.ground'); var ground_width = ground.offsetWidth; var time_ground = setInterval(function() { ground.style.width = ground.offsetWidth + ground_width * 0.001 + 'px'; ground.style.left = ground.offsetLeft - ground_width * 0.001 + 'px'; }, 10); } //ground_run(); // 清除坑 function clear_xianjin() { var xianjin = document.querySelectorAll(".xianjin"); var box2 = document.querySelector(".box2"); var role = document.querySelector('.role'); var i = 0; for (i; i < xianjin.length; i++) { if (xianjin[i].offsetLeft < -xianjin[i].offsetWidth) { box2.removeChild(xianjin[i]); } } } // 角色跳跃 function roleup_down() { var role = document.querySelector(".role"); var box2 = document.querySelector(".box2"); var rolehigh = role.offsetTop; var count = 0; var time1 = setInterval(function() { count += 1; rolehigh -= 5; role.style.top = rolehigh + 'px'; if (count == 20) { count = 0; clearInterval(time1); time1 = null; var time2 = setInterval(function() { if (time1 != null) clearInterval(time2); count += 1; rolehigh += 5; role.style.top = rolehigh + 'px'; if (count == 20) { count = 0; clearInterval(time2); time2 = null; } }, 20); } }, 20); } function is_on_ground() { var ground = document.querySelector('.ground'); var role = document.querySelector('.role'); if (role.offsetTop == ground.offsetTop) return 1; else return 0; } // 跳跃触发 document.onkeydown = function(e) { if (e.keyCode == 32 && is_on_ground() == 1) { roleup_down(); } } var box2 = document.querySelector(".box2"); box2.onclick = function() { if (is_on_ground() == 1) roleup_down(); } // 角色死亡 function role_die() { var role = document.querySelector(".role"); var ground = document.querySelector(".ground"); var xianjinAll = document.querySelectorAll(".xianjin"); if (xianjinAll.length > 0 && role.offsetTop == ground.offsetTop && role.offsetLeft + role.offsetWidth / 2 > xianjinAll[0].offsetLeft && role.offsetLeft + role.offsetWidth / 2 < xianjinAll[0].offsetLeft + xianjinAll[0] .offsetWidth - role.offsetWidth / 2) //||(role.offsetLeft+role.offsetWidth/2>xianjinAll[1].offsetLeft) { var role_down_time = setInterval(function() { var ground = document.querySelector(".ground"); if (role.offsetTop > ground.offsetTop + ground.offsetWidth) { var over_game = document.querySelector('.over_game'); var begin_game = document.querySelector('.begin_game'); over_game.style.display = 'block'; begin_game.style.display = 'block'; clearInterval(role_down_time); role_die_time = null; } role.style.top = role.offsetTop + 5 + 'px'; }, 20); } } // 清除计时器，结束游戏 function over_time(a) { var role = document.querySelector(".role"); var ground = document.querySelector(".ground"); if (role.offsetTop > ground.offsetTop + ground.offsetWidth) { clearInterval(a); a = null; } } var begin_game = document.querySelector('.begin_game'); begin_game.onclick = function(e) { e.stopPropagation(); this.style.display = 'none'; var role = document.querySelector('.role'); var ground = document.querySelector('.ground'); role.style.top = ground.offsetTop + 'px'; var over_game = document.querySelector('.over_game'); over_game.style.display = 'none'; var xianjin = document.querySelectorAll('.xianjin'); var box2 = document.querySelector(".box2"); for (var i = 0; i < xianjin.length; i++) { box2.removeChild(xianjin[i]); } // 生成坑 var getxianjin_time = setInterval(function() { getxianjin(); over_time(getxianjin_time); }, 2000); // 坑移动 var xianjin_run_time = setInterval(function() { xianjin_run(); over_time(xianjin_run_time); }, 20); //清除坑 var gametime = setInterval(function() { //xianjin_run(); clear_xianjin(); over_time(gametime); }, 1); //角色死亡 var role_down_time = setInterval(function() { role_die(); }, 1); }

再展示一下效果图吧