愤怒的小鸟游戏开源代码：简单易懂的 HTML5 游戏实现
以下是一个愤怒的小鸟小游戏的开源代码：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Angry Birds</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script src='angrybirds.js'></script>
</body>
</html>
JavaScript:
// 定义常量
const GRAVITY = 0.1;
const FRICTION = 0.99;
const BIRD_RADIUS = 20;
const BIRD_COLOR = 'yellow';
const PIG_RADIUS = 25;
const PIG_COLOR = 'green';
const BLOCK_WIDTH = 50;
const BLOCK_HEIGHT = 20;
const BLOCK_COLOR = 'brown';
const BLOCK_MARGIN = 10;
// 获取画布和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 定义小鸟类
class Bird {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.radius = BIRD_RADIUS;
this.color = BIRD_COLOR;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
}
update() {
// 更新速度和位置
this.vy += GRAVITY;
this.vx *= FRICTION;
this.vy *= FRICTION;
this.x += this.vx;
this.y += this.vy;
}
launch(angle, power) {
// 计算速度
this.vx = power * Math.cos(angle);
this.vy = power * Math.sin(angle);
}
}
// 定义猪类
class Pig {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = PIG_RADIUS;
this.color = PIG_COLOR;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
}
hit(bird) {
// 判断小鸟是否撞到猪
var dx = bird.x - this.x;
var dy = bird.y - this.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < bird.radius + this.radius) {
return true;
} else {
return false;
}
}
}
// 定义方块类
class Block {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = BLOCK_WIDTH;
this.height = BLOCK_HEIGHT;
this.color = BLOCK_COLOR;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
hit(bird) {
// 判断小鸟是否撞到方块
if (bird.x + bird.radius > this.x && bird.x - bird.radius < this.x + this.width &&
bird.y + bird.radius > this.y && bird.y - bird.radius < this.y + this.height) {
return true;
} else {
return false;
}
}
}
// 定义游戏类
class Game {
constructor() {
this.bird = new Bird(canvas.width / 2, canvas.height - 50);
this.pig = new Pig(canvas.width - 50, canvas.height - 50);
this.blocks = [];
for (var i = 0; i < 5; i++) {
var block = new Block(BLOCK_MARGIN + (BLOCK_WIDTH + BLOCK_MARGIN) * i, canvas.height - 100);
this.blocks.push(block);
}
this.isLaunching = false;
}
draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
this.bird.draw();
this.pig.draw();
for (var i = 0; i < this.blocks.length; i++) {
this.blocks[i].draw();
}
}
update() {
this.bird.update();
for (var i = 0; i < this.blocks.length; i++) {
if (this.blocks[i].hit(this.bird)) {
this.bird.vx = -this.bird.vx;
}
}
if (this.pig.hit(this.bird)) {
alert('You win!');
location.reload();
}
if (this.bird.x < -BIRD_RADIUS || this.bird.x > canvas.width + BIRD_RADIUS ||
this.bird.y < -BIRD_RADIUS || this.bird.y > canvas.height + BIRD_RADIUS) {
alert('You lose!');
location.reload();
}
}
launch(angle, power) {
this.isLaunching = true;
this.bird.launch(angle, power);
}
}
// 创建游戏对象
var game = new Game();
// 绑定点击事件
canvas.addEventListener('mousedown', function(event) {
var angle = Math.atan2(event.clientY - game.bird.y, event.clientX - game.bird.x);
var power = 0;
var interval = setInterval(function() {
power += 10;
if (power > 100) {
power = 100;
}
}, 50);
canvas.addEventListener('mouseup', function(event) {
clearInterval(interval);
game.launch(angle, power);
canvas.removeEventListener('mouseup', arguments.callee);
});
});
// 循环更新和绘制
setInterval(function() {
game.update();
game.draw();
}, 1000 / 60);
这是一个简单的愤怒的小鸟小游戏，有小鸟、猪和方块三种元素，可以通过鼠标点击设置小鸟的发射角度和力量，然后小鸟就会被发射出去，如果小鸟撞到猪就算胜利，如果小鸟飞出画面就算失败。这个游戏的代码比较简单，适合初学者学习。
原文地址: https://www.cveoy.top/t/topic/ndnX 著作权归作者所有。请勿转载和采集!