从零开始,使用Cocos2d HTML5完成一个游戏——第一步
2013-09-06 16:37
591 查看
从零开始,使用Cocos2d HTML5完成一个游戏——第二步:鼠标交互
欢迎来到Cocos2d HTML5制作完整游戏第二课。这次我们准备给游戏添加鼠标交互。基于原来的游戏上,现在你要用鼠标移动一个红色圆圈。当你点击鼠标的时候你会拆毁一个圆圈,并且分发4发子弹上下左右飞出去。下面是我们今天要做的时候的步骤。从第一步开始,你只要改变circlechain.js文件:
var circlechain = cc.Scene.extend({
onEnter:function(){
this._super();
var layer = new circleChainGame();
layer.init();
this.addChild(layer);
}
})
var gameLayer;
var bulletSpeed=5;
var circleChainGame = cc.Layer.extend({
init:function(){
this._super();
this.setMouseEnabled(true);
var circleSpeed = 2;
var s = cc.Director.getInstance().getWinSize();
gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 500, 500)
for(i=0;i<10;i++){
var greenCircle = cc.Sprite.create("greencircle.png");
var randomDir = Math.random()*2*Math.PI;
greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
gameLayer.addChild(greenCircle);
greenCircle.setPosition(new cc.Point(Math.random()*500,Math.random()*500));
greenCircle.schedule(function(){
this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
if(this.getPosition().x>500){
this.setPosition(new cc.Point(this.getPosition().x-500,this.getPosition().y));
}
if(this.getPosition().x<0){
this.setPosition(new cc.Point(this.getPosition().x+500,this.getPosition().y));
}
if(this.getPosition().y>500){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-500));
}
if(this.getPosition().y<0){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+500));
}
})
}
redCircle=cc.Sprite.create("redcircle.png");
gameLayer.addChild(redCircle);
this.addChild(gameLayer);
return true;
},
onMouseDown:function (event) {
var location = event.getLocation();
gameLayer.removeChild(redCircle);
for(i=0;i<4;i++){
var redBullet = cc.Sprite.create("redbullet.png");
redBullet.xSpeed=bulletSpeed*Math.cos(i*Math.PI/2);
redBullet.ySpeed=bulletSpeed*Math.sin(i*Math.PI/2);
gameLayer.addChild(redBullet);
redBullet.setPosition(location);
redBullet.schedule(function(){
this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
if(this.getPosition().x>500 || this.getPosition().y>500 || this.getPosition().x<0 || this.getPosition().y<0){
gameLayer.removeChild(this);
}
})
}
},
onMouseMoved:function(event){
var location = event.getLocation();
redCircle.setPosition(location);
}
})
之后你会看到:
【效果请在原网页查看】
用鼠标移动红色圆圈,并且点击舞台让圆圈炸开。下次我会告诉你完整的连锁反应,并且下次会完整的注释代码
原文链接:http://www.emanueleferonato.com/2013/05/21/from-zero-to-a-complete-game-with-cocos2d-html5-step-2-mouse-interaction/
欢迎来到Cocos2d HTML5制作完整游戏第二课。这次我们准备给游戏添加鼠标交互。基于原来的游戏上,现在你要用鼠标移动一个红色圆圈。当你点击鼠标的时候你会拆毁一个圆圈,并且分发4发子弹上下左右飞出去。下面是我们今天要做的时候的步骤。从第一步开始,你只要改变circlechain.js文件:
var circlechain = cc.Scene.extend({
onEnter:function(){
this._super();
var layer = new circleChainGame();
layer.init();
this.addChild(layer);
}
})
var gameLayer;
var bulletSpeed=5;
var circleChainGame = cc.Layer.extend({
init:function(){
this._super();
this.setMouseEnabled(true);
var circleSpeed = 2;
var s = cc.Director.getInstance().getWinSize();
gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 500, 500)
for(i=0;i<10;i++){
var greenCircle = cc.Sprite.create("greencircle.png");
var randomDir = Math.random()*2*Math.PI;
greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
gameLayer.addChild(greenCircle);
greenCircle.setPosition(new cc.Point(Math.random()*500,Math.random()*500));
greenCircle.schedule(function(){
this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
if(this.getPosition().x>500){
this.setPosition(new cc.Point(this.getPosition().x-500,this.getPosition().y));
}
if(this.getPosition().x<0){
this.setPosition(new cc.Point(this.getPosition().x+500,this.getPosition().y));
}
if(this.getPosition().y>500){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-500));
}
if(this.getPosition().y<0){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+500));
}
})
}
redCircle=cc.Sprite.create("redcircle.png");
gameLayer.addChild(redCircle);
this.addChild(gameLayer);
return true;
},
onMouseDown:function (event) {
var location = event.getLocation();
gameLayer.removeChild(redCircle);
for(i=0;i<4;i++){
var redBullet = cc.Sprite.create("redbullet.png");
redBullet.xSpeed=bulletSpeed*Math.cos(i*Math.PI/2);
redBullet.ySpeed=bulletSpeed*Math.sin(i*Math.PI/2);
gameLayer.addChild(redBullet);
redBullet.setPosition(location);
redBullet.schedule(function(){
this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
if(this.getPosition().x>500 || this.getPosition().y>500 || this.getPosition().x<0 || this.getPosition().y<0){
gameLayer.removeChild(this);
}
})
}
},
onMouseMoved:function(event){
var location = event.getLocation();
redCircle.setPosition(location);
}
})
之后你会看到:
【效果请在原网页查看】
用鼠标移动红色圆圈,并且点击舞台让圆圈炸开。下次我会告诉你完整的连锁反应,并且下次会完整的注释代码
原文链接:http://www.emanueleferonato.com/2013/05/21/from-zero-to-a-complete-game-with-cocos2d-html5-step-2-mouse-interaction/
相关文章推荐
- 从零开始,使用Cocos2d HTML5完成一个游戏——第二步:鼠标交互
- 从零开始,使用Cocos2d HTML5完成一个游戏——第三步:连环反应
- 如何使用Createjs来编写HTML5游戏(七)完成一个简单的打飞机游戏(下)
- 如何使用Createjs来编写HTML5游戏(六)完成一个简单的打飞机游戏(上)
- [入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第一回合: 搭建开发环境
- 如何在cocos2d-x中使用ECS(实体-组件-系统)架构方法开发一个游戏?
- wp7使用Cocos2d-X for XNA制作一个塔防类游戏 (二)在游戏中加入地图和怪物。(下)
- 7.如何使用cocos2d和box2d来制作一个Breakout游戏:第一部分
- 【官方教程】使用Quick-Cocos2d-x搭建一个横版过关游戏(二)
- <cocos2d-x for wp7>使用cocos2d-x和BOX2D来制作一个BreakOut(打砖块)游戏(二)
- 8.如何使用cocos2d和box2d来制作一个Breakout游戏:第二部分
- <cocos2d-x for wp7>使用cocos2d-x和BOX2D来制作一个BreakOut(打砖块)游戏(二)
- 如何使用cocos2d制作一个多向滚屏射击游戏-第二部分
- 如何使用cocos2d-x制作一个塔防游戏:引子
- (译)如何使用cocos2d制作一个塔防游戏:第二部分
- 使用Cocos2d-x-3.0游戏引擎编写一个塔防游戏1
- 使用cocos2d和box2d来制作一个Breakout游戏:第一部分
- 使用cocos2d和box2d来制作一个Breakout游戏:第二部分
- (译)如何使用cocos2d来制作一个塔防游戏:第一部分
- [HTML5-Canvas] 使用HTML5 canvas完成的一个网页白板