html5
html5教程-HTML5 打地鼠
发布时间：2018-12-18 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5 打地鼠，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一直想用HTML5做个小游戏，但总是没有时间，今天抽了几个小时做了个打地鼠的小游戏，体验一下HTML5上的游戏开发。本着OSC的分享精神，特分享出来。没有花时间去找更多的素材，再加上本来就不怎么会做图，出了那个地洞的素材以外其他的全是从网上搜到的。代码也比较混乱，大家就凑合着看看吧，欢迎大家批评指正，也欢迎大家能把这个小游戏做的更完善些。
废话不说了，大家先看看效果吧：
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 onmouseover="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 }
资源图片：
作者 lion_yang
一直想用HTML5做个小游戏，但总是没有时间，今天抽了几个小时做了个打地鼠的小游戏，体验一下HTML5上的游戏开发。本着OSC的分享精神，特分享出来。没有花时间去找更多的素材，再加上本来就不怎么会做图，出了那个地洞的素材以外其他的全是从网上搜到的。代码也比较混乱，大家就凑合着看看吧，欢迎大家批评指正，也欢迎大家能把这个小游戏做的更完善些。
废话不说了，大家先看看效果吧：
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 onmouseover="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 }
资源图片：
作者 lion_yang
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 打地鼠全部内容，希望文章能够帮你解决html5教程-HTML5 打地鼠所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程