下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<HTML> <Meta charset="utf-8" /> <Title>打蟹</Title> <style> body{ background:gray; text-align:center; } canvas{ background:white; } </style> <body> <canvas ID="canvas" wIDth="1024px" height="576px"></canvas> <div > <img src="界面.png" ID="background" /> <img src="锤子.png" ID="hammer" /> <img src="锤子1.png" ID="hammer1" /> <img src="洞前.png" ID="hole1"/> <img src="洞后.png" ID="hole2" /> <img src="数字.png" ID="number" /> <img src="大螃蟹.png" ID="big_crab" /> <img src="小螃蟹1.png" ID="crab1" /> <img src="小螃蟹2.png" ID="crab2" /> <img src="小螃蟹3.png" ID="crab3" /> <img src="生命.png" ID="life" /> </div> <audio ID="music1" preload="auto" src="打蟹-1.mp3" /> <audio ID="music2" preload="auto" src="打蟹-2.mp3" /> <audio ID="music3" preload="auto" src="打蟹-3.mp3" /> <audio ID="music4" preload="auto" src="打蟹-4.mp3" /> <script> var game = (function(){ var that = {}; that.canvas = document.getElementByID('canvas'); that.cWIDth = that.canvas.wIDth; that.cHeight = that.canvas.height; that.cc = that.canvas.getContext('2d'); that.images = { 'background' : document.getElementByID('background'),'hammer' : document.getElementByID('hammer'),'hammer1' : document.getElementByID('hammer1'),'hole1' : document.getElementByID('hole1'),'hole2' : document.getElementByID('hole2'),'number' : document.getElementByID('number'),'bigCrab' : document.getElementByID('big_crab'),'crab1' : document.getElementByID('crab1'),'crab2' : document.getElementByID('crab2'),'crab3' : document.getElementByID('crab3'),'life' : document.getElementByID('life') }; that.musics = { 'music1' : document.getElementByID('music1'),'music2' : document.getElementByID('music2'),'music3' : document.getElementByID('music3'),'music4' : document.getElementByID('music4') }; that.holes = [[450,100],[300,235],[670,180],[445,375],[150,390]]; that.state = 0; //0: 正常 1: 打中 2: 打错 3: 结束 that.formula = []; that.life = 3; that.crabs = []; that.drawBackground = function(){ that.cc.drawImage(that.images.background,that.cWIDth,that.cHeight); that.cc.drawImage(that.images.hole1,that.holes[0][0],that.holes[0][1],that.images.hole1.wIDth,that.images.hole1.height); that.cc.drawImage(that.images.hole2,that.images.hole2.wIDth,that.images.hole2.height); that.cc.drawImage(that.images.hole1,that.holes[1][0],that.holes[1][1],that.holes[2][0],that.holes[2][1],that.holes[3][0],that.holes[3][1],that.holes[4][0],that.holes[4][1],that.images.hole2.height); }; that.clearCanvas = function(){ that.cc.clearRect(0,that.cHeight); }; that.getNumY = function(num){ var n; switch(num){ case '0' : n = 3; break; case '1' : n = 43; break; case '2' : n = 82; break; case '3' : n = 122; break; case '4' : n = 163; break; case '5' : n = 203; break; case '6' : n = 243; break; case '7' : n = 283; break; case '8' : n = 323; break; case '9' : n = 363; break; case '+' : n = 403; break; case '-' : n = 443; break; case '*' : n = 483; break; case '/' : n = 523; break; default : break; } return n; }; that.createFormula = function(){ var a = parseInt(Math.random()*30+1); var b = parseInt(Math.random()*30+1); var c = a * b; return [c + '/' + a,b]; }; that.displayFormula = function(){ var len = that.formula[0].length; for(var i = 0; i < len; i ++){ that.cc.drawImage(that.images.number,that.getNumY(that.formula[0].charat(i)),35,200 + i * 32,60,32,32); } }; that.init = function(){ that.formula = that.createFormula(); that.bigCrab = new BigCrab(); that.state = 0; that.life = 3; for(var i = 0; i < 5; i++){ var crab = new Crab(); crab.inHole = game.holes[i]; that.crabs.push(crab); } that.crabs[0].number = that.formula[1]; that.hammer = new Hammer(); } that.checkClick = function(x,y){ if((that.crabs[0].inHole[0]+240) > x && that.crabs[0].inHole[0] < x && that.crabs[0].inHole[1] < y && (that.crabs[0].inHole[1]+50) > y){ return 0; }else{ for(var i = that.crabsToShow.length - 1; i > 0; i--){ if((that.crabs[that.crabsToShow[i]].inHole[0]+240) > x && that.crabs[that.crabsToShow[i]].inHole[0] < x && that.crabs[that.crabsToShow[i]].inHole[1] < y && (that.crabs[that.crabsToShow[i]].inHole[1]+50) >y){ return 1; } } } }; that.displaylife = function(){ for(var i=0;i<that.life;i++){ that.cc.drawImage(that.images.life,that.images.life.wIDth,that.images.life.height,380-i*40,520,20,20); } }; return that; })(); var Hammer = function(){ this.state = 0; this.x = 0; this.y = 0; this.display = function(){ var image = game.images.hammer; if(this.state != 0){ image = game.images.hammer1; } game.cc.drawImage(image,this.x,this.y,image.wIDth,image.height); }; } var BigCrab = function(){ this.blood = 100; this.displayBlood = function(){ var num = this.blood; for(var i = 0; i < 3; i++){ if(num != 0){ game.cc.drawImage(game.images.number,game.getNumY((num % 10) + ''),185 - i * 20,25,25); num = parseInt(num / 10); }else{ game.cc.drawImage(game.images.number,3,25); } } }; var n=0; this.displayMotion = function(m){ switch(m){ case 3: case 0: if(n > 29){ n = 0; } game.cc.drawImage(game.images.bigCrab,n % 6 * 400,parseInt(n / 6) * 300,400,300,40,70,320,240); n++; break; case 1: if(n > 1){ n = 0; } game.cc.drawImage(game.images.bigCrab,n * 400,(parseInt(n / 6) +10) * 300,240); n++; break; case 2: if(n > 1){ n = 0; } game.cc.drawImage(game.images.bigCrab,(parseInt(n / 6) +9) * 300,240); n++; break; } }; }; var Crab = function(){ this.number = parseInt(Math.random()*99+1); this.inHole = game.holes[parseInt(Math.random()*5)]; this.displayNumber = function(){ var num = this.number; for(var i = 0; i < 2; i++){ game.cc.drawImage(game.images.number,this.inHole[0]+130-35*i,this.inHole[1]+70,35); num = parseInt(num / 10); if(num == 0){ break; } } } var n = 0; var image = eval("game.images.crab" + parseInt(Math.random()*3+1)); this.display = function(i){ if(i != undefined){ n = i; } if(n > 59){ game.cc.drawImage(image,220,150,this.inHole[0]+20,this.inHole[1]-100,150); this.displayNumber(); game.displayFormula(); }else{ game.cc.drawImage(image,n % 10 * 220,parseInt(n / 10) * 150,this.inHole[1]-41-n,150); game.cc.drawImage(game.images.hole1,this.inHole[0],this.inHole[1],game.images.hole1.wIDth,game.images.hole1.height); } n++; }; this.dismiss = function(i){ if(i != undefined){ n = i; } if(n < 60){ game.cc.drawImage(image,this.inHole[1]-100+n,game.images.hole1.height); } n++; }; this.deth = function(i){ if(i != undefined){ n = i; } if(n < 24){ game.cc.drawImage(image,(parseInt(n / 10) + 6) * 150,150); }else{ game.cc.drawImage(image,660,1200,150); } this.displayNumber(); n++; }; this.goInToHole = function(i){ if(i != undefined){ n = i; } if(n < 60){ game.cc.drawImage(image,this.inHole[0]+138-n*2,game.images.hole1.height); }else if(n < 120){ game.cc.drawImage(image,(n - 60) % 10 * 220,parseInt((n - 60) / 10) * 150,this.inHole[1]-160 + n,game.images.hole1.height); } n++; }; }; var nu = 0; var b = function(){ game.drawBackground(); game.bigCrab.displayMotion(game.state); game.bigCrab.displayBlood(); game.displaylife(); if(nu == 0){ var nn = parseInt(Math.random()*4+2); game.crabsToShow = [0]; for(var i = 0; i < nn; i++){ var n = (nn + i * 2) % 3 + 1; var str = game.crabsToShow.join(); if(str.indexOf(n) == -1){ game.crabsToShow.push(n); } } var e = game.crabs[game.crabsToShow[1]].inHole; game.crabs[game.crabsToShow[1]].inHole = game.crabs[game.crabsToShow[0]].inHole; game.crabs[game.crabsToShow[0]].inHole = e; game.crabs[game.crabsToShow[0]].display(0); for(var i = game.crabsToShow.length - 1; i > 0; i--){ game.crabs[game.crabsToShow[i]].number = parseInt(Math.random()*99+1); game.crabs[game.crabsToShow[i]].display(0); } }else if(nu < 70){ for(var i in game.crabsToShow){ game.crabs[game.crabsToShow[i]].display(); } }else if(nu == 70){ game.canvas.onclick = function(e){ var t = game.checkClick(e.offsetX,e.offsetY); switch(t){ case 0: //打中 game.state = 1; game.crabs[0].deth(0); game.musics.music2.play(); game.bigCrab.blood -= 10; if(game.bigCrab.blood == 0){ game.state = 3; nu = 179; game.musics.music3.play(); alert('胜利'); break; } nu = 70; console.log('打中'); break; case 1: //打错 game.life--; if(game.life == 0){ game.musics.music4.play(); alert('失败'); game.state = 3; }else{ game.state = 2; game.musics.music1.play(); } console.log('打错'); //game.crabs[0].happy(0); nu = 70; break; default: //其他情况 game.state = 0; break; } }; game.canvas.onmousedown=function(){ game.hammer.state = 1; }; game.canvas.onmouseup=function(){ game.hammer.state = 0; }; if(game.state == 1){ game.crabs[0].deth(); }else{ game.crabs[0].display(); } for(var i = game.crabsToShow.length-1; i > 0; i--){ game.crabs[game.crabsToShow[i]].display(); } }else if(nu > 70 && nu < 150){ if(game.state == 1){ game.crabs[0].deth(); }else{ game.crabs[0].display(); } for(var i = game.crabsToShow.length-1; i > 0; i--){ game.crabs[game.crabsToShow[i]].display(); } }else if(nu == 150){ if(game.state == 3){ game.canvas.onclick = null; return; } if(game.state == 1){ game.formula = game.createFormula(); game.crabs[0].number = game.formula[1]; } game.state = 0; game.canvas.onclick = null; for(var i in game.crabsToShow){ game.crabs[game.crabsToShow[i]].dismiss(0); } }else if(nu > 150 && nu < 210){ for(var i in game.crabsToShow){ game.crabs[game.crabsToShow[i]].dismiss(); } }else{ nu = -1; } game.hammer.display(); setTimeout(b,30); nu++; }; var a = function(){ game.drawBackground(); game.bigCrab.displayMotion(game.state); game.bigCrab.displayBlood(); game.displaylife(); for(var i in game.crabs){ game.crabs[i].goInToHole(); } if(nu < 180){ setTimeout(a,30); nu++; }else{ nu = 0; b(); } }; window.onload = function(){ game.init(); a(); game.canvas.onmousemove=function(e){ game.hammer.x = e.offsetX-100; game.hammer.y = e.offsetY-150; }; }; </script> </body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的HTML5 canvas 打螃蟹小游戏全部内容，希望文章能够帮你解决HTML5 canvas 打螃蟹小游戏所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）