HTML5 打地鼠

程序员文章站 2022-06-18 16:11:39

一直想用html5做个小游戏，但总是没有时间，今天抽了几个小时做了个打地鼠的小游戏，体验一下html5上的游戏开发。本着osc的分享精神，特分享出来。没有花时间去找更多的素材，再加上本来就不怎么会做...

一直想用html5做个小游戏，但总是没有时间，今天抽了几个小时做了个打地鼠的小游戏，体验一下html5上的游戏开发。本着osc的分享精神，特分享出来。没有花时间去找更多的素材，再加上本来就不怎么会做图，出了那个地洞的素材以外其他的全是从网上搜到的。代码也比较混乱，大家就凑合着看看吧，欢迎大家批评指正，也欢迎大家能把这个小游戏做的更完善些。

废话不说了，大家先看看效果吧：

HTML5 打地鼠

html文件：

01     <!doctype html>
02     <html lang="en" >
03         <head>
04             <meta charset="utf-8" />
05             <title>打地鼠</title>
06             <script type="text/javascript" src="js/game.js"></script>
07         </head>
08         <body onload="init()">
09             <p class="container">
10                 <canvas onmouver="hidecursor(this)" onmouseout="showcursor"
11                         onmousemove="hammermove(this);"
12                         onmousedown="hammerdown();" onmouseup="hammerup();"
13                         id="screen" width="700" height="500" style="border:1px solid #000"></canvas>
14             </p>
15
16             <p id="info"></p>
17         </body>
18     </html>

js文件：

001 var canvas, ctx, info;
002 var bg;
003 var hammer, hamx, hamy;
004 var mousestate, mousefrmlen = 10, mousepress = false;
005 var sprites = [], holes = [];
006 var score = 0;
007 var sprite = function(w, h, x, y, state, image){
008     var self = this;
009     this.w = w;
010     this.h = h;
011     this.x = x;
012     this.y = y;
013     this.image = image;
014     this.state = state;
015
016     this.draw = function(){
017         if(this.state == 'show'){
018             ctx.drawimage(this.image, this.x, this.y, this.w, this.h);
019             settimeout(function(){
020                 self.state = 'hide';
021             },3000);
022         }
023     }
024 }
025
026 var holesprite = function(w, h, x, y, state, image){
027     var self = this;
028     this.w = w;
029     this.h = h;
030     this.x = x;
031     this.y = y;
032     this.image = image;
033     this.state = state;
034
035     this.draw = function(){
036         if(this.state == 'show'){
037             ctx.drawimage(this.image, this.x, this.y, this.w, this.h);
038         }
039     }
040 }
041
042 function hammersprite(w, h, x, y, image){
043     hammersprite.prototype.w = w;
044     hammersprite.prototype.h = h;
045     hammersprite.prototype.x = x;
046     hammersprite.prototype.y = y;
047
048     hammersprite.prototype.draw = function(ispress){
049         if(ispress){
050             ctx.save();
051
052             ctx.translate(this.x-10, this.y+34);
053             ctx.rotate(math.pi/180*330);
054             ctx.drawimage(image, 0, 0, w, h);
055
056             ctx.restore();
057         }else{
058             ctx.drawimage(image, this.x, this.y, w, h);
059         }
060
061     }
062 }
063
064 function clearscreen(){
065     //ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);
066     ctx.drawimage(bg, 0, 0, ctx.canvas.width, ctx.canvas.height);
067 }
068
069 function drawscreen(){
070     clearscreen();
071
072     //绘制得分
073
074     ctx.font = "40px serif"
075     ctx.strokestyle = "#ff00ff";
076     ctx.stroketext ("lion打地鼠", 50,50);
077     ctx.fillstyle = "#000000";
078     ctx.filltext("lion打地鼠",50,50);
079
080     ctx.fillstyle = "#ff0000";
081     ctx.filltext("你的得分:"+score,450,50);
082     for(i=0;i<3;i++){
083         for(j=0; j<3; j++){
084             holes[i][j].draw();
085         }
086     }
087
088
089     for(i=0;i<3;i++){
090         for(j=0; j<3; j++){
091             sprites[i][j].draw();
092         }
093     }
094
095     if(hammer){
096         hammer.draw(mousepress);
097     }
098 }
099
100 function updatelogic(){
101
102     for(i=0;i<3;i++){
103         for(j=0; j<3; j++){
104             sprites[i][j].state=='hide'
105         }
106     }
107
108     var a = math.round(math.random()*100)%3;
109     var b = math.round(math.random()*100)%3;
110     sprites[a][b].state='show';
111 }
112
113
114 function hammermove(e){
115     if(hammer){
116         hammer.x = event.x-40;
117         hammer.y = event.y-40;
118     }
119 }
120
121 function hit(x, y){
122
123     for(i=0;i<3;i++){
124         for(j=0;j<3;j++){
125             var s = sprites[i][j];
126
127             if(s.state=='show'){
128                 if(x>s.x+30 && y>s.y && x<(s.x+s.w+30) && y<(s.y+s.h)){
129                     score++;
130                     s.state = 'hide';
131                 }
132             }
133         }
134     }
135 }
136
137 function init(){
138     info = document.getelementbyid('info');
139     canvas = document.getelementbyid('screen');
140     ctx = canvas.getcontext('2d');
141
142     bg = new image();
143     bg.src = 'bg.jpg';
144     bg.onload = function(){};
145
146
147     var hamimg = new image();
148     hamimg.src = 'hammer.png';
149     hamimg.onload = function(){
150         hammer = new hammersprite(48, 48, 100, 100, hamimg);
151    }
152
153     var msimg = new image();
154     msimg.src = 'mouse.png';
155
156     msimg.onload = function(){
157         for(i=0;i<3;i++){
158             var arr = [];
159             for(j=0; j<3; j++){
160                 var s = new sprite(60, 70, 50+240*i, 80+120*j, 'hide', msimg);
161                 arr[j] = s;
162             }
163             sprites[i] = arr;
164         }
165     }
166
167     var holeimg = new image();
168     holeimg.src = 'hole.png';
169     holeimg.onload = function(){
170         for(i=0;i<3;i++){
171             var arr = [];
172             for(j=0; j<3; j++){
173                 var s = new holesprite(80, 30, 40+240*i, 140+120*j, 'show', holeimg);
174                 arr[j] = s;
175             }
176             holes[i] = arr;
177         }
178     }
179
180     setinterval(drawscreen, 30);
181     setinterval(updatelogic, 3000);
182
183 };
184
185 function hammerdown(){
186     mousepress = true;
187 }
188
189 function hammerup(){
190
191     info.innerhtml=event.x+':'+event.y;
192     mousepress = false;
193     hit(event.x, event.y);
194 }
195
196 function hidecursor(obj){
197     obj.style.cursor='none';
198 }
199
200 function showcursor(obj){
201     obj.style.cursor='';
202 }

资源图片：

HTML5 打地鼠