jquery+html5小游戏(智商超过130的人才能玩到第40关哦
发布时间：2015-12-21, 16:50:14 分类：HTML | 编辑 off 网址 | 辅助
图集1/3
正文 16589字数 44,653阅读
html
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
<!--
.STYLE2 {
font-size: 18px;
color: #0000FF;
}
-->
</style>
</head>
<body>
<div class="point">
0
</div>
<div class="point">
0
</div>
<div id="main">
<div class="wall">
</div>
<div class="wall new" style="left: 50%;">
</div>
<div class="stick"></div>
<div class="stickMan">
<img src="images/stick_stand.png" width="5%"/>
</div>
</div>
<!-- 游戏结束弹层-->
<div class="gameOver">
<h3>游戏结束!</h3>
<div class="showPoint">
<p>分数</p>
<p class="newPoint">0</p>
<p>最佳</p>
<p class="bestPoint">0</p>
</div>
<div class="btn share">分享</div>
<div class="btn again">再玩一次</div>
</div>
<div id="mask">
<img src="images/share_img01.gif"/>
</div>
<div class="reloadImg" style="display: none;">
<img src="images/stick.gif" />
</div>
<script type="text/javascript">
var longStick;
var shortStick;
var screenWidth = document.documentElement.clientWidth;
var point = 0;
var speed = "5%";
function touchSatrtFunc(evt) {
if(point>=2){
$(".tips").hide();
}
evt.preventDefault();
document.addEventListener('touchend', touchEndFunc, false);
initStick();
//longStick = setInterval(function(){
// $('.stick').css({width:'+='+speed});
//},30);
getLong();
document.removeEventListener('touchstart', touchSatrtFunc, false);
}
function getLong() {
if(point>5){
//alert(point);
speed="5%";
}
longStick = setInterval(function() {
var stickWidth = getWidthNumber($('.stick').css('width'));
if(stickWidth<=screenWidth){
$('.stick').css({width:'+='+speed});
}else{
clearInterval(longStick);
getShort();
}
},30);
}
function getShort() {
if(point>5){
//alert(point);
speed="10%";
}
shortStick = setInterval(function() {
var stickWidth = getWidthNumber($('.stick').css('width'));
if(stickWidth>0){
$('.stick').css({width:'-='+speed});
}else{
clearInterval(shortStick);
getLong();
}
},30);
}
function getWidthNumber(ele){
if (ele) {
var WidthNumber = ele.substr(0,ele.length-2);
WidthNumber = Number(WidthNumber);
return WidthNumber;
}
}
function touchEndFunc(evt) {
clearBind();
evt.preventDefault();
clearInterval(longStick);
clearInterval(shortStick);
setTimeout(function(){
$('.stick').css('transition','.6s');
$('.stick').css('transform','rotate(0deg)');
setTimeout('checkStickLong.check()',600);
},200);
}
function touchMoveFunc(evt){
evt.preventDefault();
}
function initStick() {
$(".stick").css({'transition':'0','transform':'rotate(-90deg)','width':'0','left':'20%'});
}
function init(){
$(".stick").css({'transform-origin':'0 0','transform':'rotate(-90deg)'});
addBind();
document.addEventListener('touchmove', touchMoveFunc, false);
$(".again").click(function(){
$(".gameOver").css('display','none');
addBind();
$(".point,.tips").css('display','block');
point = 0;
speed="5%";
$(".point").html(point);
$(".wall").eq(0).css({'left':'0','width':'20%'});
$(".new").css({'left':'50%','width':'20%'});
$(".stick").css('transition','0')
$(".stick").css('width','0');
$(".stickMan").css({'left':'15.5%','bottom':'66.5%'});
$("body").css('background-position-x', '0');
$(".stickMan img").attr({'src':'images/stick_stand.png'});
$(".shouji").css({"left":"0%"});
});
$(".share").click(function(){
$("#mask").css('display','block');
});
$("#mask").click(function(){
$("#mask").css('display','none');
});
}
function addBind() {
document.addEventListener('touchstart', touchSatrtFunc, false);
}
function clearBind() {
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
}
function orientationChange() {
switch(window.orientation) {
case 0:
addBind();
$("body").css('transform','');
break;
case -90:
clearBind();
alert("游戏要竖屏玩哟！！！");
$("body").css('transform','rotate(90deg)');
break;
case 90:
clearBind();
alert("游戏要竖屏玩哟！！！");
$("body").css('transform','rotate(-90deg)');
break;
case 180:
addBind();
$("body").css('transform','rotate(0deg)');
break;
}
}
$(document).ready(function(){
init();
orientationChange();
window.onorientationchange = orientationChange;
shareToWeixin();
})
</script>
Run code
Cut to clipboard
public.js
var checkStickLong = {
check:function(){
var stickLong = this.getWidthNumber($(".stick").css('width'));
var maxLong = this.getWidthNumber($(".wall").eq(1).css('left'))+this.getWidthNumber($(".wall").eq(1).css('width'))-screenWidth*0.2;
var minLong = this.getWidthNumber($(".wall").eq(1).css('left'))-screenWidth*0.2;
//alert(minLong);
if (stickLong<maxLong&&stickLong>minLong) {
var me=this;
me.run();
setTimeout(function(){
me.getPoint();
me.getNewWall();
},1100);
} else if(stickLong>maxLong){
clearBind();
this.getDown();
} else {
clearBind();
this.getDown();
}
},
run:function(){
$(".stickMan img").attr({'src':'images/stick.gif'});
var moveNumber = this.getWidthNumber($(".wall").eq(1).css('left'))+this.getWidthNumber($(".wall").eq(1).css('width'))-screenWidth*0.2;
$(".stickMan").animate({left:'+='+moveNumber+'px'},1000);
$("body").css('background-position-x', '-'+(point+1)*20+'px');
setTimeout(function(){
$(".stickMan img").attr({'src':'images/stick_stand.png'});
},1000);
},
getDown:function(){
$(".stickMan img").attr({'src':'images/stick.gif'});
var me = this;
$(".stickMan").animate({left:'+='+$(".stick").css('width')},1000);
$("body").css('background-position-x', '-'+(point+1)*30+'px');
setTimeout(function(){
$('.stick').css('transform','rotate(90deg)');
$(".stickMan").animate({bottom:'-'+$(".stickMan").css('height')},300);
},1000);
setTimeout(function(){
me.showResult();
},1300);
},
getPoint:function(){
point++;
$(".point").html(point);
var len=$(".shouji").css("left");
var len1=$("#main").width();
var kk=parseInt(len)-parseInt(len1)/6;
$(".shouji").animate({"left":kk+"px"},1000);
//parseInt(len)-4
//$(")
},
getNewWall:function(){
this.setNewWall();
//$('.stick').css('transition','0');
//$(".wall").animate({left:'-='+$(".new").eq(0).css('left')},500);
//$(".stick").animate({left:'-='+$(".new").eq(0).css('left')},500);
//$(".stick").css('transform','translateX(-'+$(".new").eq(0).css('left')+')');
setTimeout(this.resetWall,550);
},
resetWall:function(){
addBind();
$('.wall').eq(0).remove();
$('.new').eq(0).removeClass('new');
$('.init').eq(0).removeClass('init');
},
getWidthNumber:function(ele){
if (ele) {
var WidthNumber = ele.substr(0,ele.length-2);
WidthNumber = Number(WidthNumber);
return WidthNumber;
}
},
setNewWall:function(){
//新墙设置
var newWallSpacing =Math.random()*55+5+20;
var newWallWidth = Math.random()*Math.min(90-newWallSpacing,15)+5;
var tpl = '<div class="wall new init" style="width:'+newWallWidth+'%;left:100%"></div>';
$("#main").append(tpl);
//移动设置
var moveNumber = this.getWidthNumber($(".wall").eq(1).css('left'))+this.getWidthNumber($(".wall").eq(1).css('width'))-screenWidth*0.2;
$(".wall").eq(0).animate({left:'-='+moveNumber+'px'},500);
$(".wall").eq(1).animate({left:'-='+moveNumber+'px'},500);
$(".wall").eq(2).animate({left:newWallSpacing+'%'},500);
$('.stick').css('transition','0');
$(".stick").animate({left:'-='+moveNumber+'px'},500);
$(".stickMan").animate({left:'-='+moveNumber+'px'},500);
},
showResult: function() {
$(".point,.tips").css('display','none');
$(".newPoint").html(point);
$(".gameOver").css('display','block');
this.setBestPoint();
},
setBestPoint: function() {
var bestPoint = window.sessionStorage.getItem('stickManPoint');
if(!bestPoint){
bestPoint = point;
window.sessionStorage.setItem('stickManPoint',point);
} else if(bestPoint<point){
bestPoint = point;
window.sessionStorage.setItem('stickManPoint',point);
}
$(".bestPoint").html(bestPoint);
shareToWeixin();
}
};
function shareToWeixin(){
WeixinApi.ready(function(Api) {
// 微信分享的数据
var desc = '智商超过130的人才能玩到第40关！！！！';
var bestPoint = window.sessionStorage.getItem('stickManPoint');
if(!bestPoint||bestPoint==0){
desc ='智商超过130的人才能玩到第40关！！！！';
} else {
if(bestPoint>=40){
desc ='我居然获得了'+bestPoint+'分！去和和商城分享比拼喽！';
}else if(bestPoint<40){
desc ='我才得了'+bestPoint+'分！还需要继续努力哦！';
}
}
var wxData = {
"appId": wxcfdc424062594fbe, // 服务号可以填写appId
"imgUrl" : 'http://smartmercado.com/wxsc/puzzle/paolu/images/paolu.jpg',
"link" : 'http://smartmercado.com/wxsc/puzzle/paolu/index.html',
"desc" : desc,
"title" : desc
};
// 分享的回调
var wxCallbacks = {
// 收藏操作是否触发回调，默认是开启的
favorite : false,
// 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
//alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
//alert("分享被取消，msg=" + resp.err_msg);
},
// 分享失败了
fail : function(resp) {
// 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
//alert("分享失败，msg=" + resp.err_msg);
},
// 分享成功
confirm : function(resp) {
// 分享成功了，我们是不是可以做一些分享统计呢？
//alert("分享成功，msg=" + resp.err_msg);
$("#mask").css('display','none');
},
// 整个分享过程结束
all : function(resp,shareTo) {
// 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
//alert("分享" + (shareTo ? "到" + shareTo : "") + "结束，msg=" + resp.err_msg);
}
};
// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks);
// 点击分享到朋友圈，会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks);
// 点击分享到腾讯微博，会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks);
// iOS上，可以直接调用这个API进行分享，一句话搞定
Api.generalShare(wxData,wxCallbacks);
// 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu是off状态
// 为了方便用户测试，我先来trigger show一下
//var elOptionMenu = document.getElementById('optionMenu');
//elOptionMenu.click(); // 先隐藏
//elOptionMenu.click(); // 再显示
});
}
Run code
Cut to clipboard
style.css
charset "utf-8";
*{
margin: 0;
padding: 0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
-ms-user-select: none;
-moz-user-select: none;
}
body{
background: url(../img/bg.png) 0px top no-repeat;
background-position-x: 0px;
overflow: hidden;
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "????", Arial, sans-serif;
height: 1000px;
transition:1s;
background-color:#80b7b4;
}
.shouji{position:absolute; left:0%; top:0%; width:310%; height:100%;}
.shouji .img{width:100%; height:100%;}
#main{
position: fixed;
top: 60%;
left: 0;
height: 40%;
width: 100%;
overflow: visible;
}
.point{
position:absolute;
font-size: 24px;
color: #ffffff;
font-weight: bold;
background-color: rgba(0,0,0,0.3);
top:10%;
height:40px; line-height:40px;
text-align: center;
width:100%;
border-radius: 10px;
}
.tips{
top:25%;
position:absolute;
width:100%;
font-size: 14px;
text-align: center;
color: #000000;
font-weight: bold;
}
#main .wall{
position: absolute;
top: 30%;
height: 70%;
width: 20%;
background-color: #000000;
}
#main .stick{
position:absolute;
bottom: 68%;
left: 20%;
height: 2%;
width: 0;
background-color: #000000;
transform: rotate(-90deg);
}
.stickMan{
width: 100%;
position: absolute;
bottom: 66.5%;
left: 15.5%;
}
.stickMan img{
transform:scale(1);
}
.gameOver{
position: fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.3);
text-align: center;
display: none;
}
.gameOver h2{
margin: 15% 0 5% 0;
font-size: 50px;
color: #ffffff;
font-weight: normal;
}
.gameOver .showPoint{
width: 70%;
background-color: #ffffff;
padding: 2%;
margin: 0 auto;
border-radius: 10px;
color: #000000;
font-weight: bold;
}
.gameOver .showPoint .newPoint,.bestPoint{
font-size: 30px;
}
.gameOver .btn{
width: 30%;
margin: 5% auto;
padding: 3% 0;
background-color: orange;
color: #FFFFFF;
font-weight: bold;
border-radius: 5px;
}
#mask{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0,0,0,0.5);
}
#mask img{
position: absolute;
top: 0;
right: 20px;
}
Run code
Cut to clipboard
stick_stand.png
stick.gif
share_img01.gif
（支付宝）给作者钱财以资鼓励 （微信）→
暂无评论 »