HTML5游戏开发_前嗅大数据

HTML5游戏开发

时间: 2020-03-28来源：OSCHINA

前景提要

1.坦克
简介：在一个黑色地图上产生一个小坦克
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>html5坦克</h1> <canvas id="tankmap" width="400px" height="300px" style="background-color: black"></canvas> <script type="text/javascript"> var canvas1=document.getElementById("tankmap"); var herox = 80; var heroy = 80; var cxt = canvas1.getContext('2d'); cxt.fillStyle = "#BA9658"; cxt.fillRect(herox,heroy,5,30); cxt.fillRect(herox+17,heroy,5,30); cxt.fillRect(herox+6,heroy+5,10,20); cxt.fillStyle = "#FEF26E"; cxt.arc(herox+11,heroy+15,5,0,360,true); cxt.fill(); cxt.strokeStyle = "#FEF26E"; cxt.lineWidth = 1.5; cxt.beginPath(); cxt.moveTo(herox+11,heroy+15); cxt.lineTo(herox+11,heroy); cxt.closePath(); cxt.stroke(); </script> </body> </html>
截图

2.人物拼图游戏
简介：此游戏分三种难度，即低中高，是将一张分成多个部分的图片打乱顺序，然后将其拼成原来的样子。
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拼图游戏</title> <style>.picture{border: 1px solid black;} </style> </head> <body> <div id = "title"> <h2> 拼图游戏 </h2> </div> <div id = "slider"> <form> <label> 低 </label> <input type = "range" id = "scale" value = "4" min = "3" max = "5" step = "1"> <label> 高 </label> </form> <br> </div> <div id = "main" class = "main"> <canvas id = "puzzle" width ="480px"height="480px"></canvas> </div> <script src = "js/sliding.js"></script> </body> </html>
js代码 var context = document.getElementById('puzzle').getContext('2d'); var img = new Image (); img.src = 'defa.jpg'; img.addEventListener('load',drawTiles,false); var boardSize = document.getElementById('puzzle').width; var tileCount = document.getElementById('scale').value; var tileSize = boardSize/tileCount; var clickLoc = new Object; clickLoc.x = 0; clickLoc.y = 0; var emptyLoc = new Object; emptyLoc. x = 0; emptyLoc. y = 0; var solved = false; var boardParts = new Object; setBoard (); document.getElementById('scale').onchange = function(){ tileCount = this.value; tileSize = boardSize/tileCount; setBoard(); drawTiles(); }; document.getElementById('puzzle').onmousemove = function(e){ clickLoc.x = Math.floor((e.pageX - this.offsetLeft)/tileSize); clickLoc.y = Math.floor((e.pageY - this.offsetTop)/tileSize); }; document.getElementById('puzzle').onclick = function(){ if(distance(clickLoc.x,clickLoc.y,emptyLoc.x,emptyLoc.y)== 1){ slideTile(emptyLoc,clickLoc); drawTiles(); } if(solved){ setTimeout(function(){alert( "You solved it!");},500); } }; function setBoard(){ boardParts = new Array(tileCount); for(var i = 0;i < tileCount;++ i){ boardParts[i] = new Array(tileCount); for(var j = 0;j < tileCount; ++ j){ boardParts[ i ][ j ]= new Object ; boardParts[ i ][ j ].x =(tileCount - 1 )- i; boardParts[ i ][ j ].y =(tileCount - 1 )- j; } } emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x; emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y; solved = false; } function drawTiles(){ context.clearRect (0,0,boardSize,boardSize); for(var i = 0;i < tileCount;++ i){ for (var j = 0;j < tileCount;++ j){ var x = boardParts[ i ][ j ].x; var y = boardParts[ i ][ j ].y; if (i != emptyLoc.x || j != emptyLoc.y || solved == true ){ context.drawImage(img,x * tileSize,y * tileSize,tileSize,tileSize, i * tileSize,j * tileSize,tileSize,tileSize); } } } } function distance (x1 , y1 , x2 , y2){ return Math.abs(x1 - x2)+ Math.abs(y1 - y2); } function slideTile(toLoc ,fromLoc){ if(! solved ){ boardParts[toLoc.x][toLoc.y].x = boardParts[ fromLoc.x][fromLoc.y].x; boardParts[toLoc.x][toLoc.y].y = boardParts[ fromLoc.x][fromLoc.y].y; boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1; boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1; toLoc.x = fromLoc.x; toLoc.y = fromLoc.y; checkSolved(); } } function checkSolved(){ var flag = true; for(var i = 0 ;i < tileCount;++ i){ for(var j = 0;j < tileCount;++ j){ if(boardParts[ i ][ j ].x != i || boardParts[ i ][ j ].y != j){ flag = false; } } } solved = flag; }
截图

3.雷电飞机设计游戏
简介：玩家飞机上下左右键控制自己飞机的移动，空格键发射炮弹，每击中敌机一架获得20分，若被敌机撞到则游戏结束。
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>飞机大战2020-03-21</title> </head> <body> <canvas id="myCanvas" width="320" height="480" style="border: solid;">你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。</canvas> <div id="message_txt" style="display: block;">飞机大战</div> <div id="score_txt" style="display: block;">分数：0分</div> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); document.addEventListener("keydown",onkeydown); var Plan=function(image,x,y,n){ this.image=image; this.x=x; this.y=y; this.originX=x; this.originY=y; this.width=image.width/n; this.height=image.height; this.isCaught=false; this.frm=0; this.dis=0; this.n=n; }; Plan.prototype.getCaught=function(bool){ this.isCaught=bool; if(bool==false){ this.originX=0; this.originY=this.y; } }; Plan.prototype.testPoint=function(x,y){ var betweenX=(x>=this.x)&&(x<=this.x+this.width); var betweenY=(y>=this.y)&&(y<=this.y+this.height); return betweenX && betweenY; }; Plan.prototype.move=function(dx,dy){ this.x +=dx; this.y +=dy; }; Plan.prototype.Y=function(){ return this.y; }; //不断下移的画飞机 Plan.prototype.draw=function(ctx){ ctx.save(); ctx.translate(this.x,this.y); ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height); ctx.restore(); this.y++; this.x=this.originX+20*Math.sin(Math.PI/100*this.y); this.dis++; if(this.dis>=3){//3帧换图 this.dis=0; this.frm++; if(this.frm>=this.n) this.frm=0; } }; //原地不动画飞机 Plan.prototype.draw2=function(ctx){ ctx.save(); ctx.translate(this.x,this.y); ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height); ctx.restore(); this.dis++; if(this.dis>=3){//3帧换图 this.dis=0; this.frm++; if(this.frm>=this.n) this.frm=0; } }; //飞机碰撞检测 //将所有子弹对象的矩形区域与敌机对象的矩形区域逐一检测，如果重叠说明子弹与敌机的碰撞。 Plan.prototype.hitTestObject=function(planobj){ if(isColliding(this.x,this.y,this.width,this.height,planobj.x,planobj.y,planobj.width,planobj.height)) //发生碰撞 return true; else return false; } function isColliding(ax,ay,aw,ah,bx,by,bw,bh) { if(ay>by+bh || by>ay+ah || ax>bx+bw || bx>ax+aw) return false; else return true; } //子弹类 var Bullet=function(image,x,y){ this.image=image; this.x=x; this.y=y; this.originX=x; this.originY=y; this.width=image.width/4; this.height=image.height; this.isCaught=false; this.frm=0; this.dis=0; }; Bullet.prototype.testPoint=function(x,y){ var betweenX=(x>=this.x)&&(x<=this.x+this.width); var betweenY=(y>=this.y)&&(y<=this.y+this.height); return betweenX && betweenY; }; Bullet.prototype.move=function(dx,dy){ this.x +=dx; this.y +=dy; }; Bullet.prototype.Y=function(){ return this.y; }; Bullet.prototype.draw=function(ctx){ ctx.save(); ctx.translate(this.x,this.y); ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height); ctx.restore(); this.y--; this.dis++; if(this.dis>=10){//10帧换图 this.dis=0; this.frm++; if(this.frm>=4) this.frm=0; } }; Bullet.prototype.hitTestObject=function(planobj){ if(isColliding(this.x,this.y,this.width,this.height,planobj.x,planobj.y,planobj.width,planobj.height)) //发生碰撞 return true; else return false; } //爆炸动画 var Bomb=function(image,x,y){ this.image=image; this.x=x; this.y=y; this.width=image.width/6; this.height=image.height; this.frm=0; this.dis=0; }; Bomb.prototype.draw2=function(ctx){ ctx.save(); ctx.translate(this.x,this.y); if(this.frm>=6) return; ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height); ctx.restore(); this.dis++; if(this.dis>=10){//10帧换图 this.dis=0; this.frm++; } }; var plan1,plan2,plan3,plan4,caughtplan=null; var isClicked=false; var mouseX,mouseY,preX,preY; var plans=[]; var bullets=[]; var bombs=[]; var score=0; var overflag=false;//游戏是否结束，true为结束 var myplane;//乙方飞机 var image=new Image(); var image2=new Image(); var image3=new Image(); var image4=new Image(); var image5=new Image(); var background=new Image(); background.src="img/map_0.png"; image.src="img/plan.png";//自己飞机图片 image.onload=function(){ }; image2.src="img/bomb.png";//爆炸图片 image2.onload=function(){ }; image3.src="img/enemy.png";//敌机图片 image3.onload=function(){ myplane=new Plan(image,300*Math.random(),400,6); plan_interval=setInterval(function(){ plans.push(new Plan(image3,300*Math.random(),20*Math.random(),2)); },3000);//3秒产生1架飞机 setInterval(function(){ context.clearRect(0,0,320,480); context.drawImage(background,0,0); //画自己方飞机 if(!overflag)//游戏没有结束 myplane.draw2(context);//原地不动 //画敌人飞机 for(var i=plans.length-1;i>=0;i--){ if(plans[i].Y()>400) plans.splice(i,1); else plans[i].draw(context); } //画子弹 for(var i=bullets.length-1;i>=0;i--){ if(bullets[i].Y()<100) bullets.splice(i,1);//删除子弹 else bullets[i].draw(context); } //碰撞检测 //判断敌机碰到玩家自己飞机 for(var i=plans.length-1;i>=0;i--){ e1=plans[i]; if(e1!=null && myplane!=null && myplane.hitTestObject(e1)) { clearInterval(plan_interval);//清除定时器，不在产生敌机 plans.splice(i,1);//删除敌机 bombs.push(new Bomb(image2,myplane.x,myplane.y)); message_txt.innerHTML="敌机碰到玩家自己飞机，游戏结束"; overflag=true; } } //判断子弹碰到敌机 for(var j=bullets.length-1;j>=0;j--){ var b1=bullets[j]; for(var i=plans.length-1;i>=0;i--){ e1=plans[i]; if(e1!=null && b1!=null && b1.hitTestObject(e1))//击中敌机 { plans.splice(i,1);//删除敌机 bullets.splice(i,1);//删除此颗子弹 bombs.push(new Bomb(image2,b1.x,b1.y-36)); message_txt.innerHTML="敌机被击中，加20分"; score+=20; score_txt.innerHTML="分数："+score+"分"; } } } //画炸弹 for(var i=bombs.length-1;i>=0;i--){ if(bombs[i].frm>=6) bombs.splice(i,1);//删除子弹 else bombs[i].draw2(context); } },1000/60); }; image4.src="img/bullet.png";//子弹图片 image4.onload=function(){ }; function onkeydown(e){ if(e.keyCode==32){//空格 //发射子弹 bullets.push(new Bullet(image4,myplane.x,myplane.y-36)); }else if(e.keyCode==37){//向左 myplane.move(-10,0); }else if(e.keyCode==39){//向右 myplane.move(10,0); }else if(e.keyCode==38){//向上 myplane.move(0,-10); }else if(e.keyCode==40){//向下 myplane.move(0,10); } } </script> </body> </html>
截图

4.FlappyBird游戏
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flappy Bird</title> </head> <body> <canvas id="canvas" width="340" height="453" style="border: 2px solid #000;background: #fff;"></canvas> <script src="bird.js" stype="text/javascript"> var canvas=document.getElementById("canvas"); var c=canvas.getContext("2d"); //三个类，Bird类，Obstacle类，FlappyBird类（游戏主函数） function Bird(x,y,image){ this.x=x; this.y=y; this.width=image.width/2, this.height=image.height, this.image=image; this.draw=function(context,state){ if(state==="up") context.drawImage(image,0,0,this.width,this.height,this.x,this.y,this.width,this.height); else{ context.drawImage(image,this.width,0,this.width,this.height,this.x,this.y,this.width,this.height); } } }; function Obstacle(x,y,h,image){ this.x=x; this.y=y; this.width=image.width/2, this.height=h, this.flypast=false;//没被飞过 this.draw=function(context,state){ if(state==="up"){ context.drawImage(image,0,0,this.width,this.height,this.x,this.y,this.width,this.height); }else{ context.drawImage(image,this.width,image.height-this.height,this.width,this.height,this.x,this.y,this.width,this.height); } } }; //FlappyBird类包括了游戏主要参数即运行需要的函数。 function FlappyBird(){} FlappyBird.prototype={ bird:null, bg:null, obs:null, obsList:[], mapWidth:340, mapHeight:453, startX:90, startY:225, obsDistance:150, obsSpeed:2, obsInterval:2000, upSpeed:8, downSpeed:3, line:56, score:0, touch:false, gameOver:false, CreateMap:function(){ //背景 this.bg=new Image(); this.bg.src="img/bg.png"; var startBg=new Image(); startBg.src="img/start.jpg"; //由于Image异步加载，在加载完成时在绘制图像 startBg.onload=function(){ c.drawImage(startBg,0,0); }; //小鸟 var image=new Image(); image.src="img/bird.jpg"; image.onload=function(){ this.bird=new Bird(this.startX,this.startY,image); //this.bird.draw(c,"down") }.bind(this); //障碍物 this.obs=new Image(); this.obs.src="img/obs.jpg"; this.obs.onload=function(){ var h=100;//默认第一障碍物上管道高度为100 var h2=this.mapHeight-h-this.obsDistance; var obs1=new Obstacle(this.mapWidth,0,h,this.obs); var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs); this.obsList.push(obs1); this.obsList.push(obs2); }.bind(this); }, CreateObs:function(){ //随机产生障碍物上边管道高度 var h=Math.floor(Math.random()*(this.mapHeight-this.obsDistance-this.line)); var h2=this.mapHeight-h-this.obsDistance; var obs1=new Obstacle(this.mapWidth,0,h,this.obs); var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs); this.obsList.push(obs1); this.obsList.push(obs2); //移除越界障碍物 if(this.obsList[0].x<-this.obsList[0].width) this.obsList.splice(0,2); }, DrawObs:function(){ c.fillStyle="#00ff00"; for(var i=0;i<this.obsList.length;i++){ this.obsList[i].x-=this.obsSpeed; if(i%2) this.obsList[i].draw(c,"up"); else this.obsList[i].draw(c,"down"); } }, CountScore:function(){//计分 if(this.obsList[0].x+this.obsList[0].width<this.startX && this.obsList[0].flypast==false){ //小鸟坐标超过障碍物 this.score+=1; this.obsList[0].flypast=true; } }, ShowScore:function(){ //显示分数 c.strokeStyle="#000"; c.lineWidth=1; c.fillStyle="#fff" c.fillText(this.score,10,50); c.strokeText(this.score,10,50); }, CanMove:function(){ //碰撞检测 if(this.bird.y<0 || this.bird.y>this.mapHeight-this.bird.height-this.line){ this.gameOver=true; }else{ var boundary=[{ x:this.bird.x, y:this.bird.y },{ x:this.bird.x+this.bird.width, y:this.bird.y },{ x:this.bird.x, y:this.bird.y+this.bird.height },{ x:this.bird.x+this.bird.width, y:this.bird.y+this.bird.height }]; for(var i=0;i<this.obsList.length;i++){ for(var j=0;j<4;j++) if(boundary[j].x>=this.obsList[i].x && boundary[j].x<=this.obsList[i].x+this.obsList[i].width && boundary[j].y>=this.obsList[i].y && boundary[j].y<=this.obsList[i].y+this.obsList[i].height) { this.gameOver=true; break; } if(this.gameOver) break; } } }, CheckTouch:function () {//检测触碰 if (this.touch) { this.bird.y-=this.upSpeed; this.bird.draw(c,"up"); } else{ this.bird.y+=this.downSpeed; this.bird.draw(c,"down"); } }, ClearScreen:function () {//清屏 c.drawImage(this.bg,0,0); }, ShowOver:function () { var overImg=new Image(); overImg.src="img/over.jpg"; overImg.onload=function(){ c.drawImage(overImg,(this.mapWidth-overImg.width)/2,(this.mapHeight-overImg.height)/2-50); }.bind(this); return; } }; var game=new FlappyBird(); var Speed=20; var IsPlay=false; var GameTime=null; var btn_start; window.onload=InitGame; function InitGame(){ c.font="3em 微软雅黑"; game.CreateMap(); canvas.onmousedown=function(){ game.touch=true; } canvas.onmouseup=function(){ game.touch=false; } canvas.onclick=function(){ if(!Isplay){ Isplay=true; GameTime=RunGame(Speed); } } } //游戏运行函数 function RunGame(speed){ var updateTimer=setInterval(function(){ //若小鸟通过第一个障碍物启动计分器 game.CanMove(); if(game.gameOver){ game.ShowOver(); clearInterval(updateTimer); return; } game.ClearScreen(); game.DrawObs(); game.CheckTouch(); game.CountScore(); game.ShowScore(); },speed); var obsTimer=setInterval(function(){ if(game.gameOver){ clearInterval(obsTimer); return; } game.CreateObs(); },game.obsInterval); } </script> </body> </html>
截图