{"id":287,"date":"2017-08-21T17:35:14","date_gmt":"2017-08-21T09:35:14","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=287"},"modified":"2021-10-19T10:45:46","modified_gmt":"2021-10-19T02:45:46","slug":"create-js%e5%bc%80%e5%8f%91%e7%ae%97%e6%9c%af%e5%a4%a7%e5%b8%88%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=287","title":{"rendered":"Create.js\u5f00\u53d1\u7b97\u672f\u5927\u5e08\u6e38\u620f(\u7ec8\u7ed3\u7bc7)"},"content":{"rendered":"

\u8fd1\u671f\u6bd4\u8f83\u5fd9\uff0c\u535a\u5ba2\u4e5f\u5f88\u4e45\u6ca1\u66f4\u65b0\u4e86\uff0c\u8bb2\u771f\u5176\u5b9e\u6211\u7684\u535a\u5ba2\u6c34\u5e73\u6ca1\u90a3\u4e48\u9ad8\uff0c\u81ea\u5df1\u5199\u7684\u5c0f\u4e1c\u897f\u4e5f\u662f\u672c\u7740\u6015\u81ea\u5df1\u5fd8\u8bb0\uff0c\u4e5f\u7b97\u662f\u7ed9\u81ea\u5df1\u63d0\u9192\uff0c\u8bf6 \u6700\u8fd1\u8bb0\u5fc6\u91cc\u4e0d\u662f\u5f88\u597d\uff0c<\/p>\n

\u5148\u770bhtml\uff1a<\/p>\n

\n
<canvas id=”game-canvas” width=”1280″ height=”720″><\/canvas><\/div>\n<\/div>\n
\u4e0ajs\u4ee3\u7801 \u4f9d\u65e7\u662f\u5165\u53e3\u6587\u4ef6\uff0c\u914d\u7f6e\u6587\u4ef6\uff0c\u9884\u52a0\u8f7d\u6587\u4ef6<\/div>\n
\n
\n
window.init = () => {<\/div>\n
letloadingValue=$(“#loading span”);<\/div>\n
window.queue=newc.LoadQueue();<\/div>\n
window.queue.installPlugin(createjs.Sound);<\/div>\n
window.queue.addEventListener(“complete”, (ev)=>{<\/div>\n
window.game=newGame();<\/div>\n
$(“#loading”).hide();<\/div>\n
});<\/div>\n
window.queue.addEventListener(“progress”, (ev)=>{<\/div>\n
loadingValue.text((ev.progress*100).toFixed() +”%”);<\/div>\n
})<\/div>\n
window.queue.loadManifest([<\/div>\n
{ id: “pointsound”, src: “music\/pointsound.mp3” },<\/div>\n
{ id: “noMuc”, src: “music\/noMuc.mp3” },<\/div>\n
{ id: “s2”, src: “music\/s2.mp3” },<\/div>\n
{ id: “nzb”, src: “music\/nzb.mp3” },<\/div>\n
])<\/div>\n
window.queue.loadManifest([<\/div>\n
{ id: “1”, src: “image\/assest\/1.png”},<\/div>\n
{ id: “2”, src: “image\/assest\/2.png”},<\/div>\n
{ id: “3”, src: “image\/assest\/3.png”},<\/div>\n
{ id: “4”, src: “image\/assest\/4.png”},<\/div>\n
{ id: “5”, src: “image\/assest\/5.png”},<\/div>\n
{ id: “6”, src: “image\/assest\/6.png”},<\/div>\n
{ id: “restart”, src: “image\/assest\/restart.png”},<\/div>\n
{ id: “scBtn”, src: “image\/direPic\/scBtn.png”},<\/div>\n
{ id: “sgBtn”, src: “image\/direPic\/sgBtn.png”},<\/div>\n
{ id: “pjBtn”, src: “image\/direPic\/middle.png”},<\/div>\n
{ id: “getScore”, src: “image\/assest\/getScore.png”},<\/div>\n
{ id: “gamebg”, src: “image\/assest\/gamebg.png”},<\/div>\n
{ id: “timer”, src: “image\/assest\/timer.png”}<\/div>\n
]);<\/div>\n
}<\/div>\n
\u8c8c\u4f3c\u6ca1\u5565\u53d8\u5316\uff0c\u8fd8\u662f\u8001\u4e00\u5957\uff0c<\/div>\n<\/div>\n
ok\u770b\u6e38\u620f\u903b\u8f91\u4ee3\u7801\u5904\u7406\uff0c<\/div>\n
\n
class Game {<\/div>\n
constructor(){<\/div>\n
this.stage=newc.Stage(“game-canvas”);<\/div>\n
c.Touch.enable(this.stage);<\/div>\n
this.stage.enableMouseOver();<\/div>\n
this.width=this.stage.canvas.width;<\/div>\n
this.height=this.stage.canvas.height;<\/div>\n
this.nTimeCount=300;<\/div>\n
this.gameDataSheet();<\/div>\n
this.render();<\/div>\n
createjs.Sound.play(“s2”, createjs.Sound.INTERRUPT_NONE,0,0,-1,1,0);<\/div>\n
}<\/div>\n
\u83b7\u53d6canvas\uff0c\u89e6\u5c4f\u4e8b\u4ef6\uff0c\u9f20\u6807\u76d1\u542c\u4e8b\u4ef6,\u821e\u53f0\u5bbd\uff0c\u821e\u53f0\u9ad8\uff0c\u5012\u8ba1\u65f6\uff0c\u5fc3\u8df3\u8ba1\u65f6\uff0cbgm\uff0c<\/div>\n
\n
\n
render(){<\/div>\n
this.stage.update();<\/div>\n
window.requestAnimationFrame(()=>{<\/div>\n
this.render();<\/div>\n
})<\/div>\n
}<\/div>\n
gameDataSheet(){<\/div>\n
window.ceil=window.localStorage.vision;<\/div>\n
window.score=0;<\/div>\n
this.firstScreen();<\/div>\n
}<\/div>\n
firstScreen() {<\/div>\n
vargameView;<\/div>\n
this.gameView=newcreatejs.Container();<\/div>\n
this.stage.addChild(this.gameView);<\/div>\n
this.gamebg();<\/div>\n
this.bgMain(); \/\/\u6e38\u620f\u80cc\u666f<\/div>\n
this.Layout(); \/\/\u6e38\u620f\u5e03\u5c40\u6309\u94ae\uff0c\u6e38\u620f\u903b\u8f91<\/div>\n
this.fCountTime(); \/\/\u5012\u8ba1\u65f6\u6a21\u5757<\/div>\n
}<\/div>\n<\/div>\n
\n
killScore(){<\/div>\n
letgameView;<\/div>\n
this.gameView=newcreatejs.Container();<\/div>\n
this.stage.addChild(this.gameView);<\/div>\n
this.bgMain(); \/\/\u6e38\u620f\u80cc\u666f<\/div>\n
\/\/\u5f97\u5206\u9762\u677f<\/div>\n
varscorePanel=newcreatejs.Bitmap(window.queue.getResult(“getScore”));<\/div>\n
scorePanel.x=390;<\/div>\n
scorePanel.y=50;<\/div>\n
this.gameView.addChild(scorePanel);<\/div>\n
\/\/ \u5f97\u5206<\/div>\n
lettext_score=newcreatejs.Text(window.score,”38px Arial”, “#ffffff”);<\/div>\n
text_score.x=710;<\/div>\n
text_score.y=190;<\/div>\n
text_score.textAlign=”center”;<\/div>\n
this.gameView.addChild(text_score);<\/div>\n
\/\/ \u91cd\u65b0\u5f00\u59cb<\/div>\n
varrestart=newcreatejs.Bitmap(window.queue.getResult(“restart”));<\/div>\n
restart.x=560;<\/div>\n
restart.y=0;<\/div>\n
createjs.Tween.get(restart).to({ x:restart.x, y:restart.y+400 }, 700,createjs.Ease.backOut);<\/div>\n
this.gameView.addChild(restart);<\/div>\n
restart.addEventListener(“mousedown”,(ev)=>{<\/div>\n
window.location.href=”index.html”;<\/div>\n
})<\/div>\n
}<\/div>\n
\/\/ \u5012\u8ba1\u65f6<\/div>\n
fCountTime() {<\/div>\n
lettext_sum=newcreatejs.Text(this.nTimeCount, “20px Arial”, “#ffffff”);<\/div>\n
text_sum.x=1227;<\/div>\n
text_sum.y=9;<\/div>\n
text_sum.textAlign=”center” ;<\/div>\n
this.gameView.addChild(text_sum);<\/div>\n
window.upSteTimeOut=setTimeout(()=>{<\/div>\n
if(this.nTimeCount>0){<\/div>\n
this.nTimeCount–;<\/div>\n
text_sum.text=this.nTimeCount;<\/div>\n
this.gameView.removeChild(text_sum);<\/div>\n
this.fCountTime();<\/div>\n
}else{<\/div>\n
window.clearInterval(window.upSteTimeOut);<\/div>\n
this.reset();<\/div>\n
this.killScore();<\/div>\n
}<\/div>\n
},1000)<\/div>\n
}<\/div>\n
\/\/\u6e38\u620f\u5e03\u5c40\u5904\u7406<\/div>\n
Layout(){<\/div>\n
vartimer,getHero,insect,redImgHero,sgBtns,scBtns,pjBtns;<\/div>\n
varheroContainer=newcreatejs.Container();<\/div>\n
window.currentIndex=babyEye.randomRange(1, 7);<\/div>\n
getHero=window.queue.getResult(currentIndex);<\/div>\n
insect=newcreatejs.Bitmap(getHero);<\/div>\n
insect.scaleX=insect.scaleY=ceil;<\/div>\n
insect.regX=148;<\/div>\n
insect.regY=28;<\/div>\n
heroContainer.addChild(insect);<\/div>\n
heroContainer.x=this.width\/2;<\/div>\n
heroContainer.y=this.height\/6;<\/div>\n
this.gameView.addChild(heroContainer);<\/div>\n
\/\/3\u6309\u94ae<\/div>\n
sgBtns=newcreatejs.Bitmap(window.queue.getResult(“sgBtn”));<\/div>\n
sgBtns.x=850;<\/div>\n
sgBtns.y=300;<\/div>\n
this.gameView.addChild(sgBtns);<\/div>\n
\/\/1\u6309\u94ae<\/div>\n
scBtns=newcreatejs.Bitmap(window.queue.getResult(“scBtn”));<\/div>\n
scBtns.x=320;<\/div>\n
scBtns.y=320;<\/div>\n
this.gameView.addChild(scBtns);<\/div>\n
\/\/2\u6309\u94ae<\/div>\n
pjBtns=newcreatejs.Bitmap(window.queue.getResult(“pjBtn”));<\/div>\n
pjBtns.x=580;<\/div>\n
pjBtns.y=260;<\/div>\n
this.gameView.addChild(pjBtns);<\/div>\n

\/\/\u5012\u8ba1\u65f6\u56fe<\/p>\n

this.timer=newcreatejs.Bitmap(window.queue.getResult(“timer”));<\/div>\n
this.timer.x=1139;<\/div>\n
this.timer.y=4;<\/div>\n
this.gameView.addChild(this.timer);<\/div>\n

\u6e38\u620f\u6838\u5fc3\u4e3b\u903b\u8f91<\/p>\n

if(window.currentIndex==5||window.currentIndex==6){<\/div>\n
scBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
this.gameView.removeChild(heroContainer);<\/div>\n
console.log(window.score);<\/div>\n
this.builderSuccess();<\/div>\n
})<\/div>\n
}else{<\/div>\n
scBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
heroContainer.scaleX=heroContainer.scaleY+0.1;<\/div>\n
this.buildrFail();<\/div>\n
})<\/div>\n
}<\/div>\n
\/\/3\u5224\u65ad<\/div>\n
if(window.currentIndex==3||window.currentIndex==2){<\/div>\n
sgBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
this.gameView.removeChild(heroContainer);<\/div>\n
this.builderSuccess();<\/div>\n
})<\/div>\n
}else{<\/div>\n
sgBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
heroContainer.scaleX=heroContainer.scaleY+0.1;<\/div>\n
this.buildrFail();<\/div>\n
})<\/div>\n
}<\/div>\n
\/\/2\u5224\u65ad<\/div>\n
if(window.currentIndex==1||window.currentIndex==4){<\/div>\n
pjBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
this.gameView.removeChild(heroContainer);<\/div>\n
this.builderSuccess();<\/div>\n
})<\/div>\n
}else{<\/div>\n
pjBtns.addEventListener(“mousedown”,(ev)=>{<\/div>\n
heroContainer.scaleX=heroContainer.scaleY+0.1;<\/div>\n
this.buildrFail();<\/div>\n
})<\/div>\n
}<\/div>\n
}<\/div>\n
builderSuccess(){<\/div>\n
\/\/\u89c6\u6807\u7f29\u653e\u4ee3\u7801\u7b97\u6cd5<\/div>\n
if(ceil==0.10000000000000014){ \/\/ 0.20000000000000015<\/div>\n
ceil=ceil-0.3;<\/div>\n
ceil+=0.3;<\/div>\n
}else{<\/div>\n
ceil=ceil-0.1;<\/div>\n
}<\/div>\n
\/\/\u5206\u6570\u6210\u7ee9\u4ee3\u7801\u7b97\u6cd5<\/div>\n
if(window.score<100){<\/div>\n
window.score=window.score+10;<\/div>\n
window.speed=window.speed+0.02;<\/div>\n
}else if(window.score == 100){<\/div>\n
window.score=100;<\/div>\n
}<\/div>\n
this.success(); \/\/\u4f60\u771f\u68d2<\/div>\n
window.clearInterval(window.upSteTimeOut); \/\/\u6e05\u9664\u5012\u8ba1\u65f6<\/div>\n
this.reset(); \/\/\u6e05\u9664\u753b\u5e03\u6240\u6709\u5185\u5bb9<\/div>\n
this.firstScreen(); \/\/\u753b\u5e03\u5237\u65b0<\/div>\n
}<\/div>\n
\u5f97\u5206\u903b\u8f91<\/div>\n
buildrFail(){<\/div>\n
window.speed=window.speed-0.1;<\/div>\n
this.fail();<\/div>\n
if(window.score<=0){<\/div>\n
window.score=0;<\/div>\n
}else{<\/div>\n
window.score=window.score-10;}<\/div>\n
window.clearInterval(window.upSteTimeOut);<\/div>\n
this.reset();<\/div>\n
this.firstScreen();<\/div>\n
}<\/div>\n
\/\/\u6210\u529f\u5904\u7406<\/div>\n
success(){<\/div>\n
createjs.Sound.play(“nzb”, createjs.Sound.INTERRUPT_NONE, 0, 0, 0, 1, 0);<\/div>\n
$(“#sucImg”).show(500);<\/div>\n
$(“#sucImg”).hide(500);<\/div>\n
}<\/div>\n
\/\/\u5931\u8d25\u5904\u7406<\/div>\n
fail(){<\/div>\n
createjs.Sound.play(“noMuc”, createjs.Sound.INTERRUPT_NONE, 0, 0, 0, 1, 0);<\/div>\n
$(“#failImg”).show(500);<\/div>\n
$(“#failImg”).hide(500);<\/div>\n
}<\/div>\n
\/\/\u79fb\u9664\u753b\u5e03\u6240\u6709<\/div>\n
reset(){<\/div>\n
this.stage.removeAllChildren();<\/div>\n
this.stage.removeAllEventListeners();<\/div>\n
}<\/div>\n
\/\/\u64ad\u653e\u80cc\u666f<\/div>\n
gamebg(){<\/div>\n
letgamebg=window.queue.getResult(“gamebg”);<\/div>\n
letgamebgs=newcreatejs.Bitmap(gamebg);<\/div>\n
gamebgs.x=0;<\/div>\n
gamebgs.y=20;<\/div>\n
this.gameView.addChild(gamebgs);<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\u8fd1\u671f\u6bd4\u8f83\u5fd9\uff0c\u535a\u5ba2\u4e5f\u5f88\u4e45\u6ca1\u66f4\u65b0\u4e86\uff0c\u8bb2\u771f\u5176\u5b9e\u6211\u7684\u535a\u5ba2\u6c34\u5e73\u6ca1\u90a3\u4e48\u9ad8\uff0c\u81ea\u5df1\u5199\u7684\u5c0f\u4e1c\u897f\u4e5f\u662f\u672c\u7740\u6015\u81ea\u5df1\u5fd8\u8bb0\uff0c\u4e5f\u7b97\u662f\u7ed9\u81ea\u5df1\u63d0 […]<\/p>\n","protected":false},"author":1,"featured_media":179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/287"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=287"}],"version-history":[{"count":3,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":828,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/287\/revisions\/828"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/media\/179"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}