<!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 ><div></div><div > <!--<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); }}); 总结 以上是内存溢出为你收集整理的cocos2d html5 简易点餐客户端全部内容，希望文章能够帮你解决cocos2d html5 简易点餐客户端所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）