cocojsdemo的簡單介紹

本文目錄一覽：

• 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