棍子英雄自写H5源码
棍子英雄自写H5源码
全栈开发日记
发布于 2022-05-12 13:07:51
发布于 2022-05-12 13:07:51
代码可运行
运行总次数：0
代码可运行
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>棍子英雄</title>
<style>
*{
margin: 0;
padding: 0;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
body{
width: 600px;
height: 800px;
margin: 0 auto;
}
#bigDiv{
width: 700px;
height: 800px;
border: 2px solid black;
margin: 0 auto;
position: relative;
background: url("mei2.png") no-repeat;
background-size: 100% 100%;
/*pointer-events:none;*/
/*禁止长按保存*/
user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-moz-user-select:none;
touch-callout:none;
-webkit-touch-callout:none;
-ms-touch-callout:none;
-moz-touch-callout:none;
}
#zhe{
width: 100%;
height: 100%;
}
.landA{
position: absolute;
left: 0;
bottom: 0;
width: 150px;
height: 200px;
background-color: black;
}
.gun{
position: absolute;
left: 145px;
bottom: 200px;
width: 5px;
height: 0px;
background-color: #B00040;
border-radius: 50px;
transform:rotateX(0deg);
}
.landB{
position: absolute;
left: 251px;
bottom: 0;
width: 100px;
height: 200px;
background-color: black;
}
#man{
position: absolute;
left: 130px;
bottom: 200px;
width: 20px;
height: 20px;
background: url("man.png") no-repeat;
}
.mark{
margin: 0 auto;
width: 150px;
height: 50px;
text-align: center;
font-size: 35px;
display: none;
}
.Option{
margin: 0 auto;
padding-top: 200px;
width: 300px;
height: 249px;
display: none;
}
.Option_a{
width: 300px;
height: 249px;
font-size: 48px;
text-align: center;
color: red;
}
.Option_a input{
margin-top: 50px;
background-color: deeppink;
color: white;
border: 2px solid deeppink;
border-radius: 25px;
width: 200px;
height: 50px;
font-size: 18px;
}
.Option_a span{
font-size: 24px;
}
#guank{
border-bottom: 2px solid black;
border-top: 2px solid black;
}
#guan{
height: 10px;
width: 0px;
background-color: grey;
}
</style>
</head>
<body>
<div id="bigDiv">
<div id="guank">
<div id="guan"></div>
</div>
<div id="zhe">
<!--分数-->
<div class="mark"></div>
<!--失败选项框-->
<div class="Option">
<b>
<div class="Option_a">
游戏结束<br/>
<input type="button" value="再来一次" onclick="fun6()"><br/>
<span>范宁出品，必属精品</span><br/>
<span>发布源码公众号：勤至功成</span>
</div>
</b>
</div>
</div>
<!--前面的墙-->
<div class="landA"></div>
<!--后面的墙-->
<div class="landB"></div>
<div id="man"></div>
<div class="gun"></div>
</div>
</body>
<script src="jquery-3.5.0.min.js"></script>
<script>
window.onload=function () {
const imgMask = document.getElementById('bigDiv');
imgMask.addEventListener('click', function (event) {
event.stopPropagation();
event.preventDefault();
});
};
$(function () {
var Fraction=0;
var sum=RandA();//返回第二个div宽度
var sum2=RandB();//返回第二个div距离左边的距离
$(".landB").css({"width":sum,"left":sum2});
//手机端触摸屏幕时触发的事件
$("#bigDiv").on(
{
touchstart:function () {
$(".gun").animate(
{height:"1000px"},
8000
)
},
touchend:function () {
$(".gun").stop();
$(".gun").animate(
{},
function () {
$(".gun").css({
'transform-origin': '100% 100%',
'transform': 'rotate(90deg)',
'transition': 'transform .3s linear'
})
}
);
Judge();
}
}
);
//鼠标按下事件，鼠标按下时会让棍子高度增加
$("#bigDiv").bind('mousedown',function () {
$(".gun").animate(
{height:"1000px"},
8000
)
});
//鼠标松开事件，鼠标松开时会停止棍子高度的增加
$("#bigDiv").bind('mouseup',function () {
$(".gun").stop();
$(".gun").animate(
{},
function () {
$(".gun").css({
'transform-origin': '100% 100%',
'transform': 'rotate(90deg)',
'transition': 'transform .3s linear'
})
}
);
Judge();
});
//判断成功或者失败
function Judge() {
var gunA=($(".gun").height())+($(".landA").eq(Fraction).width());
if(gunA>sum2 && gunA<(sum+sum2)){
$(".mark").css({"display":"block"}).html("分数："+(Fraction+1));
Success();//下一关
}else {
$("#man").css({"left":gunA-10,"transition-duration":"3s"})
setTimeout(function(){
$(".gun").css("transform","rotate(180deg)").css("transition","all 3s");//棍子掉落
$("#man").css("bottom",0);//人物掉落
$(".Option").css({"display":"block"});
$("#bigDiv").unbind('mousedown');
$("#bigDiv").unbind('mouseup');
$("#bigDiv").off('touchstart');
$("#bigDiv").off('touchend');
},3000)
}
}
//下一关
function Success() {
var gunA=($(".gun").height())+($(".landA").eq(Fraction).width());
$("#man").css({"left":gunA-10,"transition-duration":"3s"});
setTimeout(function () {
var aWidth=sum-5;
$(".gun").eq(0).css({"left":aWidth,"height":"0","transform":""});//设置棍子新位置
$(".landA").eq(Fraction).css({"width":"0","transition-duration":"3s"});
$(".landB").eq(Fraction).css({"left":"0","transition-duration":"3s"});
var sumC=sum-20;
$("#man").css({"left":sumC,"transition-duration":"3s"});//设置小人的新位置
//设置下一关
setTimeout(function () {
$(".landB").eq(Fraction).addClass("landA");//给后一个div添加成为开始div
Fraction=Fraction+1;
//判断关卡
var g=$("#guan").width()+13.92;
if (g<675){
$("#guan").css({"width":g,"transition-duration":"3s"});
}else {
$("#guan").css({"width":"100%","transition-duration":"3s"});
}
var $div=$("<div class='landB'></div>");//创建节点
$("#bigDiv").append($div);
sum=RandA();
sum2=RandB();
$(".landB").eq(Fraction).css({"width":sum,"left":sum2});
},500)
},3000)
}
//产生随机数
function RandA() {//返回下一个陆地的宽度
var sum=Math.random(30);
sum=sum*100;
if(Fraction<=10){//第一关
sum=sum+100;//120-150
return sum;
}else if (Fraction>10&&Fraction<=20){
sum=sum+70;
return sum;
}else if (Fraction>20&&Fraction<=30){
sum=sum+40;
return sum;
}else {
sum=sum+20;
return sum;
}
}
function RandB() {//返回下一个陆地距离上一个陆地的距离
var sum2=Math.random(100);
sum2=sum2*100;
if(Fraction<=5){
sum2=sum2+250;
return sum2;
}else if(Fraction>5&&Fraction<=15){
sum2=sum2+350;
return sum2;
}else if(Fraction>15&&Fraction<=25){
sum2=sum2+350;
return sum2;
}else {
sum2=sum2+450;
return sum2;
}
}
alert("玩法：\n1. 手指或鼠标按下不放可使棍子变长\n2. 棍子下落时落空会失败并提示分数\n\n提示：手机端可以双指放大屏幕 ");
});
function fun6() {
location.reload();
}
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-04-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
