一个简单的canvas射击小游戏
生活随笔
收集整理的這篇文章主要介紹了
一个简单的canvas射击小游戏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
本人初學前端技術，在HTML5的背景下，逐漸感受到前端技術的越來越強大與完善。web開發者已經不再是簡簡單單的制作網頁name簡單了。
近日看見網絡上許多H5小游戲，非常感興趣，于是臨時抱佛腳，學習了有關canvas的知識，制作了一個小游戲。
大家保存圖片，復制代碼就可以用了。
?
<!DOCTYPE html> <html> <head><title>飛機</title><meta charset="utf-8"> </head> <style type="text/css">*{margin:0;padding:0;}body,html{width:100%;height:100%;}#canvas{position: absolute;top:0;left:0;background-image: url(./img/bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;} </style> <body><canvas id="canvas">您的瀏覽器不支持canvas！！！</canvas><script type="text/javascript" src="./libs/background.js"></script><script type="text/javascript">var canvas = document.getElementById("canvas");var mainImg = new Image();var shellImg = new Image();var monster1Img = new Image();var boomImg = new Image(); var gameover = new Image();var lifeborderImg = new Image();var lifeImg = new Image();var logoImg = new Image();var addLifeImg = new Image();var windowWidth = document.body.clientWidth;var windowHeight = document.body.clientHeight;var ctx = canvas.getContext("2d");var fen = 0;var monsterNumber = 1;var Boom = false;var monsterspeed = 1;var run = false;var def = 0;var readyShow = true;var shellsizeX=20;var shellsizeY=50;var random = 0;var randomadd = 0;mainImg.src = "./img/main.png";shellImg.src = "./img/shell.png";monster1Img.src = "./img/monster.png";boomImg.src = "./img/boom.png";gameover.src = "./img/over.png";lifeborderImg.src = "./img/lifeborder.png";lifeImg.src = "./img/life.png";logoImg.src = "./img/LOGO.png";addLifeImg.src = "./img/addlife.png";if("ontouchstart" in window){startEvt = "touchstart";moveEvt = "touchmove";endEvt = "touchend";}else{startEvt = "mousedown";moveEvt = "mousemove";endEvt = "mouseup";}document.body.addEventListener('touchmove', function (e) {e.preventDefault(); //阻止默認的處理方式(阻止下拉滑動的效果)}, {passive: false});var mouse={x:0,y:0}canvas.addEventListener(moveEvt,(evt)=>{console.log(evt);mouse.x = evt.x;mouse.y = evt.y;if(evt.type == "touchmove"){mouse.x = evt.touches[0].clientX;mouse.y = evt.touches[0].clientY;}else{mouse.x = evt.x;mouse.y = evt.y;}if(game.main.show == true){game.main.x = mouse.x;game.main.y = mouse.y;}})var ready = {x:0,y:0,sizeX:windowWidth*0.25,sizeY:windowWidth*0.3,show:true,draw:function(){this.x = windowWidth*0.375;this.y = windowHeight-windowWidth*0.3;this.y = this.y*0.5;ctx.drawImage(logoImg,this.x,this.y,this.sizeX,this.sizeY);ctx.font = 'bold '+windowWidth*0.011+'px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'bottom';ctx.setFillStyle = '#fff';ctx.strokeText("點擊任意位置開始游戲", windowWidth*0.5, windowHeight*0.2);// ctx.fillText("點擊任意位置開始", windowWidth*0.5, windowHeight*0.85);canvas.addEventListener("mousedown",gamestart.bind(this));function gamestart(){if(run == false&&GAMEOVER.show == false){run = true;this.show = false;game.main.show = true;}}}}var GAMEOVER = {x:0,y:0,show:false,sizeX:windowWidth,sizeY:windowHeight,draw:function(){ctx.drawImage(gameover,this.x,this.y,this.sizeX,this.sizeY);ctx.font = 'bold '+windowWidth*0.1+'px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'bottom';ctx.fillStyle = '#f33';ctx.strokeText("GAME OVER", windowWidth*0.5, windowHeight*0.5);ctx.fillText("GAME OVER", windowWidth*0.5, windowHeight*0.5); }}var addFen = {x:0,y:0,sx:180,sy:160,sx1:0,sy1:160,draw:function(){if(Boom){this.sx1+=4;}if(this.sx1>=10&&this.sx1<200){ctx.drawImage(boomImg,10,600,180,160,this.x,this.y,50,50);}else if(this.sx1>=200&&this.sx1<400){ctx.drawImage(boomImg,200,600,180,160,this.x,this.y,50,50);}else if(this.sx1>=400&&this.sx1<600){ctx.drawImage(boomImg,400,650,180,160,this.x,this.y,50,50);}else if(this.sx1>=600&&this.sx1<805){ctx.drawImage(boomImg,400,700,180,160,this.x,this.y,50,50);}else if(this.sx1>=805){Boom = false;this.sx1=0;return};}}var game = {main:{x:1/2*windowWidth,y:1/2*windowHeight,sizeX:50,sizeY:50,life:100,nowlife:1,draw:function(){this.nowlife = this.life/100;ctx.drawImage(mainImg,this.x-1/2*this.sizeX,this.y-1/2*this.sizeY,this.sizeX,this.sizeY);//主角飛機視圖ctx.drawImage(lifeborderImg,windowWidth-0.3*windowWidth,0.02*windowHeight,0.14*windowWidth,windowHeight*0.035);//血條框視圖ctx.drawImage(lifeImg,0,0,207*this.nowlife,42,windowWidth-0.3*windowWidth,0.02*windowHeight,0.14*windowWidth*this.nowlife,windowHeight*0.035);//血條視圖ctx.font = 'bold '+windowWidth*0.1+'px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'bottom';ctx.fillStyle = '#f33';ctx.strokeText(monsterNumber, windowWidth*0.5, windowHeight*0.5);ctx.fillText(monsterNumber, windowWidth*0.5, windowHeight*0.5);}},shell1:{x:0,y:0,sizeX:shellsizeX,sizeY:shellsizeY,speed:-4,show:true,HZ:0,time:true,draw:function(){ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);},move:function(){this.y = this.y+this.speed;if(this.y<=1){game.shell1.HZ = 0;this.show = false;this.time = true;this.x = this.x = game.main.x - 1/4*this.sizeX;this.y = game.main.y - 3/2*game.main.sizeY;return}}},shell2:{x:0,y:0,sizeX:shellsizeX,sizeY:shellsizeY,speed:-4,show:true,HZ:0,time:true,draw:function(){ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);},move:function(){this.y = this.y+this.speed;if(this.y<=1){game.shell1.HZ = 0;this.show = false;this.time = true;this.x = this.x = game.main.x - 1/4*this.sizeX;this.y = game.main.y - 3/2*game.main.sizeY;return}}},shell3:{x:0,y:0,sizeX:shellsizeX,sizeY:shellsizeY,speed:-5,show:true,HZ:0,time:true,draw:function(){ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);},move:function(){this.y = this.y+this.speed;if(this.y<=1){game.shell1.HZ = 0;this.show = false;this.time = true;this.x = this.x = game.main.x - 1/4*this.sizeX;this.y = game.main.y - 3/2*game.main.sizeY;return}}},monster1:{//怪物1開始x:-100,y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.5,speedY:0.5,draw:function(){if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);},boom:function(){//怪物1撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//monster1與主角碰撞檢測數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//monster1與子彈一擊中檢測數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//monster1與子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//monster1與子彈三碰撞數據if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster1與玩家撞上檢測game.main.life-=1;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster1與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster1與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4){//monster1與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},monster2:{x:windowWidth,y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.5,speedY:0.5,life:2,draw:function(){ if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);},boom:function(){//怪物2撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//主角碰撞數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//子彈一碰撞數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//子彈三碰撞數據if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2與玩家撞上檢測game.main.life-=1;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster2與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;return}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster1與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},monster3:{//怪物3開始x:windowWidth*0.5,y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.5,speedY:0.5,draw:function(){if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);},boom:function(){//怪物3撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//monster3與主角碰撞檢測數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//monster3與子彈一擊中檢測數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//monster3與子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//monster3與子彈三碰撞數據if(nearMX<=50&&nearMY<=50){//monster3與玩家撞上檢測game.main.life-=1;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster3與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster3與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4){//monster3與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},monster4:{//monster4開始x:windowWidth,y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.7,speedY:0.7,life:5.5,draw:function(){ if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*2,this.sizeY*2);},boom:function(){//怪物2撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//主角碰撞數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//子彈一碰撞數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//子彈三碰撞數據if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2與玩家撞上檢測game.main.life-=1.5;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster2與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;return}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster1與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},//monster5monster5:{x:windowWidth*Math.random(),y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.6,speedY:0.6,life:2,draw:function(){ if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*0.7,this.sizeY*0.7);},boom:function(){//怪物2撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//主角碰撞數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//子彈一碰撞數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//子彈三碰撞數據if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2與玩家撞上檢測game.main.life-=1;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster2與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;return}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster1與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},//monster6monster6:{x:windowWidth*0.5*Math.random(),y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.6,speedY:0.6,life:10,draw:function(){ if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*2.3,this.sizeY*2.3);},boom:function(){//怪物2撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//主角碰撞數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//子彈一碰撞數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//子彈三碰撞數據if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2與玩家撞上檢測game.main.life-=6;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//monster2與子彈一撞上檢測開始game.shell1.HZ = 0;game.shell1.show = false;game.shell1.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;return}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//monster1與子彈二撞上檢測開始game.shell2.HZ = 0;game.shell2.show = false;game.shell2.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1與子彈三撞上檢測開始game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.life = this.life-1;//怪物減血速率1if(this.life<=0){//當血量小于零以后進行的操作this.y = -50;this.speedX = 0-this.speedX;monsterNumber+=1;//分數加一this.life = 3;}setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},addlifemonster1:{//addlifemonster1開始x:windowWidth*0.5,y:-50,sizeX:45,sizeY:45,speed:10,Random:1,speedX:0.5,speedY:0.5,show:false,draw:function(){if(this.y>windowHeight-50){this.speedY = Math.random()*monsterspeed;this.speedY = 0-this.speedY;}else if(this.y<=0){this.speedY = Math.random()*monsterspeed;this.speedY = Math.abs(this.speedY);}if(this.x<=0){this.speedX = Math.random()*monsterspeed;this.speedX = Math.abs(this.speedX);}else if(this.x>windowWidth-50){this.speedX = Math.random()*monsterspeed;this.speedX = 0-this.speedX;}this.x+=this.speedX;this.y+=this.speedY;ctx.drawImage(addLifeImg,this.x,this.y,this.sizeX,this.sizeY);},boom:function(){//addlifemonster1撞擊檢測var nearMX = this.x - game.main.x;var nearMY = this.y + this.sizeY - game.main.y;nearMX = Math.abs(nearMX);nearMY = Math.abs(nearMY);//addlifemonster1與主角碰撞檢測數據var nearshell1X = this.x - game.shell1.x;var nearshell1Y = this.y +this.sizeY - game.shell1.y;nearshell1X = Math.abs(nearshell1X);nearshell1Y = Math.abs(nearshell1Y);//addlifemonster1與子彈一擊中檢測數據var nearshell2X = this.x - game.shell2.x;var nearshell2Y = this.y +this.sizeY - game.shell2.y;nearshell2X = Math.abs(nearshell2X);nearshell2Y = Math.abs(nearshell2Y);//addlifemonster1與子彈二碰撞數據var nearshell3X = this.x - game.shell3.x;var nearshell3Y = this.y +this.sizeY - game.shell3.y;nearshell3X = Math.abs(nearshell3X);nearshell3Y = Math.abs(nearshell3Y);//addlifemonster1與子彈三碰撞數據if(nearMX<=50&&nearMY<=50){//addlifemonster1與玩家撞上檢測game.main.life-=0.1;//玩家生命之減少速率為1if(game.main.life<=0){run=false;GAMEOVER.show = true;}}if(nearshell1X<=50&&nearshell1Y<=4){//addlifemonster1與子彈一撞上檢測開始randomadd = 0;game.shell1.HZ = 0;game.main.life+=1;game.shell1.show = false;game.shell1.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子彈重定位game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell1.x;var b = game.shell1.y;addFen.x = a;addFen.y = b-50;this.show = false;}//與子彈一撞上檢測結束if(nearshell2X<=50&&nearshell2Y<=4){//addlifemonster1與子彈二撞上檢測開始randomadd = 0;game.shell2.HZ = 0;game.main.life+=1;game.shell2.show = false;game.shell2.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子彈重定位game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell2.x;var b = game.shell2.y;addFen.x = a;addFen.y = b-50;this.show = false;}//與子彈二撞上檢測結束if(nearshell3X<=50&&nearshell3Y<=4){//addlifemonster1與子彈三撞上檢測開始randomadd = 0;this.show = false;game.main.life+=1;game.shell3.HZ = 0;game.shell3.show = false;game.shell3.time = true;this.y = -50;this.speedX = 0-this.speedX;setTimeout(function(){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子彈重定位game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子彈重定位},1)monsterNumber+=1;//分數加一Boom = true;var a = game.shell3.x;var b = game.shell3.y;addFen.x = a;addFen.y = b-50;}//與子彈三撞上檢測結束}},init:function(){setInterval(()=>{randomadd+=0.1;console.log(random);if(randomadd >= 100){random= Math.random()*10;random = Math.floor(random);randomadd = 0;console.log(random);}ctx.clearRect(0,0,windowWidth,windowHeight);if(random >= 8&&game.main.nowlife<1){game.addlifemonster1.show = true;}if(game.addlifemonster1.show == true){game.addlifemonster1.draw();game.addlifemonster1.boom();game.monster6.draw();game.monster6.boom();}game.monster1.draw();//第一個怪物加載函數game.monster1.boom();//第一個怪物運動函數if(ready.show == true){ready.draw();}if(run == true){game.main.draw();//主角加載//子彈一部分開始if(game.shell1.time == true){game.shell1.HZ+=1; }//子彈一發射計時器if(game.shell1.HZ == 100){game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;game.shell1.y = game.main.y - 1/4*game.shell1.sizeY;game.shell1.show = true;return}//子彈一重定位if(game.shell1.show){game.shell1.draw();game.shell1.move();}//控制子彈一消失與出現的條件//子彈一部分結束if(monsterNumber>=2){game.monster2.draw();game.monster2.boom();}//怪物2出場時刻if(monsterNumber>=10){game.monster3.draw();game.monster3.boom();}//怪物3出場時刻if(monsterNumber>=30){game.monster4.draw();game.monster4.boom();}//怪物4出場時刻if(monsterNumber>=40){game.monster5.draw();game.monster5.boom();}//怪物4出場時刻if(Boom==true){addFen.draw();}//子彈二部分開始if(monsterNumber>5){game.shell2.show = true;game.shell2.time=true; if(game.shell2.time == true){game.shell2.HZ = 100;game.shell2.HZ+=1; }//子彈二發射計時器if(game.shell2.HZ == 100){game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;game.shell2.y = game.main.y - 1/4*game.shell2.sizeY;game.shell2.show = true;}//子彈二重定位if(game.shell2.show){game.shell2.draw();game.shell2.move();}//控制子彈二消失與出現的條件}//子彈二部分結束//子彈三部分開始if(monsterNumber>6){game.shell3.show = true;game.shell3.HZ = 100;if(game.shell3.time == true){game.shell3.HZ+=1; }//子彈三發射計時器if(game.shell3.HZ == 100){game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;game.shell3.y = game.main.y - 1/4*game.shell3.sizeY;game.shell3.show = true;return}//子彈三重定位if(game.shell3.show){game.shell3.draw();game.shell3.move();}//控制子彈三消失與出現的條件}//子彈三部分結束if(monsterNumber>=8&&monsterNumber<15){monsterspeed=1.3;}else if(monsterNumber>=15&&monsterNumber<20){monsterspeed=1.5;}else if(monsterNumber>=20&&monsterNumber<25){monsterspeed = 1.6;}else if(monsterNumber>=25&&monsterNumber<30){monsterspeed = 1.8;}else if(monsterNumber>=30&&monsterNumber<40){monsterspeed = 1.9;}else if(monsterNumber>=5){monsterspeed = 1.95;}else if(monsterNumber>=6){monsterspeed = 2.2;}}else if(GAMEOVER.show == true){GAMEOVER.draw();}// game.shell2.draw();// game.shell2.move();// game.shell3.draw();// game.shell3.move();// game.shell4.draw();// game.shell4.move();// game.shell5.draw();// game.shell5.move();// game.shell6.draw();// game.shell6.move();// game.shell7.draw();// game.shell7.move();// game.shell8.draw();// game.shell8.move();ctx.strokeRect(this.x,this.y,this.sizeX,this.sizeY);},0);}}window.onload = function(){game.init();}</script></body> </html> (function(){var canvas = document.getElementById("canvas");var width = document.body.clientWidth;var height = document.body.clientHeight;canvas.width = width;canvas.height = height;//本塊代碼創建一個background.js文件 })()【下面是所需要的圖片，大家自行保存】
游戲文件目錄
總結
以上是生活随笔為你收集整理的一个简单的canvas射击小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 企业微信怎么用？企业微信怎么设置入群欢迎
- 下一篇： Emil发送