1 body { 2 margin: 0; 3 } 4 #game { 5 background: url("../images/back.png") repeat; 6 } 7 .wuli{ 8 position: absolute; 9 min-width: 200px; 10 height: 33px; 11 background: #355596; 12 opacity: 0.6; 13 filter:alpha(opacity = 60); 14 border-radius: 3px; 15 color: #fff; 16 text-align: center; 17 line-height: 33px; 18 } 19 .hide{ 20 display: none; 21 }
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>看我吃你们</title> 6 <link rel="stylesheet" href="css/main.css"> 7 <script type="text/javascript" src="js/jquery.js"></script> 8 <script type="text/javascript" src="js/game.js"></script> 9 </head> 10 <body> 11 <canvas id="game" width="510" height="480"></canvas> 12 <script type="text/javascript"> 13 $("#game").Game(); 14 </script> 15 </body> 16 </html>
1 View Code 2 3 4 //@charset "utf-8"; 5 (function(window,document,$){ 6 "use strict"; 7 var game = { 8 hx:0, 9 hy:0, 10 mx:0, 11 my:0, 12 ctx:"", 13 pie:0, 14 heroI:"", 15 monsI:"", 16 canvas:"", 17 num : 0, 18 cw : 0, 19 ch : 0, 20 init:function(item){ 21 game.initImg(); 22 var that = this; 23 game.canvas = document.getElementById("game"); 24 game.pie = that.width()/17; 25 game.ctx = game.canvas.getContext("2d"); 26 game.hx = game.getRandomPos().x; 27 game.hy = game.getRandomPos().y; 28 game.cw = game.canvas.width; 29 game.ch = game.canvas.height; 30 game.getRole(); 31 }, 32 initImg:function(){ 33 this.heroI = new Image(); 34 this.heroI.src = "images/me.png"; 35 this.monsI = new Image(); 36 this.monsI.src = "images/you.png"; 37 }, 38 //获取随机角色位置 39 getRole:function(){ 40 this.getImg(this.heroI,this.hx,this.hy); 41 setTimeout(function(){ 42 game.getMonster(); 43 },100); 44 this.move(); 45 }, 46 move:function(){ 47 $(document).on("keyup",function(e){ 48 var m_e = e || window.event; 49 var keycode = m_e.which; 50 if(keycode === 38){ 51 if(game.hy*game.pie >game.pie){ 52 game.operate("y",false); 53 } 54 }else if(keycode === 40 ){ 55 if(game.hy*game.pie < game.ch-2*game.pie){ 56 game.operate("y",true); 57 } 58 }else if(keycode === 37){ 59 if( game.hx*game.pie > game.pie ){ 60 game.operate("x",false); 61 } 62 }else if(keycode === 39){ 63 if( game.hx*game.pie < game.cw-2*game.pie ){ 64 game.operate("x",true); 65 } 66 } 67 }); 68 }, 69 operate:function(item,flag){ 70 var aim = flag ? 1 : -1; 71 game.clearRole("hero"); 72 item == "x" ? game.hx += aim : game.hy +=aim; 73 game.getNewHero(); 74 game.judgeEat(item,flag); 75 76 }, 77 judgeEat:function(item,flag){ 78 if(item == "x"){ 79 //var cel = flag ? this.heroI.width : 0; 80 var px = this.hx*this.pie; 81 var disx = Math.abs(px-this.mx*this.pie); 82 var disy = Math.abs(this.hy - this.my)*this.pie; 83 if(disx < 5 && disy<5 ){ 84 game.clearRole("mons"); 85 game.getMonster(); 86 setTimeout(function(){ 87 game.showResult(); 88 },400); 89 } 90 }else{ 91 //var cel = flag ? this.heroI.height : 0; 92 var py = this.hy*this.pie; 93 var disy = Math.abs(py-this.my*this.pie); 94 var disx = Math.abs(this.hx - this.mx)*this.pie; 95 if(disx <5 && disy< 5 ){ 96 game.clearRole("mons"); 97 game.getMonster(); 98 game.showResult(); 99 } 100 } 101 }, 102 showResult :function(){ 103 this.num ++; 104 if(this.num <5){ 105 if($(".wuli").length == 0){ 106 var box = $("<div class='wuli hide'>干掉"+this.num+"个啦!^O^</div>"); 107 $("body").append($(box)); 108 var l = (this.cw-box.width())/2; 109 var t = (this.ch-box.height())/2; 110 box.css({ 111 left:l, 112 top:t 113 }).removeClass("hide"); 114 }else{ 115 $(".wuli").html("干掉"+this.num+"个啦!^O^").show(); 116 } 117 }else{ 118 $(".wuli").html("你们全军覆没了诶~").show(); 119 setTimeout(function(){ 120 game.ctx.clearRect(game.mx*game.pie,game.my*game.pie,game.monsI.width,game.monsI.height); 121 }); 122 123 } 124 setTimeout(function(){ 125 $(".wuli").fadeOut(); 126 },800); 127 }, 128 clearRole:function(item){ 129 var x,y,width,height; 130 if(item == "hero"){ 131 x = this.hx; 132 y = this.hy; 133 width = this.heroI.width; 134 height = this.heroI.height; 135 }else{ 136 x = this.mx; 137 y = this.my; 138 width = this.monsI.width; 139 height = this.monsI.height; 140 } 141 var py = y*this.pie; 142 var px = x*this.pie; 143 this.ctx.clearRect(px,py,width,height); 144 }, 145 getNewHero:function(){ 146 this.getImg(this.heroI,this.hx,this.hy); 147 }, 148 //待优化，什么时候图片加载完成 149 getImg:function(img,x,y){ 150 var that = this; 151 /*var icon = new Image(); 152 icon.src=img;*/ 153 setTimeout(function(){ 154 that.ctx.drawImage(img,x*that.pie,y*that.pie); 155 },100); 156 }, 157 getMonster:function(){ 158 var x = game.getRandomPos().x; 159 var y = game.getRandomPos().y; 160 if(x === this.hx && y === this.hy ){ 161 x = this.judgePos().x; 162 y = this.judgePos().y; 163 } 164 this.mx = x; 165 this.my = y; 166 this.getImg(this.monsI,this.mx,this.my); 167 }, 168 judgePos : function(){ 169 var x=0, y=0; 170 do{ 171 x = this.getRandomPos().x; 172 y = this.getRandomPos().y; 173 }while(x === this.hx && y === this.hy); 174 return {x:x,y:y}; 175 }, 176 //返回随机的X,Y位置 177 getRandomPos:function(){ 178 var x = Math.ceil(Math.random()*15); 179 var y = Math.ceil(Math.random()*14); 180 return {x:x,y:y}; 181 } 182 }; 183 $.fn.Game = function(param){ 184 return game.init.apply(this,arguments); 185 }; 186 187 })(window,document,jQuery);
图片我就没贴了，这个简单的交互就是键盘上下左右移动操作其中的一个，用起来就知道了