htm5 canvas制作小的撞击型游戏
2013-02-25 17:08
393 查看
今天在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>
演示地址为：点击打开链接
所有的代码为：
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 怎样用HTML5 Canvas制作一个简单的游戏
- J2ME中使用Canvas制作简单的游戏菜单
- javascript与canvas制作蜘蛛纸牌八色蜘蛛纸牌在线可玩，html5游戏，包括游戏AI
- Canvas制作 撞球游戏 简单易学
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物（上）
- 怎样用HTML5 Canvas制作一个简单的游戏
- [译]怎样用HTML5 Canvas制作一个简单的游戏
- canvas制作简易祖玛游戏
- 怎样用HTML5 Canvas制作一个简单的游戏
- 借助HTML5 Canvas API制作一个简单的猜字游戏
- HTML5——canvas制作游戏接住小球
- HTML5——canvas制作游戏2048
- HTML5——canvas制作游戏2048
- J2ME中使用Canvas制作简单的游戏菜单
- 游戏制作之canvas
- 用HTML5 canvas制作简单游戏
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物（中）
- 【Unity3d】手机游戏关卡制作
- 用SurfaceView制作简单的android游戏 : 重力小球(完)--------添加其他类型的障碍物以及胜利画面
- 如何使用Box2D和Cocos2D制作一款像Fruit Ninja一样的游戏