查看: 882|回复: 18

[HTML5游戏教程] 介绍一个简单的HTML5的小游戏——打地鼠

[复制链接]
发表于 2016-11-22 16:10:01 | 显示全部楼层 |阅读模式
今天介绍一个打地鼠的小游戏,体验一下HTML5上的游戏开发。本着高精尖的分享精神,特分享出来。没有花时间去找更多的素材,欢迎大家批评指正,也欢迎大家能把这个小游戏做的更完善些。

   废话不说了,大家先看看效果吧:


5bcc96850a612bab1d1673c2b08985a4.jpg

html文件:
  1. <font size="3" face="微软雅黑" color="#2f4f4f"><body onload="init()">
  2.         <div class="container">
  3.     <canvas onmouseover="hideCursor(this)" onmouseout="showCursor"
  4.     onmousemove="hammerMove(this);"
  5.     onmousedown="hammerDown();" onmouseUp="hammerUp();"
  6.     id="screen" width="700" height="500" style="border:1px solid #000"></canvas>
  7.         </div>
  8.          
  9.         <div id="info"></div>
  10.     </body></font>
复制代码

js文件:

1、场景初始化代码:


  1. <font size="3" face="微软雅黑" color="#2f4f4f"> //初始化
  2. function init(){
  3.     info = document.getElementById('info');
  4.     canvas = document.getElementById('screen');
  5.     ctx = canvas.getContext('2d');
  6.      
  7.     bg = new Image();
  8.     bg.src = 'bg.jpg';
  9.     bg.onload = function(){};
  10.      
  11.      
  12.     var hamImg = new Image();
  13.     hamImg.src = 'hammer.png';
  14.     hamImg.onload = function(){
  15.         hammer = new HammerSprite(48, 48, 100, 100, hamImg);
  16.     }
  17.      
  18.     var msImg = new Image();
  19.     msImg.src = 'mouse.gif';
  20.      
  21.     msImg.onload = function(){
  22.         for(i=0;i<3;i++){
  23.             var arr = [];
  24.             for(j=0; j<3; j++){
  25.                 var s = new Sprite(60, 70, 50+240*i, 80+120*j, 'hide', msImg);
  26.                 arr[j] = s;
  27.             }
  28.             sprites[i] = arr;
  29.         }      
  30.     }
  31.      
  32.     var holeImg = new Image();
  33.     holeImg.src = 'hole.png';
  34.     holeImg.onload = function(){
  35.         for(i=0;i<3;i++){
  36.             var arr = [];
  37.             for(j=0; j<3; j++){
  38.                 var s = new HoleSprite(80, 30, 40+240*i, 140+120*j, 'show', holeImg);
  39.                 arr[j] = s;
  40.             }
  41.             holes[i] = arr;
  42.         }      
  43.     }
  44.      
  45.     setInterval(drawScreen, 30);
  46.     setInterval(updateLogic, 3000);
  47.      
  48. };</font>
复制代码
2、精灵初始化:
  1. <font size="3" face="微软雅黑" color="#2f4f4f">
  2. var Sprite = function(w, h, x, y, state, image){
  3.     var self = this;
  4.     this.w = w;
  5.     this.h = h;
  6.     this.x = x;
  7.     this.y = y;
  8.     this.image = image;
  9.     this.state = state;
  10.      
  11.     this.draw = function(){
  12.         if(this.state == 'show'){
  13.             ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
  14.             setTimeout(function(){
  15.                 self.state = 'hide';
  16.             },3000);
  17.         }
  18.     }
  19. }</font>
复制代码
3、洞穴初始化:
  1. <font size="3" face="微软雅黑" color="#2f4f4f">var HoleSprite = function(w, h, x, y, state, image){
  2.     var self = this;
  3.     this.w = w;
  4.     this.h = h;
  5.     this.x = x;
  6.     this.y = y;
  7.     this.image = image;
  8.     this.state = state;
  9.      
  10.     this.draw = function(){
  11.         if(this.state == 'show'){
  12.             ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
  13.         }
  14.     }
  15. }</font>
复制代码
4、锤子初始化:
  1. <font size="3" face="微软雅黑" color="#2f4f4f">function HammerSprite(w, h, x, y, image){
  2.     HammerSprite.prototype.w = w;
  3.     HammerSprite.prototype.h = h;
  4.     HammerSprite.prototype.x = x;
  5.     HammerSprite.prototype.y = y;
  6.      
  7.     HammerSprite.prototype.draw = function(isPress){
  8.         if(isPress){
  9.             ctx.save();
  10.             
  11.             ctx.translate(this.x-10, this.y+34);
  12.             ctx.rotate(Math.PI/180*330);
  13.             ctx.drawImage(image, 0, 0, w, h);
  14.             
  15.             ctx.restore();
  16.         }else{
  17.             ctx.drawImage(image, this.x, this.y, w, h);
  18.         }
  19.          
  20.     }
  21. }
  22. </font>
复制代码
5、绘制得分:
  1. <font size="3" face="微软雅黑" color="#2f4f4f">ctx.font = "40px serif"
  2.     ctx.strokeStyle = "#fff";
  3.     ctx.strokeText ("打地鼠", 50,50);
  4.     ctx.fillStyle = "#fff";
  5.     ctx.fillText("打地鼠",50,50);

  6.     ctx.fillStyle = "#fff";
  7.     ctx.fillText("你的得分:"+score,450,50);
  8.     for(i=0;i<3;i++){
  9.         for(j=0; j<3; j++){
  10.             holes[i][j].draw();
  11.         }
  12.     }</font>
复制代码
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

发表于 2016-12-2 15:36:06 | 显示全部楼层
休息休息惺惺惜惺惺想寻
回复 支持 反对

使用道具 举报

发表于 2016-12-5 14:50:18 | 显示全部楼层
不错,新手报道,谢谢分享
回复 支持 反对

使用道具 举报

发表于 2016-12-6 14:27:36 | 显示全部楼层
333333333333333
回复 支持 反对

使用道具 举报

发表于 2016-12-7 11:11:00 | 显示全部楼层
学习了,谢谢分享~~~~~~
回复 支持 反对

使用道具 举报

发表于 2016-12-7 16:24:07 | 显示全部楼层
44897132134564
回复 支持 反对

使用道具 举报

发表于 2016-12-14 11:11:18 | 显示全部楼层
是用什么软件开发的啊
回复 支持 反对

使用道具 举报

发表于 2017-1-3 03:02:58 | 显示全部楼层
感謝謝大大熱心教學
回复 支持 反对

使用道具 举报

发表于 2017-1-18 15:32:45 | 显示全部楼层
我要看看行不
回复 支持 反对

使用道具 举报

发表于 2017-1-19 11:32:36 | 显示全部楼层
aaaaaaaaaaaaa
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:Admin@zzfriend.com QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2016 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表