canvas写个简单的小游戏

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

左侧为我们控制的控制板，右侧为假想的电脑控制的控制板
体验小游戏链接: https://demo.luckyw.cn/code.h...

初始化

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

<canvas></canvas>

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

//获取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为已结束 封装工具方法 //绘制长方形(也就是控制板) 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轴运动即可

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; }); 边界判断 //球边界判断 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)，更兼容的方法应该是以下这样，为了偷个懒就没写兼容写法

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

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