HTML5小游戏,就叫天上掉馅饼吧。

转载 2012年11月20日 11:42:41
就是从屏幕上方下落物体,屏幕底部一个小家伙接着,接到拿分,借不到减生命。 

图片什么的,都是随便找的。大家有合适的图片可以共享下!
标签: <无>

代码片段(4)

[图片] z2.JPG

[图片] z.JPG

[代码] [JavaScript]代码

001 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
002 <html>
003 <head>
004 <title> new document </title>
005 <meta name="generator" content="editplus">
006 <meta name="author" content="">
007 <meta name="keywords" content="">
008 <meta name="description" content="">
009 </head>
010 <style type="text/css">
011     *{
012         padding:0;
013         margin:0;
014     }
015     body{
016         text-align:center;
017     }
018     #canvas{
019         margin:0 auto;
020     }
021 </style>
022 <SCRIPT LANGUAGE="JavaScript">
023 <!--
024     // 金币对像
025     var five = new Image();
026     five.src = "anchor.gif";
027     five.value = 5;
028     five.speed = 5;
029     var ten = new Image();
030     ten.src = "flash.gif";
031     ten.value = 10;
032     ten.speed = 10;
033     var twenty = new Image();
034     twenty.src = "rm.gif";
035     twenty.value = 20;
036     twenty.speed = 20;
037      
038     var heroImg = new Image();
039     heroImg.src = "smiley.png";
040      
041     var bg = new Image();
042     bg.src = "bg.jpg";
043      
044     // 金币类;
045     function Money(x,y,speed,img){
046         // 没次循环增加的像素数
047         this.speed = speed;
048         this.x = x;
049         this.y = y;
050         this.width = img.width;
051         this.height = img.height;
052         this.img = img;
053         this.value = img.value;
054     }
055     Money.prototype = {
056         draw:function(ctx){
057             ctx.drawImage(this.img,this.x,this.y);
058         },
059         move:function(){
060             this.y += this.speed;
061         }
062     }
063     // 娃娃脸
064     function Hero(x,y,img){
065         this.grade = 0;
066         this.life = 5;
067         this.x = x;
068         this.y = y;
069         this.img = img;
070         this.width = img.width;
071         this.height = img.height;
072     }
073     Hero.prototype = {
074         draw:function(ctx){
075             ctx.drawImage(this.img,this.x,this.y);
076         },
077         touch:function(other){
078             ifthis.x + this.width > other.x && this.x < other.x + other.width &&
079                 this.y + this.height > other.y && this.y < other.y + other.height ){
080                 this.grade += other.value;
081                 return true;
082             }
083             return false;
084         }
085     }
086     var App = {
087         // 对象
088         elements:[],
089         backImg:bg,
090         imgs:[five,ten,twenty],
091         hero:null,
092         // 画布
093         canvas:null,
094         // 绘制工具
095         context:null,
096         // 定时器
097         timer:null,
098         // 速度(更新间隔speed * 10)
099         speed:0,
100         pause:false,
101         // 绘制对象
102         draw:function(){
103             // 清屏
104             this.context.clearRect(0,0,this.canvas.width,canvas.height);
105             // 绘制背景
106             this.context.drawImage(this.backImg,0,0);
107             // 绘制娃娃脸
108             this.hero.draw(this.context);
109             // 绘制金币
110             for(var i=0;i<this.elements.length;i++){
111                 var o = this.elements[i];
112                 // 清理屏幕外的对象
113                 if(o.x > this.canvas.width || o.x < 0 || o.y >this.canvas.height || o.y < 0){
114                     this.elements.splice(i,1);
115                     this.hero.life--;
116                 }else if(this.hero.touch(o)){
117                     this.elements.splice(i,1);
118                 }else{
119                     o.draw(this.context);
120                 }
121             }
122             // 绘制生命值及得分
123             this.context.textAlign = "left";
124             this.context.font = 'normal 10px Arial';
125             this.context.fillStyle = "#fff";
126             this.context.fillText("Life:" this.hero.life,5,15);
127             this.context.fillText("Grade:" this.hero.grade,5,35);
128         },
129         // 循环处理
130         loop:function(){
131             var me = App;
132             if(me.pause){
133                 return;
134             }
135             for(var i=0;i<me.elements.length;i++){
136                 me.elements[i].move();
137             }
138             var chance = Math.random() * 1000;
139             // 1/10的对象添加概率
140             if(chance < 100){
141                 var img = me.imgs[parseInt(chance%me.imgs.length)];
142                 var x = Math.random()*(me.canvas.width - me.imgs[parseInt(chance%me.imgs.length)].width);
143                 var y = 0;
144                 var speed = img.speed;
145                 var money = new Money(x,y,speed,img);
146                 me.addElement(money);
147             }
148             me.draw();
149             if(me.hero.life == 0){
150                 me.gameOver();
151             }
152         },
153         // 开始游戏
154         gameStart:function(id,speed){
155             var me = this;
156             me.canvas = document.getElementById(id);
157             me.context = me.canvas.getContext("2d");
158             me.speed = speed;
159             me.hero = new Hero((me.canvas.width - heroImg.width)/2,me.canvas.height - heroImg.height,heroImg);
160             if(this.timer != null) me.gameOver();
161             me.canvas.onmousemove = function(e){
162                 e = window.event || e;
163                 var x = e.clientX - me.canvas.offsetLeft - me.hero.width/2;
164                  
165                 if(x > 0 && x < me.canvas.width - me.hero.width){
166                     me.hero.x = x;
167                 }
168             }
169             me.timer = setInterval(me.loop,me.speed * 10);
170         },
171         // 暂停游戏
172         gamePause:function(){
173             this.pause = true;
174             this.context.textAlign = "center";
175             this.context.fillStyle = "#f00";
176             this.context.font = 'bold 50px Arial';
177             this.context.fillText("Pause!",this.canvas.width/2,this.canvas.height/2);
178             this.context.font = 'bold 20px Arial';
179             this.context.fillText("Press space key to continue...",this.canvas.width/2,this.canvas.height/2 + 40);
180         },
181         // 结束游戏
182         gameOver:function(){
183             clearInterval(this.timer);
184             this.elements = [];
185             this.pause = false;
186             this.timer = null;
187             this.context.textAlign = "center";
188             this.context.fillStyle = "#f00";
189             this.context.font = 'bold 40px Arial';
190             this.context.fillText("Game Over!",this.canvas.width/2,this.canvas.height/2);
191         },
192         // 添加对象
193         addElement:function(o){
194             this.elements.push(o);
195         }
196