canvas写个简单的小游戏

之前在HTML5 Canvas属性和方法汇总一文中,介绍过Canvas的各种属性以及方法的说明,并列举了自己写的一些Canvas demo,接下来开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到100行,先上效果图:

左侧为我们控制的控制板,右侧为假想的电脑控制的控制板
体验小游戏链接: https://demo.luckyw.cn/code.html?path=tennis-game

初始化


首先在html页面中添加中添加一个canvas元素,并给出一个id用于在js代码中获取该元素并对其进行操作

1
<canvas id="canvas"></canvas>

然后就是对各种参数,注释中都有给出,我就不多说了,直接看

1
2
3
4
5
6
7
8
9
//获取canvas元素以及2d绘图环境c,以及设置canvas宽高为800x600
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
W = canvas.width = 800,
H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2, //球的位置、半径以及在X轴及Y轴的速度
panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2, //控制板的宽高以及初始位置
player1Score = 0, player2Score = 0, winnerScore = 3, //记录玩家的分数以及得了多少分算赢
isEnd = 0; //判断是否比赛结束的变量,0为未结束,1为已结束

封装工具方法


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//绘制长方形(也就是控制板)
function fillRect(x, y, w, h, style) {
c.fillStyle = style;
c.fillRect(x, y, w, h);
}
//绘制圆(也就是游戏中的球)
function fillCircle(x, y, r, style) {
c.fillStyle = style;
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
c.fill();
}
//绘制文字(得分和显示输赢)
function fillText(txt, x, y, font, style) {
c.fillStyle = style || "white";
c.font = font || "40px DejaVu Sans Mono";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillText(txt, x, y);
}

添加事件


我们需要在canvas元素上添加监听事件,一是当结束的也就是isEnd为1的时候,当鼠标点击在canvas上的时候再来一把游戏,重置玩家分数以及重启动画绘制,二是我们需要控制左侧控制板的运动,不过只需要在Y轴运动即可

1
2
3
4
5
6
7
8
9
10
11
12
canvas.addEventListener("click", function () {
if (isEnd) {
player1Score = 0;
player2Score = 0;
isEnd = 0;
animate(); //主要的绘制方法
}
});
//获取鼠标在canvas上实际Y轴位置减去控制板的高度也就是控制板实际绘制的初始位置
canvas.addEventListener("mousemove", function (e) {
panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
});

边界判断


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//球边界判断
if (ballX - ballR - panelW < 0) {
if (ballY > panel1Y && ballY < panel1Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
} else {
player2Score++;
ballReset();
}
}
if (ballX + ballR + panelW > W) {
if (ballY > panel2Y && ballY < panel2Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
} else {
player1Score++;
ballReset();
}
}
if (ballY + ballR < 0 || ballY - ballR > H) {
ballVy = -ballVy;
}
//用于控制右侧控制板的运动
if (panel2Y + panelH / 2 < ballY - 40) {
panel2Y = panel2Y + 5;
} else if (panel2Y + panelH / 2 > ballY + 40) {
panel2Y = panel2Y - 5;
}

执行动画


我这里直接在animate方法里使用requestAnimationFrame(animate),更兼容的方法应该是以下这样,为了偷个懒就没写兼容写法

1
2
3
4
5
6
var RAF = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
}
})();
RAF(animate);

到此,该小游戏的介绍到此结束,简单吧

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×
  1. 1. 初始化
  2. 2. 封装工具方法
  3. 3. 添加事件
  4. 4. 边界判断
  5. 5. 执行动画