怎么用html5实现蘑菇与熊游戏
这篇文章主要讲解了“怎么用html5实现蘑菇与熊游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用html5实现蘑菇与熊游戏”吧！
一、添加开始按钮
A、html代码中加入开始按钮，并定位他于画布的中间
<img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">
B、全局变量
var gameRunning = false;//游戏运行状态 var gameloopId;//记住循环的变量
C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数
//开始或者暂停游戏 function ToggleGameplay() { gameRunning = !gameRunning; if(gameRunning) { $("#BtnImgStart").hide(); gameloopId = setInterval(GameLoop, 10); }else { clearInterval(gameloopId); } }
D、添加开始按钮事件
//事件处理 function AddEventHandlers() { //鼠标移动则蘑菇跟着移动 $("#container").mousemove(function(e){ mushroom.x = e.pageX - (mushroom.image.width/2); }); //开始按钮 $("#BtnImgStart").click(function (){ ToggleGameplay(); }); }
注意，要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉
二、添加生命数条
A、需要的全局变量
var lives=3;//3条生命数 var livesImages = new Array();//生命图片数组
B、生命图片初始化
//生命图片因为只有6个，所以最多只能6个 for(var x=0; x<6; x++) { livesImages[x] = new Image(); livesImages[x].src = "images/lives" + x + ".png"; }
C、绘制生命条
//描绘生命条 function DrawLives() { ctx.drawImage(livesImages[lives], 0, 0); }
D、当熊碰到底线时，减一条生命
//熊碰到下面边界 if(animal.y>screenHeight - animal.image.height) { lives -=1;//生命减1 //当还有生命条时，暂停游戏，熊回到中间位置，显出开始按钮 if(lives>0) { horizontalSpeed = speed; //初始化水平速度 verticalSpeed = -speed; //初始化垂直速度 animal.x = parseInt(screenWidth/2); //初始化熊的x坐标 animal.y = parseInt(screenHeight/2); //初始化熊的y坐标 $("#BtnImgStart").show(); //显示开始按钮 ToggleGameplay(); //暂停游戏 GameLoop(); //初始化绘图 } }
E、当生命条数等于0或者奖品消灭完，游戏结束
//结束游戏 function GameOver() { gameRunning = false; clearInterval(gameloopId); alert("游戏结束!"); }
在熊撞到底线的代码中，加入判断，当生命数=0时，游戏结束
if(lives<=0) GameOver();
在绘制奖品函数中加入判断，当奖品被消灭完时，游戏结束
//绘制奖品，把奖品显示在画布上 function DrawPrizes() { for(var x=0; x<prizes.length; x++) { currentPrize = prizes[x]; //假如没有被撞击，则描绘 if(!currentPrize.hit) { ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y); } } if(AllPrizesHit()) { GameOver(); } } //判断是否撞完奖品，假如其中有一个 function AllPrizesHit() { for(var c=0; c<prizes.length; c++) { checkPrize = prizes[c]; if(checkPrize.hit == false) return false; } return true; }
三、添加得分
A、定义全局变量
var score = 0;//分数 var scoreImg = new Image();//分数板
B、初始化分数板
scoreImg.src = "images/score.png";//分数板
C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分
function Prize() {}; Prize.prototype = new GameObject();//继承游戏对象GameObject Prize.prototype.row = 0;//奖品行位置 Prize.prototype.col = 0;//奖品列位置 Prize.prototype.hit = false;//是否被撞过 Prize.prototype.point = 0;//分数
D、在初始化奖品数组中加入分数
//创建奖品数组 function InitPrizes() { var count=0; //一共3行 for(var x=0; x<3; x++) { //一共23列 for(var y=0; y<23; y++) { prize = new Prize(); if(x==0) { prize.image = flowerImg;//鲜花放在***行 prize.point = 3;//鲜花3分 } if(x==1) { prize.image = acornImg;//豫子刚在第2行 prize.point = 2;//橡子2分 } if(x==2) { prize.image = leafImg;//叶子放在第3行 prize.point = 1;//叶子1分 } prize.row = x; prize.col = y; prize.x = 20 * prize.col + 10;//x轴位置 prize.y = 20 * prize.row + 40;//y轴位置 //装入奖品数组，用来描绘 prizes[count] = prize; count++; } } }
E、当熊撞到奖品时，根据碰撞奖品的分数增加总分
//撞到奖品 function HasAnimalHitPrize() { //取出所有奖品 for(var x=0; x<prizes.length; x++) { var prize = prizes[x]; //假如没有碰撞过 if(!prize.hit) { //判断碰撞 if(CheckIntersect(prize, animal, 0)) { prize.hit = true; //熊反弹下沉 verticalSpeed = speed; //总分增加 score += prize.point; } } } }
F、绘制分数
//描绘分数 function DrawScore() { ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板 ctx.font = "12pt Arial"; ctx.fillText("" + score, 425, 25); //得分 }
综合上面的代码， 到此第八回的完整代码如下：
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绘制奖品-html5中文网</title> <!-- 要记得引用jquery-1.4.2.js --> <script type="text/javascript" src="./js/jquery-1.4.2.js"></script> <script type="text/javascript" > //全局变量 var backgroundForestImg = new Image();//森林背景图 var mushroomImg = new Image();//蘑菇 var bearEyesClosedImg = new Image();//闭着眼睛的熊熊 var ctx;//2d画布 var screenWidth;//画布宽度 var screenHeight;//画布高度 var speed = 2;//不变常量,从新开始的速度 var horizontalSpeed = speed;//水平速度,随着熊的碰撞会发生改变 var verticalSpeed = -speed; //垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变 var bearAngle = 2;//熊旋转的速度 var flowerImg = new Image();//奖品鲜花 var leafImg = new Image();//奖品叶子 var acornImg = new Image();//奖品橡子 var gameRunning = false;//游戏运行状态 var gameloopId;//记住循环的变量 var lives=3;//3条生命数 var livesImages = new Array();//生命图片数组 var score = 0;//分数 var scoreImg = new Image();//分数板 //公用 定义一个游戏物体戏对象 function GameObject() { this.x = 0; this.y = 0; this.image = null; } //定义蘑菇Mushroom 继承游戏对象GameObject function Mushroom() {}; Mushroom.prototype = new GameObject();//游戏对象GameObject //蘑菇实例 var mushroom = new Mushroom(); //循环描绘物体 //定义动物熊 Animal 继承 游戏对象GameObject function Animal() {}; Animal.prototype = new GameObject();//游戏对象GameObject Animal.prototype.angle = 0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回） //定义熊实例 var animal = new Animal(); //定义奖品数组Prizes和对象Prize，继承游戏对象GameObject var prizes = new Array(); function Prize() {}; Prize.prototype = new GameObject();//继承游戏对象GameObject Prize.prototype.row = 0;//奖品行位置 Prize.prototype.col = 0;//奖品列位置 Prize.prototype.hit = false;//是否被撞过 Prize.prototype.point = 0;//分数 function GameLoop() { //清除屏幕 ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); //绘制背景 ctx.drawImage(backgroundForestImg, 0, 0); //绘制蘑菇 ctx.drawImage(mushroom.image, mushroom.x, mushroom.y); //绘制奖品 DrawPrizes(); //绘制生命条 DrawLives(); //绘制分数板 DrawScore(); //绘制熊 //改变移动动物X和Y位置 animal.x += horizontalSpeed; animal.y += verticalSpeed; //改变翻滚角度 animal.angle += bearAngle; //以当前熊的中心位置为基准 ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2)); //根据当前熊的角度轮换 ctx.rotate(animal.angle * Math.PI/180); //描绘熊 ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2)); ctx.restore(); //检测是否碰到边界 HasAnimalHitEdge(); //检测熊碰撞蘑菇 HasAnimalHitMushroom(); //检测熊碰撞奖品 HasAnimalHitPrize(); } //加载图片 function LoadImages() { mushroomImg.src = "images/mushroom.png";//蘑菇 backgroundForestImg.src = "images/forest1.jpg";//森林背景图 bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的 flowerImg.src = "images/flower.png";//奖品花 acornImg.src = "images/acorn.png";//奖品橡子 leafImg.src = "images/leaf.png";//奖品叶子 scoreImg.src = "images/score.png";//分数板 //生命图片因为只有6个，所以最多只能6个 for(var x=0; x<6; x++) { livesImages[x] = new Image(); livesImages[x].src = "images/lives" + x + ".png"; } mushroom.image = mushroomImg; animal.image = bearEyesClosedImg; backgroundForestImg.onload = function(){GameLoop(); }; } //熊碰撞边界 function HasAnimalHitEdge() { //熊碰到右边边界 if(animal.x>screenWidth - animal.image.width) { if(horizontalSpeed > 0)//假如向右移动 horizontalSpeed =-horizontalSpeed;//改变水平速度方向 } //熊碰到左边边界 if(animal.x<-10) { if(horizontalSpeed < 0)//假如向左移动 horizontalSpeed = -horizontalSpeed;//改变水平速度方向 } //熊碰到下面边界 if(animal.y>screenHeight - animal.image.height) { lives -=1;//生命减1 if(lives>0) { horizontalSpeed = speed; verticalSpeed = -speed; animal.x = parseInt(screenWidth/2); animal.y = parseInt(screenHeight/2); $("#BtnImgStart").show(); ToggleGameplay(); GameLoop(); } } //熊碰到上边边界 if(animal.y<0) { verticalSpeed = -verticalSpeed; } if(lives<=0) GameOver(); } //事件处理 function AddEventHandlers() { //鼠标移动则蘑菇跟着移动 $("#container").mousemove(function(e){ mushroom.x = e.pageX - (mushroom.image.width/2); }); //开始按钮 $("#BtnImgStart").click(function (){ ToggleGameplay(); }); } //检测2个物体是否碰撞 function CheckIntersect(object1, object2, overlap) { // x-轴 x-轴 // A1------>B1 C1 A2------>B2 C2 // +--------+ ^ +--------+ ^ // | object1| | y-轴 | object2| | y-轴 // | | | | | | // +--------+ D1 +--------+ D2 // //overlap是重叠的区域值 A1 = object1.x + overlap; B1 = object1.x + object1.image.width - overlap; C1 = object1.y + overlap; D1 = object1.y + object1.image.height - overlap; A2 = object2.x + overlap; B2 = object2.x + object2.image.width - overlap; C2 = object2.y + overlap; D2 = object2.y + object2.image.width - overlap; //假如他们在x-轴重叠 if(A1 > A2 && A1 < B2 || B1 > A2 && B1 < B2) { //判断y-轴重叠 if(C1 > C2 && C1 < D1 || D1 > C2 && D1 < D2) { //碰撞 return true; } } return false; } //动物碰撞蘑菇 function HasAnimalHitMushroom() { //假如碰撞 if(CheckIntersect(animal, mushroom, 5)) { //假如碰撞的位置属于蘑菇的左下位置 if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25)) { horizontalSpeed = -speed;//反弹 } //假如碰撞的位置属于蘑菇的左上位置 else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5)) { //反弹速度减半 horizontalSpeed = -speed/2; } //假如碰撞的位置属于蘑菇的右上位置 else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75)) { horizontalSpeed = speed/2; } else { horizontalSpeed = speed; } verticalSpeed = -speed;//改变垂直速度。也即动物向上移动 } } //创建奖品数组 function InitPrizes() { var count=0; //一共3行 for(var x=0; x<3; x++) { //一共23列 for(var y=0; y<23; y++) { prize = new Prize(); if(x==0) { prize.image = flowerImg;//鲜花放在***行 prize.point = 3;//3分 } if(x==1) { prize.image = acornImg;//豫子刚在第2行 prize.point = 2;//2分 } if(x==2) { prize.image = leafImg;//叶子放在第3行 prize.point = 1;//1分 } prize.row = x; prize.col = y; prize.x = 20 * prize.col + 10;//x轴位置 prize.y = 20 * prize.row + 40;//y轴位置 //装入奖品数组，用来描绘 prizes[count] = prize; count++; } } } //绘制奖品，把奖品显示在画布上 function DrawPrizes() { for(var x=0; x<prizes.length; x++) { currentPrize = prizes[x]; //假如没有被撞击，则描绘 if(!currentPrize.hit) { ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y); } } if(AllPrizesHit()) { GameOver(); } } //撞到奖品 function HasAnimalHitPrize() { //取出所有奖品 for(var x=0; x<prizes.length; x++) { var prize = prizes[x]; //假如没有碰撞过 if(!prize.hit) { //判断碰撞 if(CheckIntersect(prize, animal, 0)) { prize.hit = true; //熊反弹下沉 verticalSpeed = speed; //总分增加 score += prize.point; } } } } //判断是否撞完奖品，假如其中有一个 function AllPrizesHit() { for(var c=0; c<prizes.length; c++) { checkPrize = prizes[c]; if(checkPrize.hit == false) return false; } return true; } //开始或者暂停游戏 function ToggleGameplay() { gameRunning = !gameRunning; if(gameRunning) { $("#BtnImgStart").hide(); gameloopId = setInterval(GameLoop, 10); }else { clearInterval(gameloopId); } } //结束游戏 function GameOver() { gameRunning = false; clearInterval(gameloopId); alert("游戏结束!"); } //描绘生命条 function DrawLives() { ctx.drawImage(livesImages[lives], 0, 0); } //描绘分数 function DrawScore() { ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板 ctx.font = "12pt Arial"; ctx.fillText("" + score, 425, 25); //得分 } //初始化 $(window).ready(function(){ AddEventHandlers();//添加事件 LoadImages(); ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布 screenWidth = parseInt($("#canvas").attr("width")); //画布宽度 screenHeight = parseInt($("#canvas").attr("height")); //初始化蘑菇 mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标 mushroom.y = screenHeight - 40;//蘑菇Y坐标 //初始化熊 animal.x = parseInt(screenWidth/2); animal.y = parseInt(screenHeight/2); //初始化奖品 InitPrizes(); }); </script> </head> <body> <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;"> <canvas id="canvas" width="480" height="320" > 浏览器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">请下载</a>支持html5的浏览器来观看 </canvas> </div> <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png"> </body> </html>
感谢各位的阅读，以上就是“怎么用html5实现蘑菇与熊游戏”的内容了，经过本文的学习后，相信大家对怎么用html5实现蘑菇与熊游戏这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！