首页 > 分享 > 神武手游宠物打书模拟器

神武手游宠物打书模拟器

萌宠菠菠乐园
2024-11-24 23:39

实现方式

HTML + Javascript

实现效果

在这里插入图片描述

实现过程

准备图片文件和bootstrap
在这里插入图片描述
png 文件夹 - >

编写代码

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>打书模拟器</title><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">  <script src="bootstrap/jquery-1.9.1.js"></script>  <script src="bootstrap/js/bootstrap.min.js"></script><style type="text/css">body{margin: 0 auto;padding: 0;width: 1000px;height: 100%;background: url("png/background.png") no-repeat;background-size: 100%;}#window{width: 100%;height: 800px;}#pets_info{margin-top: 2px;margin-left: 1px;width: 450px;height: 400px;}#pets_books{margin-left: 1px;width: 450px;height: 360px;background: #A2D5FD;}#Squares{text-align: center;}#Squares div{display: inline-block;border: 3px solid #6196DA;border-radius: 8px;width: 90px;height: 90px;margin-right:8px;margin-top: 1px;background: #4C76AD;overflow: hidden;}#Books{width: 550px;position: absolute;float: left;height: 760px;left: 710px;top: 2px;background: #A2D5FD;overflow-y:auto;}#Books div[name='pic']{display: inline-block;width: 90px;height: 110px;margin-left:35px;margin-top: 20px;text-align: center;overflow: hidden;}#Books div[name='pic'] img{border: 3px solid #6196DA;border-radius: 8px;}</style> </head> <body><div id="window"><div id="pets"><div id="pets_info" style="text-align: center;background:#A2D5FD; "><img width="90%" height="100%" src="png/龙虾骑士.png"></div><div id="pets_books"><br><div id="Squares"></div></div></div><div id="Books"></div></div> <button id="changeResult" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" style="display: none" >Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" > <div class="modal-dialog modal-sm" role="document"> <div class="modal-content" style="text-align: center;height: 130px;"> <div id="ResultText" style="margin-top: 30px;"></div>  </div> </div> </div> </body> <script type="text/javascript">var books = new Array("高级必杀","高级连击","高级强力","高级追击","高级反震","高级反击","高级魔法反击","高级鬼魂术","高级驱鬼","高级吸血","高级飞行","高级隐身","高级感知","高级冥思","高级慧根","高级神佑复生","高级神迹","高级夜战","高级幸运","高级再生","高级法术连击","高级法术暴击","高级法术波动","高级灵蕴","高级防御","高级偷袭","高级毒","高级祛毒","高级凝神","高级灵敏","高级敏捷","高级恐怖","高级勇敢","高级雷系吸收","高级火系吸收","高级水系吸收","高级土系吸收","高级精准","高级永恒","高级强壮","高级冲击","高级保命","高级报复","高级援助","高级逆击","高级凝气","高级冰霜","高级气势","高级震慑","高级审判","高级自愈","雷动九天","红莲业火","波涛奔腾","山崩地裂","剑气四射");var skill = new Array(); // 技能下标集合 $(document).ready(function () { add_Square(); add_Books(); foreach_skills(); $("div[name='pic']").hover(function(){$(this).find("button").show(200); },function(){$(this).find("button").hide(200); }); }); function add_Square() {for(var i=0;i<12;i++){$("#Squares").append("<div id='"+"s"+i+"'></div>");} } function add_Books() {for(var i=0;i<books.length;i++){var books_name = books[i];$("#Books").append("<div name='pic' id='bid_"+i+"'><button class='btn btn-info' style='display:none;position:absolute;margin-left:20px;margin-top:42px;' οnclick='Study(this)'>学习</button><img width='80px' height='80px' src='png/"+books_name+".png'><b>"+books_name+"</b></div>");} } function foreach_skills() //从skill集合获取技能并遍历 {for(var i=0;i<6;i++){var is_Re = Push_skill_not_Repeat(random_Number(0,books.length-1));if(!is_Re){i--;}}Sort_Skill();for(var j=0;j<skill.length;j++){$("#s"+j).append("<img width='100%' src='png/"+books[skill[j]]+".png' />");} } function Push_skill_not_Repeat(num)// 随机技能加入skill集合 {if(skill.length>1){for(var i=0;i<skill.length;i++){if(skill[i] == num){return false;}}}skill.push(num);return true; } function Study(obj) {var book_id = $(obj).parent().attr("id").split("_")[1]; if(!check_is_repeat($(obj).parent())) {var f = forget_and_study(book_id);$("#changeResult").trigger("click");$("#ResultText").html("<b style='font-size: 20px'><span style='color:green;'>学习了  </span><img src='png/"+books[book_id]+".png'> <span style='color:red'>遗忘了  </span><img src='png/"+books[f]+".png'>!</b>"); } else {$("#changeResult").trigger("click");$("#ResultText").html("<b style='font-size: 20px;color:red;'>技能已存在！</b>"); } } function forget_and_study(bid) {var forget_index = random_Number(0,5); // 获取随机遗忘技能下标var forget_skill = skill[forget_index];// 储存该下标的对应技能skill[forget_index] = parseInt(bid);// 新技能替换旧技能// 刷新格子Sort_Skill();refash();return forget_skill;// 返回遗忘的技能 } function refash() {for(var i=0;i<6;i++){$("#s"+i).empty();}for(var j=0;j<6;j++){$("#s"+j).append("<img width='100%' src='png/"+books[skill[j]]+".png' />");} } function check_is_repeat(obj) {var id = $(obj).attr("id").split("_")[1];for(var x=0;x<6;x++){if(skill[x] == id){return true;}}return false; } function Sort_Skill() // 技能格子排序 { for(var i=0;i<skill.length;i++) {for(var j=0;j<skill.length;j++){if(skill[i] < skill[j]){var temp = 0;temp = skill[i];skill[i] = skill[j];skill[j] = temp;}} } console.log(skill); }//================== 生成 minValue 到 maxValue 区间的1位随机数的方法function random_Number(minValue, maxValue) { return Math.floor(Math.random() * (maxValue - minValue + 1) + minValue);} </script> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287