001.<!doctype html>
002.<html lang='en'>
003.<head>
004.<meta charset='UTF-8'>
005.<style>
006./*#cas{margin:auto;display: block;}*/
007..view{width: 700px;height:500px;position: relative;}
008.#coins{width:90px;height: 70px;line-height: 70px;position:absolute;left:0px;top:0;padding-left: 60px;background:url(image/coins.png) no-repeat;background-size:30px 30px;background-position:20px 20px;font-size: 34px;color: #FFF;}
009.</style>
010.<title>跑酷游戏</title>
011.<script src='easeljs-0.7.1.min.js'></script>
012.<script src='preloadjs-0.4.1.min.js'></script>
013.<script src='person.js'></script>
014.<script src='otherThings.js'></script>
015.</head>
016.<body>
017.<div class='view'>
018.
<canvas id='cas' width='700' height='500'>您的<a href="http://www.it165.net/edu/ewl/" target="_blank" class="keylink">浏览器</a>不支持canvas</canvas>
019.<div id='coins'>0</div>
020.</div>
021.<div id='showFPS' style='display: none;'></div>
022.<script>
023.var fps = document.getElementById('showFPS'),
024.countCoin = document.getElementById('coins');
025.var stage , C_W , C_H , loader;
026.var man , ground , sky;
027.
028.function init(){
029.stage = new createjs.Stage('cas');
030.C_W = stage.canvas.width;
031.C_H = stage.canvas.height;
032.
033.var manifest = [
034.{src:'image/man.png' , id:'man'},
035.{src:'image/ground.png' , id:'ground'},
036.{src:'image/bg.png' , id:'bg'},
037.{src:'image/high.jpg' , id:'high'},
038.{src:'image/coins.png' , id:'coin'}
039.]
040.
041.loader = new createjs.LoadQueue(false);
042.loader.addEventListener('complete' , handleComplete);
043.loader.loadManifest(manifest);
044.
045.drawLoading();
046.}
047.
048.function drawLoading(){
049.var ctx = stage.canvas.getContext('2d');
050.ctx.textAlign = 'center';
051.ctx.textBaseline = 'middle';
052.ctx.fillStyle = '#000';
053.ctx.fillRect(0,0,C_W,C_H);
054.ctx.fillStyle = '#FFF';
055.ctx.font = '25px 微软雅黑';
056.ctx.fillText('Loading...',C_W/2,C_H/2)
057.}
058.
059.//地图数据,mapData为石头数据,coinCode为金币数据
060.var mapData = [
061.'AAAACBBAAACABBAAACAABBBAAAABAAAAAACABCABCABCAAAABBBBBBAAAAACAAAAAAAAAAAABBBBBBAAAAAACACACACACAAAABBBBAAAAACAAAAAAAAAAAABBBBBBAAAAAACACACACACAABBAAAAAAABBA',
062.'AAAAAAAACAABAAAAAAAAAAAAAAABBBBBBCBBBBBBBBAAAAAAAAAAAAAAAAAAAAAAAAACACACACACACACACACACBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBCBCBCBCAAAAAAAAAAAAAAAAAA',
063.'AAAAAAAACAABAAAAAAAAAAAACACACACACACACACABAABABABABABABABACBCBCBCBCBCBCBCBCBCBCBCBCBCBCBCABABACBCBCACACACACACACACACACACACACACACACACACACACACACAAAAAAAAAAAAAAAA'
064.],
065.coinCode = [
066.'--------##########----------------############-#--#---##############-----------------##########-#-#-#-#-#-#-#-##-------################-------------###',
067.'--#--#-------####----------##----###-----####-#--#---####-#-#-#-######------####------#####-#-#-#-#-#-#-#-##-------################---############--###',
068.'-------#--#-------####----------##----##--##############---------######------####------#####-#-#-#-#-#-#-#-##----------################-------------###'
069.]
070.
071.function handleComplete(){ //当图片素材load完后执行该方法
072.var manImage = loader.getResult('man'),
073.lowground = loader.getResult('ground'),
074.highground = loader.getResult('high'),
075.bgImage = loader.getResult('bg'),
076.coins = loader.getResult('coin');
077.
078.sky = new createjs.Shape();
079.sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
080.sky.setTransform(0, 0, 1 , C_H/bgImage.height);
081.stage.addChild(sky);
082.
083.man = createMan(200,326,manImage);
084.
085.//该框为判定角色的判定区域
086.kuang = new createjs.Shape();
087.kuang.graphics.beginStroke('rgba(255,0,0,0.5)').drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
088.// stage.addChild(kuang);
089.
090.mapHandle(lowground , highground , coins);
091.
092.createjs.Ticker.timingMode = createjs.Ticker.RAF;
093.createjs.Ticker.setFPS(30);
094.createjs.Ticker.addEventListener('tick', tick);
095.
096.window.addEventListener('keydown' , function(event){
097.event = event||window.event;
098.if(event.keyCode===32&&man.jumpNum<man.jumpMax){
099.man.jump();
100.}
101.})
102.}
103.
104.
105.var mapIndex = 0, //地图序列
106.Mix = 0, //地图数组的索引
107.allStones = [], //存放所有的石头
108.allCoins = [], //所有金币
109.showSt = []; //存放显示出来的石头
110.
111.function mapHandle(lowground , highground , coins){ //初始化地图
112.allStones.length = 0;
113.var stoneImage = {'A':lowground , 'B':highground},kind = null;
114.for(var i=0;i<30;i++){ //把需要用到的石头预先放入容器中准备好
115.switch(i){
116.case 0:kind='A';break;
117.case 10:kind='B';break;
118.case 20:kind='C';break;
119.}
120.var st = createStone(C_W , kind , stoneImage);
121.allStones.push(st)
122.}
123.
124.for(var i=0;i<10;i++){ //把需要用到的金币预先放入容器中
125.var coin = createCoin(coins);
126.allCoins.push(coin);
127.}
128.
129.Mix = Math.floor(Math.random()*mapData.length); //随机地图序列
130.for(var i=0;i<8;i++){
131.setStone(false)
132.}
133.}
134.
135.function setStone(remove){ //添加陆地的石头
136.var arg = mapData[Mix].charAt(mapIndex),
137.coarg = coinCode[Mix].charAt(mapIndex),
138.cc = null;
139.
140.if(coarg==='#'){
141.for(var i=0;i<allCoins.length;i++){
142.if(!allCoins[i].shape.visible){
143.cc = allCoins[i];
144.cc.shape.visible = true;
145.break;
146.}
147.}
148.}
149.
150.for(var z=0;z<allStones.length;z++){
151.if(!allStones[z].shape.visible&&allStones[z].kind===arg){
152.var st = allStones[z];
153.st.shape.visible = true;
154.st.shape.x = showSt.length===0?0:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w;
155.
156.if(cc){
157.cc.shape.x = showSt.length===0?allStones[z].w/2-cc.size().w/2:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w+allStones[z].w/2-cc.size().w/2;
158.cc.shape.y = arg==='C'? C_H-loader.getResult('high').height-50 : allStones[z].shape.y-cc.size().h/2-50;
159.}
160.
161.if(remove) showSt.shift();
162.showSt.push(st);
163.break;
164.}
165.}
166.
167.mapIndex++;
168.if(mapIndex>=mapData[Mix].length){
169.Mix = Math.floor(Math.random()*mapData.length)
170.mapIndex=0;
171.}
172.}
173.
174.function tick(event){ //舞台逐帧逻辑处理函数
175.man.update();
176.
177.kuang.x = man.sprite.x+(man.picsize().w*1.5-man.size().w)/2; //参考框
178.kuang.y = man.sprite.y;
179.
180.man.ground.length=0;
181.var cg = stoneHandle();
182.
183.if(man.ground[0]&&!cg) {
184.man.ground.sort(function(a,b){return b.h-a.h});
185.man.endy = man.ground[0].y-man.picsize().h*1.5;
186.}
187.
188.allCoins.forEach(function(cc , index){
189.if(cc.shape.visible){
190.if(
191.Math.abs((kuang.x+man.size().w/2) - (cc.shape.x+cc.size().w/2)) <= (man.size().w+cc.size().w)/2&&
192.Math.abs((kuang.y+man.size().h/2) - (cc.shape.y+cc.size().h/2)) <= (man.size().h+cc.size().h)/2&&
193.!cc.isget
194.){
195.cc.isget = true;
196.countCoin.innerHTML = parseInt(countCoin.innerHTML)+1
197.}
198.cc.update();
199.}
200.})
201.
202.document.getElementById('showFPS').innerHTML = man.endy
203.stage.update(event)
204.}
205.
206.
207.function stoneHandle(){ //石头的逐帧处理 cg为判断当前角色的位置是否被阻挡,overStone是保存离开stage的石头块
208.var cg = false , overStone = null;
209.allStones.forEach(function(s){ //遍历石头,确定玩家落点
210.if(s.shape.visible){
211.s.update();
212.
213.if(s.shape.visible&&s.shape.x<=-s.w){
214.overStone = s;
215.}
216.
217.var juli = Math.abs((kuang.x+man.size().w/2)-(s.shape.x+s.w/2));
218.if(juli<=(man.size().w+s.w)/2 && man.ground.indexOf(s)===-1){
219.man.ground.push(s);
220.
221.if((s.shape.x+s.w/2)>(kuang.x+man.size().w/2)&&s.y<(kuang.y+man.size().h-10)){
222.man.sprite.x = s.shape.x-man.picsize().w-8;
223.cg = true;
224.}
225.}
226.}
227.});
228.if(overStone) {
229.setStone(true);
230.overStone.shape.visible = false;
231.}
232.
233.return cg;
234.}
235.
236.init();
237.</script>
238.</body>
239.</html>