jQuery仿IOS小游戏设计---单身狗的逃避之旅

看看《程序员》杂志,最近都被html5游戏和微信平台刷了屏,未来是怎样的趋势不敢说,不过日前就我所在的创业团队,想推广自己的公众号,其中有一项内容就是做出浙大特色的小游戏,宣传部的帮我玩了好多游戏,有个ios上面的小游戏smove,游戏心意不错,设计简单, 游戏性好,便改编成了这个单身狗躲避秀恩爱的游戏。点此试玩游戏使用了jquery
jquery_mobile库和jquery rotate插件

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="jquery.rotate.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

主体是一个img作为单身狗:

<img class="square" src="images/dog.png">

一个骨头吃掉可以得分:

<img class="food" src="images/food.png">

然后就是主要的js代码了:

var width,height,boxWidth,boxHeight;
var scrolly;
var score=-1;
var stage=5;
var serial=0;
var over=false;
var food=false;

第一行若干代码定义的变量用于屏幕适配,毕竟要做手机端:

width=document.body.clientWidth;
	height=document.documentElement.clientHeight;
	boxWidth=width/8;
	boxHeight=boxWidth;
	$("#con").width(width);
	$("#con").height(height);
	$(".square").css({width:boxWidth,height:boxHeight});
	$(".food").css({width:boxWidth,height:boxHeight});
	$("#box").css({width:boxWidth*3,height:boxHeight*3,top:(height-3*boxWidth)/2});
	$("#score").css({left:boxWidth/3,
	top:boxHeight/3});

是以屏幕的八分之一宽度作为每个单位(单身狗,食物,还有炮弹也就是秀恩爱的)的宽高,然后是触摸控制函数,控制小狗的移动,当点击小狗左右上下分别移动一格:

$(document).on("tap",function(e){
	  if(over)return;
	 var offsetx=e.clientX-((width-3*boxWidth)/2+x*boxWidth+0.5*boxWidth);
	 var offsety=e.clientY-((height-3*boxWidth)/2+y*boxWidth+0.5*boxWidth);
	 if(offsetx>0&&x<2&&Math.abs(offsetx)>Math.abs(offsety))x++;
	 if(offsetx<2&&x>0&&Math.abs(offsetx)>Math.abs(offsety))x--;
	 if(offsety>0&&y<2&&Math.abs(offsetx)<Math.abs(offsety))y++;
	 if(offsety<2&&y>0&&Math.abs(offsetx)<Math.abs(offsety))y--;
	 updateDog();
  });

那么小狗好了,需要秀恩爱的来轰炸他了,秀恩爱的添加是添加img标签并定义了一个句柄(serial)作为其id方便管理(比如跑出屏幕时销毁),并添加了动画(rotate和left,top的变化):

var nextleft=function(py){
		$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";top:"+((height-3*boxWidth)/2+py*boxHeight)+"px;left:0px;'>");
		var a=$("#pleft"+serial);
		serial++;
		rotation(a);
		a.animate({left:width-boxWidth},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});
	};
	var nextright=function(py){
		$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";top:"+((height-3*boxHeight)/2+py*boxHeight)+"px;left:"+(width-boxWidth)+"px;'>");
		var a=$("#pleft"+serial);
		serial++;
		rotation(a);
		a.animate({left:0},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});
	};
	var nexttop=function(px){
		$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";left:"+((width-3*boxWidth)/2+px*boxWidth)+"px;top:0px;'>");
		var a=$("#pleft"+serial);
		serial++;
		rotation(a);
		a.animate({top:height-boxHeight},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});
	};
	var nextbottom=function(px){
		$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";left:"+((width-3*boxWidth)/2+px*boxWidth)+"px;top:"+(height-boxHeight)+"px;'>");
		var a=$("#pleft"+serial);
		serial++;
		rotation(a);
		a.animate({top:0},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});
	};

四个函数分别控制四个方向的炮弹来袭,炮弹飞出屏幕的回调函数destroyp:

var destroyp=function(e)
	{
		e.remove();
		fire();
	};

此函数销毁飞出去的标签,并新生成一个炮弹,另外我在炮弹飞的动画中,设置了与关卡数(stage)有关的速度设定,那么有炮弹就要处理碰撞:

 timer=setInterval(function(){
		$(".bomb").each(function(){
			var bx=parseFloat($(this).css("left"));

			var by=parseFloat($(this).css("top"));
			bx=(bx-(width-3*boxWidth)/2)
			/boxWidth;
			by=(by-(height-3*boxHeight)/2)
			/boxHeight;
			if(Math.abs(bx-x)<1&&Math.abs(by-y)<1)gameOver();
		})
		if(!food)return;
		var fx=parseFloat($(".food").css("left"));
		var fy=parseFloat($(".food").css("top"));
		fx=(fx-(width-3*boxWidth)/2)
			/boxWidth;
		fy=(fy-(height-3*boxHeight)/2)
			/boxHeight;
		if(Math.abs(fx-x)<1&&Math.abs(fy-y)<1)addScore();
	},100);  

该函数在碰到炮弹调用gameOver使游戏结束,吃到food则加分,另food变量是干嘛的呢?是这样的,吃完骨头骨头瞬间平移到其他位置也太难看了,我设了变大变小的出现消亡动画,在动画过程中food为false,不让在动画运行的时候狂加分这可不好。

fire函数,随机方向添加一发随机图片的炮弹:

var fire=function()
	{
		var temp=parseInt(Math.random()*4);
		switch(temp)
		{
			case 0:
			nextleft(parseInt(Math.random()*3));
			break;
			case 1:
			nextright(parseInt(Math.random()*3));
			break;
			case 2:
			nexttop(parseInt(Math.random()*3));
			break;
			case 3:
			nextbottom(parseInt(Math.random()*3));
			break;

		}
	};

以下是增加分数的代码,加分时控制关卡,以及每得10分加一发炮弹:

 var addScore=function()
  {
	  score++;
	  $("#score").text("Score:"+score);
	  $("#socre").stop();
	  $("#score").animate({fontSize:"32px"},{duration:500,queue:true});
	  $("#score").animate({fontSize:"24px"},{duration:500,queue:true});
	  food=false;
	  $(".food").animate({width:0,height:0},{duration:200,complete:function(){nextfood(parseInt(Math.random()*3),parseInt(Math.random()*3));}});
	  if(score%10==0)stage++;
	  if(score%10==9)fire();
  }; 

还有就是食物变化位置的函数了:

 var nextfood=function(px,py)
	{
		$(".food").css({left:((width-3*boxWidth)/2+px*boxWidth),
		top:((height-3*boxHeight)/2+py*boxHeight),width:0,height:0});
		$(".food").animate({width:boxWidth,height:boxHeight},{duration:200,complete:function(){food=true;}});
	};

就是动画,动画结束就让food等于true,可以吃。那么gameOver中加入停止的处理,游戏就完成了:

var gameOver=function(){clearInterval(timer);
	$("#score").text("GameOver: Score"+score);
	$("#score").animate({left:2*boxWidth,top:2*boxWidth,fontSize:"40px"},{duration:1000});
	over=true;
	$("img").stop();
	$("img").remove();
	$("div.square").remove();
	};

我这人比较粗糙,也比较效率,如果有不详尽的地方,可以打开我的试玩链接,审查元素看源代码,代码没有做混淆,css html什么的我没有提,重点放在了js的整体架构,具体实现,看不懂的可以百度函数。

觉得我的文章有帮助的,可以支持一下我,谢谢(每次2元)!

时间: 2024-10-06 04:20:10

jQuery仿IOS小游戏设计---单身狗的逃避之旅的相关文章

C语言小游戏设计报告

课程设计名称:贪吃蛇小游戏 专业班级:计科15-2 学号:150809229 姓名:XXX 一.设计目标 通过设计,培养学生对电脑的动手能力,使学生巩固<C语言程序设计>课程学习的内容,掌握编写程序的基本方法,强化对其的动手能力,可以独自完成程序的编写. 二.设计内容和要求 设计内容 编写贪吃蛇的小游戏,使其可以成功运行并且操作玩耍. 设计要求 1)源程序要有适当的注释,使程序便于阅读. 2)要有程序运行结果作为依据 三.程序流程 1.编写地图 运用函数,数组编写地图 2.相同的方法把蛇添加进

Unity3D 学习笔记 - Garen Pick the Balls 捡球小游戏设计 (二) Macanim 动画状态机

注:本游戏开发环境为Unity3D 5.3.4 本星期要求: 模仿 AnimationEvent 编写一个 StateEvents 类 用户可以创建一个指定时间.指定状态触发的事件类 事件可以采用反射机制,调用调用客户的方法:或使用订阅发布方法调用客户的方法. 在你的动画控制程序中使用 StateEvents 类 我采用的是上星期的Garen Pick the Balls小游戏,将Legacy动画部分用Mecanim重写. 要点: 1. 初次状态机开发,尚未实现Run和Attack同时进行(Bl

Unity3D 学习笔记 - Garen Pick the Balls 捡球小游戏设计

注:本游戏开发环境为Unity 3D v4.6 老师说这星期作业比较简单,所以我决定写得规整一些. 开发时间:8小时 游戏要求: 小游戏争分夺秒:随机位置生成七个球,控制主角在地图拾取七个球,十秒钟内必须完成,否则失败具体要求: 1 随机位置在地图上生成七个球(球可以用系统自带的球体) 2 用键盘控制本课程中的角色移动,鼠标左键攻击到达打击帧时,拾取碰到的球. 3 通过Time类显示每次拾取球花费的时间 经过试验,十秒根本捡不完= =,15秒还可以... 首先来看看帅气万分的主角Garen哥 .

js、jQuery实现2048小游戏

一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会增加一个数字. 当16宫格中没有空格子,且四个方向都无法操作时,游戏结束. 三. 游戏目的: 目的是合并出2048这个数字,获得更高的分数. 四. 游戏截图:  五.先来玩一下: 开始游戏 查看源码 六.游戏实现原理: 使用js.jQuery实现了PC版及手机版,实现原理是一样

jQuery 打气球小游戏 点击气球爆炸效果

最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class="container"> </div>// 只创建了一个div大盒子用于游戏背景,所有的气球都是动态生成的css部分// .box位于.container的下一级,动态生成,用于存储气球 .box{ position:absolute; width: 80px; height: 8

JQuery实现2048小游戏

最近用Jqery写了一个2048小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是显示出来的用户界面.底层选择使用一个4x4的二维数组,整个游戏的数据操作都围绕着这个二维数组进行. [一]游戏基础界面 1 <div id="game"> 2 <div id="header"> 3 <h1>1024</h1&g

jquery制作打地鼠小游戏

效果图: 素材: bg.jpg hole.pngmole.png <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scal

小游戏拒绝黄赌毒制作有感

8月22日晚上,我们的自编自导自写的小游戏“拒绝黄赌毒”上线了,截止到8月24日13:20为止,pv 8404,uv 5578,成绩虽然离之前我们预想的1万差很多,但是这一次全程参与的感觉非常爽,下面我流水帐的说下这件事的前因始末 一 起意 突然之间小游戏火了,朋友圈都在刷屏式的转发,开始的时候我还是挺无感的,但是后来有一次开会,老板对于现有宣传美人鱼的方式非常不满意,我突然灵机一动,为何不做个小游戏去推广试试?我骨子里是非常喜欢新奇特的人,想到了这个点子,浑身的细胞根本停不下来,老在思考着这件

IOS 开发入门—打砖块小游戏

忙着期末考试,读书笔记断更了~ ios 游戏处女作—demo 游戏规则 屏幕上方有四排砖块 点击屏幕开始游戏 游戏开始时,小球向上方运行 小球与砖块撞击可以撞碎砖块并反弹 小球与屏幕顶部.右侧.左侧碰撞会反弹 小球与挡板碰撞会反弹 左右移动手指可以挪动挡板 小球从屏幕下方掉出游戏结束 撞碎所有砖块游戏胜利 手机游戏的使用习惯 除非是非常出色的游戏或者游戏模式所迫,否则最好使用竖版的模式,适合用户单手操作手机,比较方便.而 iPad 则最好使用横版. 游戏类的屏幕一般要把手机上面的状态栏隐藏.不同