``
html，，，，太空游戏，， canvas {， border: 1px solid black;， }，，，，，， var canvas = document.getElementById('gameCanvas');， var ctx = canvas.getContext('2d');，， // 绘制太空背景， ctx.fillStyle = 'black';， ctx.fillRect(0, 0, canvas.width, canvas.height);，， // 绘制飞船， ctx.fillStyle = 'white';， ctx.fillRect(100, 100, 50, 50);，， // 更新游戏画面， function updateGame() {， // 清除上一帧的画面， ctx.clearRect(0, 0, canvas.width, canvas.height);，， // 重新绘制太空背景和飞船， ctx.fillStyle = 'black';， ctx.fillRect(0, 0, canvas.width, canvas.height);， ctx.fillStyle = 'white';， ctx.fillRect(100, 100, 50, 50);， }，， // 设置游戏帧率， setInterval(updateGame, 1000 / 60); // 60帧/秒，，，，`，，这段代码创建了一个800x600像素的HTML5 Canvas，并使用JavaScript绘制了一个简单的太空游戏。在画布上绘制了一个黑色的太空背景和一个白色的飞船。通过setInterval`函数设置游戏帧率为60帧/秒，不断更新游戏画面。你可以根据需要进一步扩展和完善这个游戏，添加更多的游戏元素和交互逻辑。在HTML5 Canvas中创建太空游戏，可以展示出Canvas的强大功能和灵活性，以下是一个详细的示例，展示了如何使用HTML5 Canvas和JavaScript来开发一个简单的太空飞行冒险游戏。
使用HTML5 Canvas创建太空游戏的示例
1. 飞船移动
我们需要实现飞船的移动功能，通过监听用户的键盘输入（如箭头键），我们可以控制飞船在屏幕上的位置，以下是实现飞船移动的基本代码：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var shipX = 150;
var shipY = 150;
document.addEventListener("keydown", function(e) {
var step = 5;
switch (e.keyCode) {
case 37: // left arrow
shipX = step;
break;
case 39: // right arrow
shipX += step;
break;
case 38: // up arrow
shipY = step;
break;
case 40: // down arrow
shipY += step;
break;
}
drawShip();
});
function drawShip() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(shipX, shipY, 10, 0, Math.PI * 2);
ctx.fillStyle = "#00f";
ctx.fill();
ctx.closePath();
}
2. 小行星生成
我们需要生成小行星并让它们在屏幕上移动，这可以通过使用随机数生成器和算法来实现，以下是生成小行星的基本代码：
var asteroids = [];
function generateAsteroid() {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var radius = 15;
asteroids.push({x: x, y: y, radius: radius});
}
setInterval(generateAsteroid, 2000); // 每两秒生成一个小行星
function drawAsteroids() {
ctx.save();
ctx.fillStyle = "#888";
for (var i = 0; i < asteroids.length; i++) {
ctx.beginPath();
ctx.arc(asteroids[i].x, asteroids[i].y, asteroids[i].radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
ctx.restore();
}
3. 碰撞检测
为了增加游戏的挑战性，我们需要检测飞船是否与小行星发生了碰撞，如果发生碰撞，游戏结束，以下是实现碰撞检测的基本代码：
function checkCollision() {
for (var i = 0; i < asteroids.length; i++) {
var dx = shipX asteroids[i].x;
var dy = shipY asteroids[i].y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10 + asteroids[i].radius) {
alert("Game Over!");
document.location.reload(); // 重新开始游戏
}
}
}
setInterval(checkCollision, 100); // 每100毫秒检查一次碰撞
4. 得分系统
我们可以添加一个得分系统来记录玩家的表现，以下是实现得分系统的基本代码：
var score = 0;
function updateScore() {
score++;
document.getElementById("score").innerText = "Score: " + score;
}
setInterval(updateScore, 1000); // 每秒更新一次分数
通过以上四个部分的代码组合，我们可以得到一个完整的太空飞行冒险游戏，玩家可以通过键盘控制飞船躲避小行星，同时积累分数，当飞船与小行星发生碰撞时，游戏结束并显示“Game Over!”提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>太空游戏示例</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="spaceGameCanvas"></canvas>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById('spaceGameCanvas');
const ctx = canvas.getContext('2d');
// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 游戏变量
let player = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
velocity: {
x: 0,
y: 0
}
};
// 随机生成子弹
let bullets = [];
// 随机生成敌人
let enemies = [];
// 控制游戏循环
function gameLoop() {
// 清除canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制玩家
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
// 绘制子弹
for (let bullet of bullets) {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, 2, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
// 更新子弹位置
bullet.x += bullet.velocity.x;
bullet.y += bullet.velocity.y;
// 检查子弹是否超出屏幕
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullets.splice(bullets.indexOf(bullet), 1);
}
}
// 绘制敌人
for (let enemy of enemies) {
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
// 更新敌人位置
enemy.x += enemy.velocity.x;
enemy.y += enemy.velocity.y;
// 检查敌人是否碰撞到玩家
if (distance(player, enemy) < player.radius + enemy.radius) {
// 碰撞逻辑
// ...
}
// 检查敌人是否超出屏幕
if (enemy.x < 0 || enemy.x > canvas.width || enemy.y < 0 || enemy.y > canvas.height) {
enemies.splice(enemies.indexOf(enemy), 1);
}
}
// 生成新的敌人
if (Math.random() < 0.01) {
let newEnemy = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: 5,
velocity: {
x: (Math.random() 0.5) * 5,
y: (Math.random() 0.5) * 5
}
};
enemies.push(newEnemy);
}
// 继续游戏循环
requestAnimationFrame(gameLoop);
}
// 计算两点之间的距离
function distance(obj1, obj2) {
let dx = obj1.x obj2.x;
let dy = obj1.y obj2.y;
return Math.sqrt(dx * dx + dy * dy);
}
// 初始化游戏
gameLoop();
// 监听键盘事件
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowLeft':
player.velocity.x = 5;
break;
case 'ArrowUp':
player.velocity.y = 5;
break;
case 'ArrowRight':
player.velocity.x = 5;
break;
case 'ArrowDown':
player.velocity.y = 5;
break;
case 'Space':
let bullet = {
x: player.x,
y: player.y,
velocity: {
x: 0,
y: 10
}
};
bullets.push(bullet);
break;
}
});
document.addEventListener('keyup', (event) => {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
player.velocity.x = 0;
break;
case 'ArrowUp':
case 'ArrowDown':
player.velocity.y = 0;
break;
}
});
</script>
</body>
</html>
代码是一个简单的太空游戏示例，使用了HTML5的canvas元素，游戏包含一个玩家，可以左右上下移动，并且可以发射子弹，游戏还随机生成敌人，敌人会向玩家移动，当玩家和敌人距离过近时，可以触发碰撞逻辑（这里未实现具体逻辑），游戏循环通过requestAnimationFrame实现，可以保持游戏的流畅运行。