做了一个跳起吃物品的游戏，涉及到碰撞体积的计算，以及canvas画布的使用
1.html文件
<div class="box">
<canvas id="canvas"></canvas>
<img class="begin-btn" src="img/begin.png">//游戏开始按钮
<img class="jump-btn" src="img/jump.png">//游戏起跳按钮
</div>
2.css文件
.box{
margin:0;
padding:0;
width:100%;
height:100%;
right:0;
top:0;
position: relative;
overflow: hidden;
}
.begin-btn{
width:3.25rem;
height:1.09rem;
left:50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
top:7.15rem;
position: absolute;
}
.jump-btn{
width:1.69rem;
height:1.7rem;
left:5.3rem;
bottom:.44rem;
z-index: 1;
position: absolute;
/*display: none;*/
}
3.js文件一些参数
var canvasW = window.innerWidth;
var canvasH = window.innerHeight;
$('body').css({width:canvasW ,height:canvasH})
if(canvasH<670){
var scale = 4.9/6;
}else{
var scale = 1.1;
}
$("#canvas").attr("width", 3004*scale);
$("#canvas").attr("height", 812*scale);
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var defaultPeoY = 660*scale;
var isJump = false;
var isTop = true;
var isLeftMove = false;
var handColl = false;
var fall = false;
var secondJump = false;
var jumpHigh = 110*scale;
var firstJump = true;
var isRun = true;
var movV = 3
$("#canvas").css("height", window.innerHeight);
4.游戏部分封装
var map = new Map();
var elemen = new Elemen();
function Map() {
this.background = getImages[0];
this.x = 0;
}
//移动地图
Map.prototype.moveMap = function () {
this.x += movV*scale;
if (this.x >= 3004*scale - window.innerWidth) {
//停止游戏
isRun = false;
gameResult(resultScore.length);//游戏结束
} else {
}
if (isRun) {
requestAnimationFrame(init);
}
};
//画地图
Map.prototype.drawMap = function () {
ctx.drawImage(getImages[0], 0 - this.x, 0, 3004*scale, 812*scale); //背景1移动
this.moveMap();
};
function Elemen() {
this.peoX = 50*scale;
this.peoNum = 0;
this.controlInterval = 0;
this.peoY = 660*scale;
this.peoPoint = [
{ src: getImages[1], width: 70*scale, height: 64*scale },
{ src: getImages[2], width: 67*scale, height: 66*scale },
{ src: getImages[3], width: 77*scale, height: 65*scale },
{ src: getImages[4], width: 77*scale, height: 65*scale },
{ src: getImages[5], width: 76*scale, height: 65*scale },
];
this.stonPoint = [
{ src: getImages[6], x: 150*scale, y: 520*scale, width: 103*scale, height: 60*scale },
// { src: getImages[7], x: 381*scale, y: 437*scale, width: 207*scale, height: 57*scale },
{ src: getImages[7], x: 450*scale, y: 520*scale, width: 207*scale, height: 57*scale },
{ src: getImages[8], x: 700*scale, y: 454*scale, width: 154*scale, height: 60*scale },
{ src: getImages[9], x: 1100*scale, y: 454*scale, width: 206*scale, height: 60*scale },
{ src: getImages[10], x: 1620*scale, y: 569*scale, width: 257*scale, height: 60*scale },
{ src: getImages[6], x: 1922*scale, y: 454*scale, width: 103*scale, height: 60*scale },
{ src: getImages[8], x: 2360*scale, y: 569*scale, width: 154*scale, height: 60*scale },
{ src: getImages[9], x: 2658*scale, y: 454*scale, width: 206*scale, height: 60*scale },
];
this.reward = [
{ id: 1, src: getImages[11], x: 700*scale, y: 400*scale, width: 47*scale, height: 69*scale },
{ id: 2, src: getImages[12], x: 1220*scale, y: 673*scale, width: 42*scale, height: 47*scale },
{ id: 3, src: getImages[13], x: 1820*scale, y: 543*scale, width: 40*scale, height: 39*scale },
{ id: 4, src: getImages[14], x: 2380*scale, y: 535*scale, width: 58*scale, height: 59*scale },
];
}
//画元素
Elemen.prototype.drawElem = function () {
this.stonPoint.forEach((item) => {
ctx.drawImage(item.src, item.x, item.y, item.width, item.height); //障碍物
});
this.reward.forEach((item) => {
ctx.drawImage(item.src, item.x, item.y, item.width, item.height); //奖励物
});
ctx.drawImage(
this.peoPoint[this.peoNum].src,
this.peoX,
this.peoY,
this.peoPoint[this.peoNum].width,
this.peoPoint[this.peoNum].height
); //人物
// ctx.drawImage(getImages[5], this.cutX, 0, 60, 60, this.peoX, this.peoY, 60, 60); //人物
if (handColl) {
this.Collision();
}
this.handleReward();
this.moveElem();
};
//移动元素
Elemen.prototype.moveElem = function () {
if (recodeNum == 4) {
result = true;
}
this.stonPoint.forEach((item) => {
item.x -= movV*scale;
});
this.reward.forEach((item) => {
item.x -= movV*scale;
});
this.controlInterval++;
if (this.controlInterval == 6) {
this.peoNum++;
this.controlInterval = 0;
if (this.peoNum == 5) {
this.peoNum = 1;
}
}
if (secondJump) {
jumpHigh = 320*scale;
handColl = true;
} else {
handColl = true;
jumpHigh = 200*scale;
}
if (isJump) {
recodeNum++;
if (isTop) {
this.peoY -= 7*scale;
// this.peoX++;
} else {
this.peoY += 7*scale;
}
if (this.peoY <= defaultPeoY - jumpHigh) {
isTop = false;
}
if (this.peoY >= defaultPeoY) {
isJump = false;
isTop = true;
isLeftMove = true;
handColl = false;
secondJump = false;
this.peoY = defaultPeoY;
}
}
};
//碰撞体积计算
Elemen.prototype.Collision = function () {
let height = this.peoPoint[this.peoNum].height;
let width = this.peoPoint[this.peoNum].width;
if (result) {
for (var i = 0; i < this.stonPoint.length; i++) {
var item = this.stonPoint[i];
if (
this.peoX >= item.x - 50*scale &&
this.peoX + width <= item.x + item.width &&
this.peoY + height >= item.y &&
this.peoY + height < item.y + 10*scale
) {
this.peoY = item.y - 55*scale;
// if (this.peoY < 450) {
secondJump = true;
// }
useItem = item;
fall = true;
isJump = false;
isTop = true;
result = false;
break;
}
}
}
if (fall) {
// console.log(useItem)
if (this.peoX > useItem.x + useItem.width) {
handColl = false;
isJump = true;
isTop = false;
fall = false;
}
}
};
//处理得分
Elemen.prototype.handleReward = function () {
let height = this.peoPoint[this.peoNum].height;
let width = this.peoPoint[this.peoNum].width;
for (var i = 0; i < this.reward.length; i++) {
var item = this.reward[i];
if (
item.x < this.peoX + width &&
item.x + item.width > this.peoX &&
this.peoY < item.y + item.height &&
item.y < this.peoY + height
) {
animateReward(item.id);
this.reward.splice(i, 1);
resultScore = this.reward;
break;
}
}
};
//初始化游戏
function init() {
map.drawMap();
elemen.drawElem();
}
