用html5做一个黄金矿工
时间: 2024-01-13 18:04:18 浏览: 30
好的,下面是一个简单的黄金矿工游戏的HTML5代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>黄金矿工游戏</title>
<style>
canvas {
border: solid 1px #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gold = new Image();
gold.src = "https://i.imgur.com/1zUfJ7L.png";
var miner = new Image();
miner.src = "https://i.imgur.com/sjQGZKj.png";
var score = 0;
var time = 60;
var timer;
function drawGold() {
var x = Math.random() * (canvas.width - 50);
var y = Math.random() * (canvas.height - 50);
ctx.drawImage(gold, x, y, 50, 50);
}
function drawMiner(x, y) {
ctx.drawImage(miner, x, y, 50, 50);
}
function updateTime() {
time--;
if (time < 0) {
clearInterval(timer);
alert("时间到,游戏结束!得分:" + score);
} else {
document.getElementById("time").innerHTML = "时间:" + time;
}
}
function startGame() {
score = 0;
time = 60;
clearInterval(timer);
timer = setInterval(updateTime, 1000);
document.getElementById("score").innerHTML = "得分:" + score;
document.getElementById("time").innerHTML = "时间:" + time;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMiner(canvas.width / 2 - 25, canvas.height / 2 - 25);
for (var i = 0; i < 10; i++) {
drawGold();
}
}
function checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
return x1 < x2 + w2 &&
x1 + w1 > x2 &&
y1 < y2 + h2 &&
y1 + h1 > y2;
}
canvas.addEventListener("mousemove", function(event) {
var x = event.clientX - canvas.offsetLeft - 25;
var y = event.clientY - canvas.offsetTop - 25;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMiner(x, y);
for (var i = 0; i < canvas.children.length; i++) {
if (canvas.children[i].tagName == "IMG") {
var goldX = canvas.children[i].offsetLeft;
var goldY = canvas.children[i].offsetTop;
if (checkCollision(x, y, 50, 50, goldX, goldY, 50, 50)) {
score++;
canvas.removeChild(canvas.children[i]);
drawGold();
document.getElementById("score").innerHTML = "得分:" + score;
}
}
}
});
startGame();
</script>
<div>
<button onclick="startGame()">重新开始</button>
<span id="score"></span>
<span id="time"></span>
</div>
</body>
</html>
```
这个游戏包含一个画布和一些简单的JavaScript代码。游戏开始时,你将看到一个矿工在画布的中心,以及一些金子随机分布在画布上。你可以通过移动鼠标来控制矿工的位置。当矿工与金子碰撞时,你将得到一分。游戏时间为60秒,时间结束后将显示得分。你可以通过点击“重新开始”按钮来重新开始游戏。