canvas桌球小游戏
时间: 2023-08-28 11:06:21 浏览: 48
好的,这个可以用Canvas实现。以下是一个简单的桌球小游戏的实现:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas桌球小游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script src="script.js"></script>
</html>
```
JavaScript代码:
```javascript
// 获取canvas元素和绘图上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置球和球拍的初始位置和速度
var ball = {x: canvas.width/2, y: canvas.height-30, radius: 10, dx: 2, dy: -2};
var paddle = {x: canvas.width/2-30, y: canvas.height-10, width: 60, height: 10, dx: 5};
var leftPressed = false;
var rightPressed = false;
// 监听按键事件
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
// 处理按键事件
function keyDownHandler(event) {
if(event.keyCode == 37) {
leftPressed = true;
}
else if(event.keyCode == 39) {
rightPressed = true;
}
}
function keyUpHandler(event) {
if(event.keyCode == 37) {
leftPressed = false;
}
else if(event.keyCode == 39) {
rightPressed = false;
}
}
// 绘制球
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
// 绘制球拍
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
// 绘制游戏
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制球和球拍
drawBall();
drawPaddle();
// 碰到左右边界反弹
if(ball.x + ball.dx < ball.radius || ball.x + ball.dx > canvas.width-ball.radius) {
ball.dx = -ball.dx;
}
// 碰到上边界反弹
if(ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
// 碰到球拍反弹
else if(ball.y + ball.dy > canvas.height-ball.radius-paddle.height && ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
ball.dy = -ball.dy;
}
// 移动球拍
if(leftPressed && paddle.x > 0) {
paddle.x -= paddle.dx;
}
else if(rightPressed && paddle.x < canvas.width - paddle.width) {
paddle.x += paddle.dx;
}
// 移动球
ball.x += ball.dx;
ball.y += ball.dy;
// 重绘
requestAnimationFrame(draw);
}
// 开始游戏
draw();
```
这个小游戏的实现比较简单,主要就是通过Canvas绘制球和球拍,然后控制它们的位置和速度,实现反弹和移动的效果。同时监听键盘事件,控制球拍的移动。在绘制的过程中,使用`requestAnimationFrame()`方法实现动画效果。