createjs-打豆豆小游戏制作（3）

前面介绍过了打豆豆小游戏的入口和各个场景之间的切换，这一篇介绍一下Ball.js这个类和GameScene.js这个主要游戏场景这个类。

在游戏中有十种不同颜色的小球，当你点到正确的位置，小球就可以消除，在小球消除的时候有一个掉下来的动画。

下面是Ball.js的源码

(function(window){//Ball这个类继承自Container类，接受一个color参数，表示这个小球是什么颜色function Ball(color){this.Container_constructor();//小球的颜色this.color=color;//tick时间的侦听器，这个变量用于在off的时候移除侦听时间this.tickListener;//小球下落时候的x方向的速度this.speedX;//小球下落时候的y方向的速度this.speedY;//小球下落的加速度this.speedA=4;//根据color这个变量的值，从单列类中的resource中获取到之前加载好的图片，然后创建bitmap对象this.gd=new GlobalData();var ball=new createjs.Bitmap(this.gd.resource.getResult("image"+color));//图片本身比较大，这里做了一下缩小ball.scaleX=0.5;ball.scaleY=0.5;this.addChild(ball);}var p=createjs.extend(Ball,createjs.Container);//小球开始掉落的函数p.beginFall=function(){//添加tick事件侦听，tick事件大概相当于flash中enterFrame事件，在每次舞台更新的时候触发this.tickListener=this.on("tick",this.fall,this);//设置小球的速度this.speedX=-5+10*Math.random();this.speedY=-20;};//在每次tick事件时调用，更新小球的位置，达到小球掉落的效果p.fall=function(e){this.x+=this.speedX;this.y+=this.speedY;this.speedY+=this.speedA;//在检查到小球掉出舞台以后，移除小球，并且移除侦听的事件（用on方法添加的侦听时间，只能用off方法来移除侦听if(this.y>this.gd.canvas.height+50){if(this.parent!=null){this.parent.removeChild(this);this.off("tick",this.tickListener);}}};window.Ball=createjs.promote(Ball,"Container");
}(window));

接下来就是主要的游戏场景，里面包括游戏部分、倒计时条、得分和返回按钮四个部分。

1.首先用Shape类画出了一个30*15的方格背景，如下图

2.记录方格的位置，然后随机排列位置数组，然后在数组的前200个位置上放置小球，这样就做到了小球随机排列的效果（这里没有用数组自带的sort方法，因为自带的方法有bug，而且效率低）

3.侦听点击事件，根据点击事件的坐标，判断点击到了哪个方格上，如果是空白方格就检测方格所在的十字是否有同颜色的小球，如果有的话就调用小球掉落的方法，并且更新分数和播放音效。如果点错了就播放错误的音效，然后扣掉一定的时间

4.倒计时结束后游戏就结束了，看上去游戏很简单，很无聊，但是想要得到200分相当不容易

下面是GameScene.js的源码

(function(window){function GameScene(){//继承自Container类this.Container_constructor();this.squareNumArray;this.squaresInPosition=[];this.tickCount=0;this.tickListener;this.isGameOver=false;this.score=0;this.gd=new GlobalData();this.bg=new createjs.Container();this.bg.x=25;this.bg.y=60;this.addChild(this.bg);this.bgSquares=new createjs.Shape();this.bg.addChild(this.bgSquares);this.bgDownShape=new createjs.Shape();this.bg.addChild(this.bgDownShape);this.bg.on("mousedown",this.onBgMouseDown,this);this.bg.on("pressup",this.onBgMouseUp,this);this.ballContainer=new createjs.Container();this.ballContainer.x=25;this.ballContainer.y=60;this.addChild(this.ballContainer);this.timeBarContainer=new createjs.Container();this.timeBarContainer.x=30;this.timeBarContainer.y=25;this.addChild(this.timeBarContainer);this.timeBar=new createjs.Shape();this.scroeText=new createjs.Text("0", "16px Microsoft Yahei", "#000000");var scoreTitle=new createjs.Text("得分:", "16px Microsoft Yahei", "#000000");scoreTitle.x=400;scoreTitle.y=20;this.addChild(scoreTitle);this.scroeText.x=450;this.scroeText.y=20;this.addChild(this.scroeText);this.backButton=new SHLTextButton("返回",60,30,"#ffffff",14,"#00cfef","#0093d9");this.backButton.x=700;this.backButton.y=20;this.backButton.on("click",this.onBack,this);this.addChild(this.backButton);this.init();this.initTimeBar();this.tickListener=this.on("tick",this.onTick);}var p=createjs.extend(GameScene,createjs.Container);p.init=function(){this.squareNumArray=new Array(GameScene.HENG*GameScene.SHU);var i,j;for(i=0;i<GameScene.HENG;i++){this.squaresInPosition[i]=new Array();for(j=0;j<GameScene.SHU;j++){ this.squareNumArray[i*GameScene.SHU+j]=i*GameScene.SHU+j; var n=i+j; var color; if(n%2==0) { color="#ffffff"; } else { if(i%2) { color="#daf5d7"; } else { color="#fde4eb"; } } this.bgSquares.graphics.beginFill(color).drawRect(i*25,j*25,25,25).endFill(); this.squaresInPosition[i][j]=undefined; }}this.bgSquares.cache(0,0,750,375);this.bgDownShape.graphics.beginFill("#666").drawRect(0,0,25,25).endFill();this.bgDownShape.cache(0,0,25,25);//先放在屏幕外，要显示时放到显示的位置this.bgDownShape.x=-100;this.bgDownShape.y=-100;randomSort(this.squareNumArray);function randomSort(arr){var k;for(k=0;k<arr.length;k++){ var temp; var randomIndex=Math.floor(Math.random()*arr.length); temp=arr[k]; arr[k]=arr[randomIndex]; arr[randomIndex]=temp; }}for(i=0;i<10;i++){var color=i+1;for(j=0;j<20;j++){ var ball=new Ball(color); var p=this.squareNumArray[20*i+j]; var posX=parseInt(p/GameScene.SHU); var posY=p%GameScene.SHU; ball.x=posX*25; ball.y=posY*25; this.squaresInPosition[posX][posY]=ball; this.ballContainer.addChild(ball); }}};p.initTimeBar= function (){var timeText=new createjs.Text("剩余时间", "14px Microsoft Yahei", "#000000");timeText.y=-5;this.timeBarContainer.addChild(timeText);var b=new createjs.Shape();b.x=60;b.graphics.setStrokeStyle(1).beginStroke("#ff9999").beginFill("#ffffff");b.graphics.drawRect(0,0,240,10);b.graphics.endFill();this.timeBarContainer.addChild(b);this.setTimerBar(1);this.timeBar.x=60;this.timeBarContainer.addChild(this.timeBar);};p.setTimerBar=function(p){this.timeBar.graphics.clear();this.timeBar.graphics.beginFill("#ff3333");this.timeBar.graphics.drawRect(1,1,238*p,8);this.timeBar.graphics.endFill();};p.onBgMouseDown=function(e){var posX=parseInt(e.localX/25);var posY=parseInt(e.localY/25);if(this.squaresInPosition[posX][posY]){return;}if(this.isGameOver){return;}this.bgDownShape.x=posX*25;this.bgDownShape.y=posY*25;var isWrong=true;var squareWithBall=this.getTargetBalls(posX,posY);var tempScore=0;for(var i=0;i<squareWithBall.length;i++){ var b=squareWithBall[i]; for(var j=0;j<squareWithBall.length;j++) { var b1=squareWithBall[j]; if(b.color==b1.color&&j!=i) { this.ballContainer.addChild(b); b.beginFall(); this.squaresInPosition[b.x/25][b.y/25]=undefined; isWrong=false; tempScore++; break; } } } if(isWrong) { this.tickCount+=30; this.updateTickCount(); if(this.gd.isSoundOn) { createjs.Sound.play("wrongSound"); } } if(tempScore) { this.score+=tempScore; this.updateScore(); if(this.gd.isSoundOn) { createjs.Sound.play("rightSound"); } } }; p.onBgMouseUp=function(e) { this.bgDownShape.x=-100; this.bgDownShape.y=-100; }; p.getTargetBalls=function(i,j) { var squareWithBall=[]; var n; var s; for(n=j-1;n>=0;n--) { s=this.squaresInPosition[i][n]; if(s) { squareWithBall.push(s); break; } } for(n=j+1;n<GameScene.SHU;n++) { s=this.squaresInPosition[i][n]; if(s) { squareWithBall.push(s); break; } } for(n=i-1;n>=0;n--) { s=this.squaresInPosition[n][j]; if(s) { squareWithBall.push(s); break; } } for(n=i+1;n<GameScene.HENG;n++) { s=this.squaresInPosition[n][j]; if(s) { squareWithBall.push(s); break; } } return squareWithBall; }; p.onTick=function(e) { this.tickCount++; if(this.tickCount%30==0) { this.updateTickCount(); } }; p.updateTickCount=function() { this.setTimerBar(1-this.tickCount/3600); if(this.tickCount>=3600) { this.off("tick",this.tickListener); this.gameOver(); } }; p.updateScore=function() { var gd=new GlobalData(); gd.scroe=this.score; this.scroeText.text=this.score; }; p.gameOver=function() { this.isGameOver=true; this.dispatchEvent(new createjs.Event("gameover")); }; p.onBack=function(e) { this.dispatchEvent(new createjs.Event("backbutton")); }; GameScene.HENG=30; GameScene.SHU=15; window.GameScene=createjs.promote(GameScene,"Container"); }(window));

createjs-打豆豆小游戏制作（3）相关推荐

基于H5 网页的打豆豆小游戏的设计与实现
目录摘要 I Abstract II 第1章绪论 1 1.1研究背景及意义 1 1.2研究现状 2 1.3研究主要内容 3 第2章技术分析 4 2.1 HTML5简介 4 2.2游戏引擎 4 ...
createjs-打豆豆小游戏制作（1）
在学习了createjs一段时间以后,自己做了一个打豆豆小游戏.以前玩过flash版的,非常喜欢,于是就自己做了一个. 下面是最终的效果图: 游戏规则: 点击空白方格,在方格所在的十字上,相同颜色的豆 ...
createjs-打豆豆小游戏制作（4）
在前面游戏的主要部分已经完成了,然后就是一些次要的场景了,包括菜单.游戏得分结果.游戏设置界面(其实只有一个设置音效是否打开)和游戏的说明界面. 1.菜单菜单这个场景只包含三个按钮,开始游戏.设置和 ...
html游戏开发开题报告,基于H5 网页的打豆豆小游戏的设计与实现毕业论文+开题报告+设计源码...
摘要网页游戏是一个用现实包装的快感反馈引擎,它的根本目的始终是让玩家能够得到舒畅的体验为了娱乐心神,所以开发出大家喜欢的,高品质的休闲游戏会受到人们的普遍欢迎.打豆豆小游戏这款游戏主要是利用cs ...
基于pygame的射击小游戏制作（一）让飞船动起来
基于pygame的射击小游戏制作(一)让飞船动起来一.文件结构 alien_invasion.py 是整个系统的主文件,用来创建游戏中的一系列对象,ai_settings存储设置.screen存储显 ...
微信小游戏制作坦克大战（四）添加敌方坦克，敌方坦克可以随机移动
微信小游戏制作坦克大战(四)添加敌方坦克,敌方坦克可以随机移动首先导入敌方坦克素材重命名为敌方坦克1 敌方坦克也移动到屏幕外面,后面使用克隆体来显示. 我们给敌方坦克添加事件好的,现在敌方坦克已 ...
微信小游戏制作坦克大战（六）碰撞检测，主角坦克碰到敌方坦克、炮弹爆炸
微信小游戏制作坦克大战(六)碰撞检测,主角坦克碰到敌方坦克.炮弹爆炸导入坦克爆炸效果的图片和声音素材给主角坦克添加事件给爆炸动画添加事件当主角坦克碰到敌方坦克或者炮弹时显示爆炸效果下一篇文章 ...
unity小游戏制作之见缝插针
unity小游戏制作之见缝插针先看效果图这个游戏是一个入门的小游戏,主要技术就是圆盘的旋转,针跟随圆盘旋转以及分数累加等游戏先拖入一个圆,更改格式为2D然后建立脚本使其转动 public clas ...
微信小游戏制作坦克大战（五）敌方坦克可以发射炮弹
微信小游戏制作坦克大战(五)敌方坦克可以发射炮弹在资源管理器中复制炮弹,重命名为敌人坦克的炮弹. 修改敌方坦克的积木给敌方坦克炮弹添加事件现在,敌方坦克已经可以自动发射炮弹啦. 下一篇文章:微信 ...

createjs-打豆豆小游戏制作（3）

createjs-打豆豆小游戏制作（3）相关推荐

最新文章

热门文章