阅读量:0
``
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实现，可以保持游戏的流畅运行。
