<!DOCTYPE HTML>
<html>
<head>
<Meta charset="utf-8">
<title>Cocos2d-HTML5 Test Cases</title>
<link rel="icon"
type="image/GIF"
href="res/Images/favicon.ico"/>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div></div>
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; Box-shadow: 0 5px 50px #333">
<!--<canvas id="gameCanvas" width="1200" height="675"></canvas>-->
<!--<canvas id="gameCanvas" width="480" height="270"></canvas>-->
<canvas id="gameCanvas" width="800" height="800"></canvas>
</div>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
</html>
/**
* A brief explanation for "project.json":
* Here is the content of project.json file,this is the global configuration for your game,you can modify it to customize some behavior.
* The detail of each field is under it.
{
"project_type": "javascript",// "project_type" indicate the program language of your project,you can ignore this field
"debugMode" : 1,// "debugMode" possible values :
// 0 - No message will be printed.
// 1 - cc.error,cc.assert,cc.warn,cc.log will print in console.
// 2 - cc.error,cc.warn will print in console.
// 3 - cc.error,cc.assert will print in console.
// 4 - cc.error,cc.log will print on canvas,available only on web.
// 5 - cc.error,cc.warn will print on canvas,available only on web.
// 6 - cc.error,cc.assert will print on canvas,available only on web.
"showFPS" : true,// Left bottom corner fps information will show when "showFPS" equals true,otherwise it will be hide.
"frameRate" : 60,// "frameRate" set the wanted frame rate for your game,but the real fps depends on your game implementation and the running environment.
"id" : "gameCanvas",// "gameCanvas" sets the id of your canvas element on the web page,it's useful only on web.
"renderMode" : 0,// "renderMode" sets the renderer type,only useful on web :
// 0 - Automatically chosen by engine
// 1 - Forced to use canvas renderer
// 2 - Forced to use WebGL renderer,but this will be ignored on mobile browsers
"engineDir" : "frameworks/cocos2d-html5/",// In debug mode,if you use the whole engine to develop your game,you should specify its relative path with "engineDir",// but if you are using a single engine file,you can ignore it.
"modules" : ["cocos2d"],// "modules" defines which modules you will need in your game,it's useful only on web,// using this can greatly reduce your game's resource size,and the cocos console tool can package your game with only the modules you set.
// For details about modules definitions,you can refer to "../../frameworks/cocos2d-html5/modulesConfig.json".
"jsList" : [
]
// "jsList" sets the list of js files in your game.
}
*
*/
cc.game.onStart = function(){
//cc.view.adjustViewPort(true);
//cc.view.setDesignResolutionSize(800,450,cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
//load resources
cc.director.setDisplayStats(false);
cc.LoaderScene.preload(g_resources,function () {
cc.director.runScene(new HelloWorldScene());
},this);
};
cc.game.run();
var g_type = new Array( '极品','特色小炒','红烧','煲类','盖浇饭','炒饭','汤','米饭');
var HelloWorldLayer = cc.Layer.extend({
sprite:null,m_winSize:cc.size(0,0),m_mainMenu:null,m_secondMenu:[],m_thirdMenu:null,m_inputTextField:[],m_pepleNum:null,m_price:null,m_tabel:null,m_stateMenu:0,m_oldPosition:null,ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
/////////////////////////////
// 2. add a menu item with "X" image,which is clicked to quit the program
// you may modify it.
// ask the window size
this.m_winSize = cc.winSize;
// add a "close" icon to exit the progress. it's an autorelease object
//var closeItem = new cc.MenuItemImage(
// res.CloseNormal_png,// res.CloseSelected_png,// function () {
// cc.log("Menu is clicked!");
// },this);
//closeItem.attr({
// x: size.width - 20,// y: 20,// anchorX: 0.5,// anchorY: 0.5
//});
//
//var menu = new cc.Menu(closeItem);
//menu.x = 0;
//menu.y = 0;
//this.addChild(menu,1);
//
///////////////////////////////
//// 3. add your codes below...
//// add a label shows "Hello World"
//// create and initialize a label
//var helloLabel = new cc.LabelTTF("Hello World","Arial",38);
//// position the label on the center of the screen
//helloLabel.x = size.width / 2;
//helloLabel.y = 0;
//// add the label as a child to this layer
//this.addChild(helloLabel,5);
//
//// add "HelloWorld" splash screen"
//this.sprite = new cc.Sprite(res.HelloWorld_png);
//this.sprite.attr({
// x: size.width / 2,// y: size.height / 2,// scale: 0.5,// rotation: 180
//});
//this.addChild(this.sprite,0);
//
//this.sprite.runAction(
// cc.sequence(
// cc.rotateTo(2,// cc.scaleTo(2,1,1)
// )
//);
//helloLabel.runAction(
// cc.spawn(
// cc.moveBy(2.5,cc.p(0,size.height - 40)),// cc.tintTo(2.5,255,125,0)
// )
//);
this.createMainMenu();
var _move = cc.moveBy(0.5,cc.p(this.m_winSize.width,0));
this.m_mainMenu.runAction(_move.easing(cc.easeSineInOut(0.6)));
if(1)
cc.eventManager.addListener(cc.EventListener.create({
event: cc.EventListener.TOUCH_ALL_AT_ONCE,onTouchesBegan:function (touches,event) {
var _this = event.getCurrentTarget();
if(_this.m_stateMenu == 2)
{
_this.m_oldPosition = touches[0].getLocation();
}
},onTouchesMoved:function (touches,event) {
var _this = event.getCurrentTarget();
if(_this.m_stateMenu == 2)
{
var _offsetX = _this.m_oldPosition.x - touches[0].getLocation().x;
var _offsetY = _this.m_oldPosition.y - touches[0].getLocation().y;
var _positionX = _this.m_thirdMenu.getPosition().x ;
var _positionY = _this.m_thirdMenu.getPosition().y - _offsetY;
if(_positionY<0)
{
_positionY = 0;
}
_this.m_thirdMenu.setPosition(cc.p(_positionX,_positionY));
_this.m_oldPosition = touches[0].getLocation();
}
},onTouchesEnded:function (touches,event) {
if (touches.length <= 0)
return;
var _this = event.getCurrentTarget();
if(_this.m_stateMenu == 1)
{
cc.log("11111111");
if(_this.m_inputTextField[0] && !_this.m_inputTextField[0].getString())//moveSprite(touches[0].getLocation());
{
_this.m_inputTextField[0].setPlaceHolder("输入人数");
}
if(_this.m_inputTextField[1] && !_this.m_inputTextField[1].getString())//moveSprite(touches[0].getLocation());
{
_this.m_inputTextField[1].setPlaceHolder("输入人均消费");
}
}
else if(_this.m_stateMenu == 2)
{
}
}
}),this);
return true;
},createMainMenu:function()
{
this.m_mainMenu = new cc.Node();
this.m_mainMenu.setPosition(cc.p(0,0));
this.addChild(this.m_mainMenu);
var mycars=new Array("生成今日菜单","点餐（即将开放）");
for(var i = 0; i < mycars.length; i++)
{
var _button = new ccui.Button();
_button.setTouchEnabled(true);
_button.setScale9Enabled(true);
_button.loadTextures("res/button.png","res/buttonHighlighted.png","");
_button.setContentSize(cc.size(400,80));
_button.setAnchorPoint(cc.p(0.5,0.5));
_button.setTag(i);
_button.addTouchEventListener(this.turnToSecondMenu,this);
var text = new ccui.Text();
text.string =mycars[i];
text.font = "30px 'Arial Black'";
text.color = cc.color(192,192,192);
text.setAnchorPoint(cc.p(0.5,0.5));
text.setPosition(cc.p(15,0));
var _createToDayDish = new ccui.Layout();
//_createToDayDish.setTag(i);
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(-this.m_winSize.width/2,this.m_winSize.height/2 + 50 - 100*i));
_createToDayDish.addChild(_button);
_createToDayDish.addChild(text);
this.m_mainMenu.addChild(_createToDayDish);
}
},createSecondMenu:function()
{
this.m_secondMenu = new cc.Node();
this.addChild(this.m_secondMenu);
var mycars=new Array("生成今日菜单","返回");
var _callback = new Array( this.turnThirdMenu,this.returnToMainMenu)
for(var i = 0; i < mycars.length; i++)
{
var _button = new ccui.Button();
_button.setTouchEnabled(true);
_button.setScale9Enabled(true);
_button.loadTextures("res/button.png",0.5));
_button.setTag(i);
_button.addTouchEventListener(_callback[i],0));
var _createToDayDish = new ccui.Layout();
//_createToDayDish.setTag(i);
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(this.m_winSize.width/2,this.m_winSize.height/2 + 50 - 100*i));
_createToDayDish.addChild(_button);
_createToDayDish.addChild(text);
this.m_secondMenu.addChild(_createToDayDish);
}
var _str=new Array("人数","人均");
for(var i = 0; i < 2; i++)
{
var text = new ccui.Text();
text.string =_str[i];
text.font = "30px 'Arial Black'";
text.color = cc.color(192,0));
var _createToDayDish = new ccui.Layout();
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(this.m_winSize.width/2-170,this.m_winSize.height/2 + 250 - 80*i));
_createToDayDish.addChild(text);
this.m_secondMenu.addChild(_createToDayDish);
}
var _textCallback = new Array(this.pepoleNum,this.perPerice);
var _placeHolder = new Array("输入人数","输入人均消费")
for(var i = 0; i < 2; i++)
{
var _button = new ccui.Button();
_button.setTouchEnabled(true);
_button.setScale9Enabled(true);
_button.loadTextures("res/button.png","res/button.png","");
_button.setContentSize(cc.size(200,50));
_button.setOpacity(0);
_button.setAnchorPoint(cc.p(0.5,0.5));
_button.setTag(i);
_button.addTouchEventListener(_textCallback[i],this);
var _createToDayDish = new ccui.Layout();
//_createToDayDish.setTag(i);
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(this.m_winSize.width/2,this.m_winSize.height/2 + 250 - 80*i));
_createToDayDish.addChild(_button);
this.m_secondMenu.addChild(_createToDayDish);
var _textField = new cc.TextFieldTTF("<click here for input>","Thonburi",20);
_textField.setPlaceHolder(_placeHolder[i]);
this.m_secondMenu.addChild(_textField);
_textField.setPosition(cc.p(this.m_winSize.width/2,this.m_winSize.height/2 + 250 - 80*i));
//this.m_secondMenu.push(_textField);
this.m_inputTextField[i] = _textField;
}
},createThirdMenu:function()
{
this.m_thirdMenu = new cc.Node();
this.m_thirdMenu.setPosition(cc.p(this.m_winSize.width,0));
this.addChild(this.m_thirdMenu);
//
{
var _title = new cc.LabelTTF("今日菜单",32,null,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width/2,this.m_winSize.height/2+350));
this.m_thirdMenu.addChild(_title);
}
{
var _title = new cc.LabelTTF("编号",25,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width * 0.1,this.m_winSize.height/2+300));
this.m_thirdMenu.addChild(_title);
}
{
var _title = new cc.LabelTTF("菜名",cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width*0.3,this.m_winSize.height/2+300));
this.m_thirdMenu.addChild(_title);
}
{
var _title = new cc.LabelTTF("价格",cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width*0.5,this.m_winSize.height/2+300));
this.m_thirdMenu.addChild(_title);
}
{
var _title = new cc.LabelTTF("类型",cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width*0.7,this.m_winSize.height/2+300));
this.m_thirdMenu.addChild(_title);
}
{
var _title = new cc.LabelTTF("美味度",cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(this.m_winSize.width*0.9,this.m_winSize.height/2+300));
this.m_thirdMenu.addChild(_title);
}
{
var _button = new ccui.Button();
_button.setTouchEnabled(true);
_button.setScale9Enabled(true);
_button.loadTextures("res/button.png","");
_button.setContentSize(cc.size(100,50));
_button.setAnchorPoint(cc.p(0.5,0.5));
//_button.setTag(i);
_button.addTouchEventListener(this.changeMenu,this);
var _createToDayDish = new ccui.Layout();
//_createToDayDish.setTag(i);
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(this.m_winSize.width*0.9,this.m_winSize.height/2 + 350));
_createToDayDish.addChild(_button);
var text = new ccui.Text();
text.string ="换一批"
text.font = "20px 'Arial Black'";
text.color = cc.color(192,0.5));
text.setPosition(cc.p(0,0));
_createToDayDish.addChild(text);
this.m_thirdMenu.addChild(_createToDayDish);
}
{
var _button = new ccui.Button();
_button.setTouchEnabled(true);
_button.setScale9Enabled(true);
_button.loadTextures("res/button.png",0.5));
//_button.setTag(i);
_button.addTouchEventListener(this.returnToSecondMenu,this);
var _createToDayDish = new ccui.Layout();
//_createToDayDish.setTag(i);
_createToDayDish.setContentSize(_button.getContentSize());
_createToDayDish.setPosition(cc.p(this.m_winSize.width*0.1,this.m_winSize.height/2 + 350));
_createToDayDish.addChild(_button);
var text = new ccui.Text();
text.string ="返回"
text.font = "20px 'Arial Black'";
text.color = cc.color(192,0));
_createToDayDish.addChild(text);
this.m_thirdMenu.addChild(_createToDayDish);
}
this.m_tabel = new cc.Node();
this.m_thirdMenu.addChild(this.m_tabel);
},pepoleNum:function (sender,type) {
if(cc.sys.isMobile)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
cc.log(123);
this.m_inputTextField[0].setPlaceHolder("");
this.m_inputTextField[0].attachWithIME();
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
break;
}
}
}
else
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.m_inputTextField[0].setPlaceHolder("");
this.m_inputTextField[0].attachWithIME();
break;
}
}
}
},perPerice:function (sender,type) {
if(cc.sys.isMobile)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
cc.log(123);
this.m_inputTextField[1].setPlaceHolder("");
this.m_inputTextField[1].attachWithIME();
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
break;
}
}
}
else
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.m_inputTextField[1].setPlaceHolder("");
this.m_inputTextField[1].attachWithIME();
break;
}
}
}
},turnToSecondMenu:function (sender,type) {
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
cc.log(11);
this.createSecondMenu();
this.m_secondMenu.setPosition(cc.p(this.m_winSize.width,0));
var _move = cc.moveBy(0.5,cc.p(-this.m_winSize.width,0));
this.m_mainMenu.runAction(cc.sequence(_move.easing(cc.easeSineInOut(0.6)),cc.removeSelf()));
var _move2 = cc.moveBy(0.5,0));
this.m_secondMenu.runAction(_move2.easing(cc.easeSineInOut(0.6)));
this.m_stateMenu = 1;
break;
}
}
},turnThirdMenu:function(sender,type)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.m_pepleNum = this.m_inputTextField[0].getString();
this.m_price = this.m_inputTextField[1].getString();
this.sendGetRequest();
this.createThirdMenu();
var _move = cc.moveBy(0.5,0));
this.m_thirdMenu.runAction(cc.sequence(_move.easing(cc.easeSineInOut(0.6))));
var _move2 = cc.moveBy(0.5,0));
this.m_secondMenu.runAction(cc.sequence(_move2.easing(cc.easeSineInOut(0.6)),cc.removeSelf()));
this.m_stateMenu = 2;
break;
}
}
},returnToMainMenu:function(sender,type)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.createMainMenu();
var _move = cc.moveBy(0.5,0));
this.m_mainMenu.runAction(_move.easing(cc.easeSineInOut(0.6)));
var _move2 = cc.moveBy(0.5,cc.removeSelf()));
this.m_stateMenu = 0;
break;
}
}
},returnToSecondMenu:function(sender,type)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.createSecondMenu();
this.m_secondMenu.setPosition(cc.p(-this.m_winSize.width,0));
this.m_secondMenu.runAction(_move.easing(cc.easeSineInOut(0.6)));
var _move2 = cc.moveBy(0.5,0));
this.m_thirdMenu.runAction(cc.sequence(_move2.easing(cc.easeSineInOut(0.6)),cc.removeSelf()));
this.m_stateMenu = 1;
break;
}
}
},changeMenu:function(sender,type)
{
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
{
break;
}
case ccui.Widget.TOUCH_MOVED:
{
//cc.log(2);
break;
}
case ccui.Widget.TOUCH_ENDED:
{
this.sendGetRequest();
break;
}
}
},sendPostPlainText: function() {
var that = this;
var winSize = cc.winSize;
var xhr = cc.loader.getXMLHttpRequest();
//var statusPostLabel = new cc.LabelTTF("Status:",18);
//this.addChild(statusPostLabel,1);
//statusPostLabel.x = winSize.width / 2;
//
//statusPostLabel.y = winSize.height - 140;
//statusPostLabel.setString("Status: Send Post Request to httpbin.org with plain text");
xhr.open("POST","http://192.168.0.205/js/index.PHP");
//set Content-type "text/plain;charset=UTF-8" to post plain text
xhr.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
cc.log("22");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
var httpStatus = xhr.statusText;
that.response = xhr.responseText;
//that.response = eval("("+that.response+")");
cc.log("111");
cc.log(that.response);
}
};
xhr.send("num=10&price=15");
},sendGetRequest: function() {
var that = this;
var winSize = cc.winSize;
var xhr = cc.loader.getXMLHttpRequest();
//set arguments with <URL>?xxx=xxx&yyy=yyy
xhr.open("GET","http://192.168.0.205/js/index.PHP?num="+that.m_pepleNum+"&price="+that.m_price,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
var httpStatus = xhr.statusText;
that.response = xhr.responseText;
that.response = eval("("+that.response+")");
cc.log(that.response.length);
that.m_tabel.removeAllChildren();
var _price= 0;
var _perPrice = 0;
for(var i = 0 ; i <that.response.length; i ++ )
{
{
var _title = new cc.LabelTTF(that.response[i].id,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.1,that.m_winSize.height/2+300 - (i+1)*50));
that.m_tabel.addChild(_title);
}
{
var _title = new cc.LabelTTF(that.response[i].name,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.3,that.m_winSize.height/2+300 - (i+1)*50));
that.m_tabel.addChild(_title);
}
{
var _title = new cc.LabelTTF(that.response[i].price,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.5,that.m_winSize.height/2+300 - (i+1)*50));
that.m_tabel.addChild(_title);
}
{
var _title = new cc.LabelTTF(g_type[that.response[i].type],cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.7,that.m_winSize.height/2+300 - (i+1)*50));
that.m_tabel.addChild(_title);
}
{
var _title = new cc.LabelTTF(that.response[i].taste,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.9,that.m_winSize.height/2+300 - (i+1)*50));
that.m_tabel.addChild(_title);
}
_price += Number(that.response[i].price);
}
_perPrice = _price / Number(that.m_pepleNum);
{
var _title = new cc.LabelTTF("合计 " + _price,cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.1,that.m_winSize.height/2+300 - (that.response.length+1)*50));
that.m_tabel.addChild(_title);
}
{
var _title = new cc.LabelTTF("人均 " + _perPrice.toFixed(2),cc.TEXT_ALIGNMENT_CENTER);
_title.setPosition(cc.p(that.m_winSize.width * 0.5,that.m_winSize.height/2+300 - (that.response.length+1)*50));
that.m_tabel.addChild(_title);
}
}
};
xhr.send();
},});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
原文链接：https://www.f2er.com/cocos2dx/346340.html
