htm5 canvas制作小的撞击型游戏

来源：互联网发布：linux新建用户权限编辑：程序博客网时间：2024/04/30 20:15
今天在html5中国网上按照大师写的教程一步一步的做了一个“蘑菇与熊”的游戏，主要采用了html5中的canvas技术。参考网址为http://www.html5china.com/course/20110101_1498.html。
演示地址为：点击打开链接
所有的代码为：
<html><head><title>蘑菇与熊</title><script src="jquery-1.4.4.min.js"></script><script>// 定义全局变量var backgroundForestImg = new Image();var mushroomImg = new Image();var bearEyesClosedImg = new Image();var flowerImg = new Image();var leafImg = new Image();var acornImg = new Image();var ctx;var screenWidth;var screenHeight;var speed = 5;var horizonalSpeed = speed;var verticalSpeed = -speed;var bearAngle = 2;var gameRunning = false;var gameloopId;var lives =3;var liveImages = new Array();for(var x=0;x<5;x++){liveImages[x] = new Image();liveImages[x].src = "img/lives" + x + ".png";}var score = 0;var scoreImg = new Image();scoreImg.src = "img/score.png";function drawLives(){ctx.drawImage(liveImages[lives], 0, 0);}// 抽象出所有的游戏对象function gameObject(){this.x = 0;this.y =0;this.image = null;}// 定义蘑菇对象，继承gameObject的所有属性function Mushroom(){};Mushroom.prototype = new gameObject();var mushroom = new Mushroom();// 定义小熊对象，继承gameObject的所有属性function Animal(){};Animal.prototype = new gameObject();Animal.prototype.angle = 0;var animal = new Animal();// 定义奖品对象，继承gameObject的所有属性，并新增行、列、是否被击打、分数属性var prizes = new Array();function Prize(){};Prize.prototype = new gameObject();Prize.prototype.row = 0;Prize.prototype.col = 0;Prize.prototype.hit = false;Prize.prototype.point = 0;// 切换游戏进行和暂停function toggleGamePlay(){gameRunning = !gameRunning;if(gameRunning){$('#startBtn').hide();gameloopId = setInterval(gameLoop, 10);} else {clearInterval(gameloopId);}}// 游戏技术所调用的方法，包括失败和成功两种function gameOver(){gameRunning = false;clearInterval(gameloopId);alert("游戏结束");}// 判断是否所有的奖品都被击打function allPrizeHit(){for(var x=0; x<prizes.length; x++){if(prizes[x].hit==false){return false;}}return true;}// 判断小熊是否击中奖品，并对其作出反应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 initPrizes(){var count = 0;for(var x=0;x<3;x++){for(var y=0;y<23;y++){prize = new Prize();if(x==0){prize.image = flowerImg;prize.point =3;} else if(x==1){prize.image = acornImg;prize.point =2;} else if(x==2){prize.image = leafImg;prize.point =1;}prize.row = x;prize.col = y;prize.x = 20*prize.col + 10;prize.y = 30*prize.row + 40;prizes[count] = prize;count++;}}}// 绘制奖品function drawPrize(){for(var x=0;x<prizes.length;x++){currentPrize = prizes[x];if(!currentPrize.hit){ctx.drawImage(currentPrize.image, currentPrize.x, currentPrize.y);}}if(allPrizeHit()){gameOver();}}// 绘制分数function drawScore(){ctx.drawImage(scoreImg, screenWidth-scoreImg.width, 0);ctx.font = "12pt Arial";ctx.fillText("  " + score, 425, 25);}// 判断小熊是否撞到边界function hasAnimalHitEdge(){if(animal.x > screenWidth - animal.image.width){if(horizonalSpeed>0)horizonalSpeed = -speed;}if(animal.y < 0){verticalSpeed = speed;}if(animal.x < -10){if(horizonalSpeed < 0)horizonalSpeed = speed;}if(animal.y > screenWidth - animal.image.height){lives-=1;if(lives>0){horizonalSpeed = speed;verticalSpeed = -speed;animal.x = screenWidth/2;animal.y = screenHeight/2;$('#startBtn').show();toggleGamePlay();gameLoop();} else {gameOver(); }}}// 判断小熊是否撞到蘑菇，并对其作出反应function hasAnimalHitMushroom(){if(checkIntersect(animal, mushroom, 5)){if(animal.x+animal.image.width/2<mushroom.x+mushroom.image.width*0.25){horizonalSpeed = -speed;} else if(animal.x+animal.image.width/2<mushroom.x+mushroom.image.width*0.5){horizonalSpeed = -speed/2;} else if(animal.x+animal.image.width/2<mushroom.x+mushroom.image.width*0.75){horizonalSpeed = speed/2;} else{horizonalSpeed = speed;}verticalSpeed = -speed;}}// 判断两个物体是否碰撞function checkIntersect(object1, object2, 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.height - overlap;if(A1>A2&&A1<B2 || B1>A2&&B1<B2){if(C1>C2&&C1<D2 || D1>C2&&D1<D2){return true;}}return false;}// 游戏进行时所要触发的事件function gameLoop(){ctx.clearRect(0,0,screenWidth,screenHeight);ctx.save();ctx.drawImage(backgroundForestImg,0,0);ctx.drawImage(mushroom.image,mushroom.x,mushroom.y);drawPrize();drawLives();drawScore();animal.x += horizonalSpeed;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(){backgroundForestImg.src = "img/forest.jpg";mushroomImg.src = "img/mushroom.png";bearEyesClosedImg.src = "img/bear_eyesclosed.png";flowerImg.src = "img/flower.png";leafImg.src = "img/leaf.png";acornImg.src = "img/acorn.png";mushroom.image = mushroomImg;animal.image = bearEyesClosedImg;}// 监听事件，包括蘑菇的移动和开始按钮的点击function addEventHandler(){$('#container').mousemove(function(e){mushroom.x = e.pageX - (mushroom.image.width/2);})$('#startBtn').click(function(){toggleGamePlay();})}$(window).ready(function(){addEventHandler();loadImages();ctx = document.getElementById("canvas").getContext("2d");screenWidth = $('#canvas').attr("width");screenHeight = $('#canvas').attr("height");mushroom.x = parseInt(screenWidth/2);mushroom.y = parseInt(screenHeight - 40);animal.x = parseInt(screenWidth/2);animal.y = parseInt(screenHeight/2);initPrizes();})</script></head><body><div id="container" style="border:1px solid #ccc;width:480px;height:320px;cursor:none;"><canvas id="canvas" width="480px" height="320px"></canvas><img id="startBtn" src="img/START-Button.png" style="position:absolute;left:200px;top:200px;cursor:pointer"/></div></body></html>