web前端小游戏(附源码)
时间: 2023-10-30 15:07:08 浏览: 56
以下是一个简单的 web 前端小游戏,使用 HTML、CSS 和 JavaScript 编写。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小游戏</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
#canvas {
display: block;
margin: auto;
background-color: #fff;
border: 2px solid #000;
box-shadow: 0 0 10px #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
```
CSS 代码用于设置页面样式,这里只设置了页面背景色、画布的样式。
JavaScript 代码:
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置小球的初始位置和速度
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
// 设置挡板的初始位置和大小
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
// 设置按键状态
var rightPressed = false;
var leftPressed = false;
// 监听按键事件
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
// 绘制小球
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
// 绘制挡板
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
// 绘制游戏场景
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
drawBall(); // 绘制小球
drawPaddle(); // 绘制挡板
// 小球碰到左右边界时反弹
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
// 小球碰到上边界时反弹
if(y + dy < ballRadius) {
dy = -dy;
}
// 小球碰到挡板时反弹
else if(y + dy > canvas.height-ballRadius-paddleHeight && x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
// 移动挡板
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
// 更新小球的位置
x += dx;
y += dy;
}
setInterval(draw, 10); // 每隔10毫秒调用一次draw函数,实现动画效果
```
JavaScript 代码实现了游戏的逻辑,包括小球和挡板的移动、边界碰撞检测等。同时,使用 `setInterval` 函数每隔一定时间调用 `draw` 函数,实现动画效果。
将上面的 HTML、CSS 和 JavaScript 代码保存到同一目录下,将 HTML 文件在浏览器中打开,即可开始游戏。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)