写出一款吃豆子的网页游戏的代码要求：有游戏开始和结束功能角色用数字0代替怪物用数字1代替；怪物数量和出现为随机出现；每个怪物可以自由方向随机移动；当角色接触到怪物时怪物消失得一分并将得分累计显示出来；角色可以由方向键自由移动；角色为绿色方块怪物为红色圆点；点击游戏开始按钮才能开始游戏；角色和怪物的移动速度一样；
<!DOCTYPE html>
<html>
<head>
<title>吃豆子游戏</title>
<style>
canvas{
border: 1px solid #000;
background-color: #fff;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<button onclick="startGame()">开始游戏</button>
<p>得分：<span id="score">0</span></p>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var score = 0;
var player = {
x: canvas.width/2,
y: canvas.height/2,
size: 20,
color: "green",
speed: 5
};
var monsters = [];
var monsterSize = 10;
var monsterSpeed = 5;
<pre><code> function startGame(){
document.addEventListener("keydown", movePlayer);
spawnMonsters();
draw();
}
function spawnMonsters(){
var numMonsters = Math.floor(Math.random() * 10) + 1;
for(var i=0; i<numMonsters; i++){
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var dx = (Math.random() - 0.5) * monsterSpeed;
var dy = (Math.random() - 0.5) * monsterSpeed;
monsters.push({
x: x,
y: y,
dx: dx,
dy: dy,
size: monsterSize,
color: "red",
score: 1
});
}
}
function draw(){
//清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
//绘制角色
ctx.fillStyle = player.color;
ctx.fillRect(player.x-player.size/2, player.y-player.size/2, player.size, player.size);
//绘制怪物
for(var i=0; i<monsters.length; i++){
ctx.fillStyle = monsters[i].color;
ctx.beginPath();
ctx.arc(monsters[i].x, monsters[i].y, monsters[i].size, 0, 2*Math.PI);
ctx.fill();
}
//更新怪物位置
for(var i=0; i<monsters.length; i++){
monsters[i].x += monsters[i].dx;
monsters[i].y += monsters[i].dy;
//判断怪物是否碰到边界
if(monsters[i].x + monsters[i].size/2 > canvas.width || monsters[i].x - monsters[i].size/2 < 0){
monsters[i].dx = -monsters[i].dx;
}
if(monsters[i].y + monsters[i].size/2 > canvas.height || monsters[i].y - monsters[i].size/2 < 0){
monsters[i].dy = -monsters[i].dy;
}
//判断怪物是否碰到角色
if(Math.abs(monsters[i].x - player.x) < monsters[i].size/2 + player.size/2 && Math.abs(monsters[i].y - player.y) < monsters[i].size/2 + player.size/2){
score += monsters[i].score;
document.getElementById("score").innerHTML = score;
monsters.splice(i, 1);
if(monsters.length == 0){
spawnMonsters();
}
break;
}
}
//更新角色位置
if(player.direction == "left" && player.x - player.size/2 > 0){
player.x -= player.speed;
}
else if(player.direction == "right" && player.x + player.size/2 < canvas.width){
player.x += player.speed;
}
else if(player.direction == "up" && player.y - player.size/2 > 0){
player.y -= player.speed;
}
else if(player.direction == "down" && player.y + player.size/2 < canvas.height){
player.y += player.speed;
}
//循环调用draw函数
requestAnimationFrame(draw);
}
function movePlayer(event){
if(event.keyCode == 37){
player.direction = "left";
}
else if(event.keyCode == 39){
player.direction = "right";
}
else if(event.keyCode == 38){
player.direction = "up";
}
else if(event.keyCode == 40){
player.direction = "down";
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/biN5 著作权归作者所有。请勿转载和采集!