本文目录一览：
- 1、cocos js 怎样做出按钮选中效果
- 2、自学cocos2d js游戏开发应该按什么步骤进行
- 3、求video.js的详细用法及demo
- 4、js写一个将图片向上淡出第二张图片从下往上淡入
- 5、cocos2d js怎么设置游戏界面在手机中是竖屏显示
cocos js 怎样做出按钮选中效果
cocos js 做出按钮选中效果示例：
一，首先使用cocos新建一个Cocos2d-js的新项目，然后再cocostudio中创建一个场景，在场景中添加三个按钮分别设置三态的图片
二，打开编辑器，实现代码如下：
var HelloWorldLayer = cc.Layer.extend({
ctor:function () {
this._super();
//导入cocostudio中拼好的界面
mainscene = ccs.load(res.MainScene_json).node;
this.addChild(mainscene);
this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0");
var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1");
var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2");
//先默认设置一个按钮为选中状态 this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);
this.teamButton.setEnabled(false);
var teamInfo = this.teamButton;
this.teamButton.addTouchEventListener(this.selectedBtn1,this);
btn2.addTouchEventListener(this.selectedBtn2,this);
btn3.addTouchEventListener(this.selectedBtn3,this);
return true;
},
selectedBtn1: function (sender, type) {
if(type == ccui.Widget.TOUCH_ENDED){
this.callBack(sender);
cc.log("==========商店界面");
}
},
selectedBtn2: function (sender, type) {
if(type == ccui.Widget.TOUCH_ENDED){
this.callBack(sender);
cc.log("==========卡牌界面");
}
},
selectedBtn3: function (sender, type) {
if(type == ccui.Widget.TOUCH_ENDED){
this.callBack(sender);
cc.log("==========战斗界面");
}
},
callBack: function (sender) {
if (this.teamButton == sender){
return;
}else{
this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL);
this.teamButton.setEnabled(true);
sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);
sender.setEnabled(false);
this.teamButton = sender;
}
},
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
三，运行就可以查看界面，点击不同的按钮显示不同的输出结果
[Log] ==========商店界面 (CCDebugger.js, line 331)
[Log] ==========卡牌界面 (CCDebugger.js, line 331)
[Log] ==========战斗界面 (CCDebugger.js, line 331)
自学cocos2d js游戏开发应该按什么步骤进行
跟你简要说一下我的自学路，以免你走弯路
背景：
有工作，而且很忙；在不影响工作基础上用业余时间鼓捣（经常会因为工作耽搁学习进度）；基本没技术背景（初中qbasic、高中pascal半吊子），大学文科，工作也不是搞代码。因此我感觉我的自学路跟你还是挺契合的。
1
两年前的一天，决定要做独立游戏制作人。选定引擎cocos2d，开始学习objective-c语言；（如果你打算只在iOS平台开发可以学obj-c配合cocos2d或者sprite kit；如果打算跨平台就要用cocos2d-x和c++了；当然unity什么的也不错但是我还没尝试过，一直很向往）
2
我跳过了iOS程序开发（似懂非懂看完了斯坦福那一系列的教学视频），结合当时情况直接选择了cocos2d引擎，这时开始接触 @吴一刀 推荐的博客；我主要看的是子龙山人子龙山人 - 博客园、Ray WenderlichRay Wenderlich、Himi黑米GameDev街区这些博客里最基本的例子，知易那个以我当时的水平还看不懂。
3
尝试开始设计自己的简单游戏，我做打地鼠！当然比教学例子里的打地鼠复杂多了
4
这个过程中发现自己懂的实在是不够，所以又开啃这本书：Learn cocos2d 2 by Steffen Itterheim Andreas Low
5
慢慢的发现需要一些趁手的工具和编辑器，并发展出一套自己构建于cocos2d之上的游戏设计架构。我目前的情况是这样：
关卡编辑我使用plist文件配合自己写的类；
sprite sheet使用TexturePackerTexturePacker；
动画/UI编辑最初自己手写太累，后来选择了cocosbuilder，请注意现在这个软件已经停止维护，转而引导用户使用SpriteBuilderSpriteBuilder（域名都做了自动跳转；SpriteBuilder我木有研究过，建议你研究一下）。
粒子编辑我自己还没实际用到，如果真正需要我感觉cocosbuilder的够我用的。//更新：后来用到了ParticleDesigner和cocosbuilder两个软件的粒子编辑混搭
我当时遇到的一个大麻烦是如何让cocosbuilder、cocos2d版本互相兼容且cocosbuilder无问题。大概情况是这样：cocosbuilder2.1和cocos2d-iphone2.0及2.1版本都不协调怎么办？；What version of Cocosbuilder and Cocos2d-iphone should I choose?
目前我使用的cocosbuilder 2.1版本（渐变层有bug、并且很可惜动画播放完没有触发消息的机制，我只好把每个动画时长都手动记录一下自己处理）
======3月12日更新======
在 @GarfieldKwong 指点下发现这个版本动画播放完是可以触发消息机制的，更高级版本3.x支持的效果应该是在动画中就加入callback的关键帧
新技能get√
具体代码可见下面学习案例的第一个例子里Explosion部分
=====================
cocosbuider的学习可以看两个例子Creating a Game with CocosBuilder；Introduction to CocosBuilder；然后就是多用多尝试。
6
整个学习过程要学会查资料、学会寻求帮助，我主要用的stackoverflow（话说刚刚发现stackoverflow的reputation喜过15，终于可以投票了:）
在学习过程中得到了子龙山人（我认为本尊是这位 @屈光辉 ）、LearnCocos2d作者Steffen、 @kubisoft 以及众多网上朋友的帮助，再次表示感谢。
7
硬件及开发者资格：看完c++开始看obj-c，这个过程一直是使用的vmware虚拟机安装的mac系统写程序；然后入手一个最便宜的mac pro、以及iPhone，尝试玩各种游戏；从看c++开始大约过了1年半（已经有非常简陋的游戏demo）才真正购入iOS开发者资格并开始真机测试。
8
尝试过的一些其他工具、各种弯路和坑、以及发散内容：
可以拖拽方式写代码的stencyl Stencyl: Make iPhone, iPad, Android Flash Games without code；
最初学的不是ojc-c而是谭浩强老师的c++程序设计（虽然有人不喜谭老师，但那书是中文的让我对面对对象程序设计有一些初步的概念，再看英文的obj-c不至于太摸不着头脑，反正手头正好有这么一本买了6年没看的c++。。。）；
尝试过Tiled Map Editor但自己目前的坑没有用到；
尝试过一点物理引擎和粒子，但自己目前的坑没有用到；现在粒子用到了，做了火焰等效果，也挺美的；但是一定要注意CPU占用优化，内存方面我最低支持4S没遇到大问题
学习音乐制作，这个我小时候学琴一直也喜欢音乐所以有一点点底子，如果没有基础可能上手有门槛；开始用的软件LMMS，但是音源插件在64位系统的问题我一直没解决掉时间精力也不多，所以是暂时停滞了；最近发现Garage Band可能也可以写歌；另外还试过一个很有历史的微软的音乐自动编辑器，很好玩，用来做背景音乐也不错。
入手手绘板学画画（这中间纠结了好久才决定用位图不用矢量图），如果你能找到热爱游戏的美术同学一起搞那最好不过。但是我一直对画画心痒难搔。。。所以入了这个深坑，晒一晒：
转载
z
求video.js的详细用法及demo
我也在自学，这个是我自己写的，改一下文件试试？：
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
*{ margin: 0; padding: 0;}
video::-webkit-media-controls-enclosure {
/*禁用播放器控制栏的样式*/
display: none !important;
}
#wrap{width:700px;position: relative; overflow: hidden;margin: 0 auto;}
.box{ position: absolute; bottom: 10px;width:100%;text-align: center; }
/*#play,#stop,#full,#secfull{ width: 7%;}
#videotimer{width: 20%}*/
/*#time{float: left;}*/
/style
/head
body
div class="full" id="wrap"
section class="video"
video width="700" height="" id="video" loop="" autoplay=""
source src="b.mp4" /source
/video
/section
section class="box"
button id="play"开始/button
button id="stop"暂停/button
button id="full"全屏/button
button id="escfull"退出全屏/button
input type="range" id="videotimer" min="0" value="0" /
!--div id="time"--
span00/span:span class="now"00/span /
time class="minute"00/time:time class="second"00/time
!--/div--
!--button id="mute"静音/button--
/section
/div
script src="../jquery-1.12.0.js" type="text/javascript" charset="utf-8"/script
script type="text/javascript"
var aplay=document.getElementById("play");
var astop=document.getElementById("stop");
var avideo=document.getElementById("video");
var full=document.getElementById("full");
var escfull=document.getElementById("escfull");
var wrap=document.getElementById("wrap");
var mute=document.getElementById("mute");
aplay.onclick=function(){
avideo.play();
}
astop.onclick=function(){
avideo.pause();
}
// mute.onclick=function(){
// avideo.muted();
// }
full.onclick=function(){
if(wrap.webkitRequestFullScreen){
wrap.webkitRequestFullScreen();
$('.full').css("width",$(window).width()+"px");
$('.full').css("height",$(window).height()+"px");
avideo.style.width = $(window).width()+"px";
}else if(wrap.mozRequestFullScreen){
wrap.mozRequestFullScreen();
}else if(wrap.msRequestFullscreen){
wrap.msRequestFullscreen();
}
}
escfull.onclick=function(){
if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
wrap.style.width = 700+"px";
wrap.style.height = 'auto';
avideo.style.width = 700+'px';
}
}
avideo.onloadedmetadata=function(){
var videoLong=Math.floor(avideo.duration);
var videonow=Math.floor(avideo.currentTime);
var min=Math.floor(videoLong/60);
var sec=Math.floor(videoLong%60);
$('.minute').html(min);
$('.second').html(sec);
$('#videotimer').attr("max",videoLong);
$('#videotimer').change(function(){
avideo.currentTime=$(this).val();
});
avideo.ontimeupdate=function(){
$('#videotimer').val(Math.floor(avideo.currentTime));
$('.now').html(Math.floor(avideo.currentTime));
}
}
/script
/body
/html
js写一个将图片向上淡出第二张图片从下往上淡入
这种通常用class切换状态比较好，一下是两张图片淡入淡出demo。通过js控制一个dom元素的class状态，可以产生想要的过渡动画
!DOCTYPE html
html
head
meta charset="utf-8" /
title/title
style type="text/css"
body{
background: #ccc;
}
.content{
position: absolute;
top: 30%;
}
#box1{
position: absolute;
border: 1px solid red;
transition: all 1s;/*过渡时间*/
}
#box2{
position: absolute;
border: 1px solid red;
transition: all 1s;/*过渡时间*/
}
.up{
/*图片向上状态*/
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
.down{
/*图片向下状态*/
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
/style
/head
body
button onclick="fadeInOut()"淡入淡出/button
div class="content"
!--图片1--
div id="box1" class=""img src=""//div
!--图片2--
div id="box2" class="down"img src=""//div
/div
script
function fadeInOut(){
console.log(1)
document.getElementById("box1").className="up";
document.getElementById("box2").className="";
}
/script
/body
/html
cocos2d js怎么设置游戏界面在手机中是竖屏显示
coco2dx js通用的设置竖屏显示的方法：
只需要在 RootViewController.mm 文件里面
if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
[[UIDevice currentDevice] performSelector:@selector(setOrientation:)
withObject:(id)UIInterfaceOrientationPortrait];
}
//判断不能是自己切换
- (BOOL) shouldAutorotate {
return NO;
}//一定要返回no
