以下是使用HTML5 canvas和JavaScript编写的猴子摘香蕉动画,您可以通过单击“开始”和“暂停”按钮来控制它。
HTML代码:
```
<canvas id="canvas" width="400" height="400"></canvas>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>
```
JavaScript代码:
```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var monkeyImg = new Image();
monkeyImg.src = "https://i.imgur.com/9X9Kt4Z.png";
var bananaImg = new Image();
bananaImg.src = "https://i.imgur.com/4OFx8g5.png";
var monkey = {
x: 50,
y: 250,
speed: 3,
frame: 0,
frames: [
{sx: 0, sy: 0},
{sx: 150, sy: 0},
{sx: 300, sy: 0},
{sx: 0, sy: 150},
{sx: 150, sy: 150},
{sx: 300, sy: 150},
{sx: 0, sy: 300},
{sx: 150, sy: 300},
{sx: 300, sy: 300},
],
update: function() {
this.frame++;
if (this.frame >= this.frames.length) {
this.frame = 0;
}
this.x += this.speed;
if (this.x > canvas.width) {
this.x = -150;
}
},
draw: function() {
var frame = this.frames[this.frame];
ctx.drawImage(monkeyImg, frame.sx, frame.sy, 150, 150, this.x, this.y, 150, 150);
}
};
var banana = {
x: 300,
y: 50,
update: function() {},
draw: function() {
ctx.drawImage(bananaImg, this.x, this.y, 50, 50);
}
};
var isPaused = true;
var startButton = document.getElementById("startBtn");
var pauseButton = document.getElementById("pauseBtn");
startButton.addEventListener("click", function() {
isPaused = false;
startButton.disabled = true;
pauseButton.disabled = false;
requestAnimationFrame(gameLoop);
});
pauseButton.addEventListener("click", function() {
isPaused = true;
startButton.disabled = false;
pauseButton.disabled = true;
});
function gameLoop() {
if (isPaused) {
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
monkey.update();
monkey.draw();
banana.draw();
requestAnimationFrame(gameLoop);
}
```
该程序定义了两个对象:猴子和香蕉。猴子由一个对象表示,它包含其位置、速度、当前帧和一组帧,该帧定义为从精灵表中提取的图像矩形。香蕉只需要位置,因为它是静态的。
程序还定义了一个游戏循环函数`gameLoop()`,该函数在每个帧上更新和绘制对象。它使用`requestAnimationFrame()`来使其每秒运行60次,并且只有在`isPaused`变量为false时才会运行。
单击“开始”按钮会将`isPaused`设置为false并启动游戏循环。单击“暂停”按钮会将`isPaused`设置为true并停止游戏循环。