首页用js基于canvas写一个消灭星星小游戏的html文件

用js基于canvas写一个消灭星星小游戏的html文件

时间: 2023-06-05 16:06:30 浏览: 88

好的，这个问题属于技术问题，我可以回答。以下是消灭星星小游戏的html文件示例： ``` <!DOCTYPE html> <html> <head> <title>消灭星星小游戏</title> </head> <body> <canvas id="canvas" width="300" height="500"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById("canvas"); // 获取画板上下文 var context = canvas.getContext("2d"); // 绘制背景 context.fillStyle = "#000"; context.fillRect(0, 0, canvas.width, canvas.height); // 绘制星星 context.fillStyle = "#fff"; context.beginPath(); context.arc(100, 100, 20, 0, Math.PI * 2, true); context.closePath(); context.fill(); // 点击消灭星星 canvas.addEventListener("click", function(event) { var x = event.pageX - canvas.offsetLeft; var y = event.pageY - canvas.offsetTop; if (context.isPointInPath(x, y)) { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "#000"; context.fillRect(0, 0, canvas.width, canvas.height); } }); </script> </body> </html> ``` 这是一个简单的消灭星星小游戏，点击星星就会消灭，并清除画布重新绘制背景。您可以根据需要进行修改和完善。