javascript小游戏代码
时间: 2024-09-29 13:13:53 浏览: 63
JavaScript小游戏的代码通常涉及游戏的基本元素,如用户交互、图形绘制、动画效果等。下面是一个简单的HTML5 Canvas上点击移动小球的游戏示例:
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#gameCanvas {
border: 1px solid black;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballRadius = 20;
function drawBall() {
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
}
function moveBall(event) {
if (event.clientX -ballRadius ||
event.clientY - ballY > ballRadius || event.clientY - ballY < -ballRadius) {
// 如果小球碰到边缘,反弹
ballX = event.clientX;
ballY = event.clientY;
} else {
ballX += event.movementX; // 或者使用event.clientX
ballY += event.movementY; // 或者使用event.clientY
}
drawBall();
}
canvas.addEventListener('mousemove', moveBall);
// 开始游戏
drawBall();
</script>
</body>
</html>
```
这个例子中,我们创建了一个小球并在鼠标移动时改变其位置,如果碰到边界则反弹。这只是一个基础示例,实际的小游戏会更复杂,包括碰撞检测、得分系统、游戏循环等。
阅读全文