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 |
= "";
|
027 |
= 5;
|
028 |
= 5;
|
029 |
var ten = new Image();
|
030 |
= "";
|
031 |
= 10;
|
032 |
= 10;
|
033 |
var twenty = new Image();
|
034 |
= "";
|
035 |
= 20;
|
036 |
= 20;
|
037 |
|
038 |
var heroImg = new Image();
|
039 |
= "";
|
040 |
|
041 |
var bg = new Image();
|
042 |
= "";
|
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 = ;
|
051 |
this.height = ;
|
052 |
this.img = img;
|
053 |
this.value = ;
|
054 |
}
|
055 |
= {
|
056 |
draw:function(ctx){
|
057 |
(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 = ;
|
071 |
this.height = ;
|
072 |
}
|
073 |
= {
|
074 |
draw:function(ctx){
|
075 |
(this.img,this.x,this.y);
|
076 |
},
|
077 |
touch:function(other){
|
078 |
if( this.x + this.width > && this.x < + &&
|
079 |
this.y + this.height > && this.y < + ){
|
080 |
this.grade += ;
|
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.(0,0,this.,);
|
105 |
// 绘制背景
|
106 |
this.(this.backImg,0,0);
|
107 |
// 绘制娃娃脸
|
108 |
this.(this.context);
|
109 |
// 绘制金币
|
110 |
for(var i=0;i<this.;i++){
|
111 |
var o = this.elements[i];
|
112 |
// 清理屏幕外的对象
|
113 |
if( > this. || < 0 || > this. || < 0){
|
114 |
this.(i,1);
|
115 |
this.--;
|
116 |
}else if(this.(o)){
|
117 |
this.(i,1);
|
118 |
}else{
|
119 |
(this.context);
|
120 |
}
|
121 |
}
|
122 |
// 绘制生命值及得分
|
123 |
this. = "left";
|
124 |
this. = 'normal 10px Arial';
|
125 |
this. = "#fff";
|
126 |
this.("Life:" + this.,5,15);
|
127 |
this.("Grade:" + this.,5,35);
|
128 |
},
|
129 |
// 循环处理
|
130 |
loop:function(){
|
131 |
var me = App;
|
132 |
if(){
|
133 |
return;
|
134 |
}
|
135 |
for(var i=0;i<;i++){
|
136 |
[i].move();
|
137 |
}
|
138 |
var chance = () * 1000;
|
139 |
// 1/10的对象添加概率
|
140 |
if(chance < 100){
|
141 |
var img = [parseInt(chance%)];
|
142 |
var x = ()*( - [parseInt(chance%)].width);
|
143 |
var y = 0;
|
144 |
var speed = ;
|
145 |
var money = new Money(x,y,speed,img);
|
146 |
(money);
|
147 |
}
|
148 |
();
|
149 |
if( == 0){
|
150 |
();
|
151 |
}
|
152 |
},
|
153 |
// 开始游戏
|
154 |
gameStart:function(id,speed){
|
155 |
var me = this;
|
156 |
= (id);
|
157 |
= ("2d");
|
158 |
= speed;
|
159 |
= new Hero(( - )/2, - ,heroImg);
|
160 |
if(this.timer != null) ();
|
161 |
= function(e){
|
162 |
e = || e;
|
163 |
var x = - - /2;
|
164 |
|
165 |
if(x > 0 && x < - ){
|
166 |
= x;
|
167 |
}
|
168 |
}
|
169 |
= setInterval(, * 10);
|
170 |
},
|
171 |
// 暂停游戏
|
172 |
gamePause:function(){
|
173 |
this.pause = true;
|
174 |
this. = "center";
|
175 |
this. = "#f00";
|
176 |
this. = 'bold 50px Arial';
|
177 |
this.("Pause!",this./2,this./2);
|
178 |
this. = 'bold 20px Arial';
|
179 |
this.("Press space key to continue...",this./2,this./2 + 40);
|
180 |
},
|
181 |
// 结束游戏
|
182 |
gameOver:function(){
|
183 |
clearInterval(this.timer);
|
184 |
this.elements = [];
|
185 |
this.pause = false;
|
186 |
this.timer = null;
|
187 |
this. = "center";
|
188 |
this. = "#f00";
|
189 |
this. = 'bold 40px Arial';
|
190 |
this.("Game Over!",this./2,this./2);
|
191 |
},
|
192 |
// 添加对象
|
193 |
addElement:function(o){
|
194 |
this.(o);
|
195 |
}
|
196 |
}
|
197 |
|
198 |
= function (){
|
199 |
var can = $("canvas");
|
200 |
var ctx = $("canvas").getContext("2d");
|
201 |
(bg,0,0);
|
202 |
(heroImg,( - )/2, - );
|
203 |
= "center";
|
204 |
= "#f00";
|
205 |
= 'bold 20px Arial';
|
206 |
("Press space key to start...",/2,/2);
|
207 |
= function(e){
|
208 |
if( != 32){
|
209 |
return;
|
210 |
}
|
211 |
if( == null){
|
212 |
("canvas",6);
|
213 |
}else if(){
|
214 |
= false;
|
215 |
}else{
|
216 |
("canvas",6);
|
217 |
}
|
218 |
}
|
219 |
}
|
220 |
function $(id){
|
221 |
return (id);
|
222 |
}
|
223 |
//--> |
224 |
</SCRIPT> |
225 |
<body> |
226 |
<canvas width=300 height=450 id="canvas" style="border:1px solid #ccc;background：url('')">
|
227 |
</canvas> |
228 |
</body> |
229 |
</html> |