写出一款吃豆子的网页游戏的代码要求：有游戏开始和结束功能角色用数字0代替怪物用数字1代替；整个游戏内容都在可见有限空间；怪物数量和出现为随机出现；每个怪物可以自由方向随机移动；当角色接触到怪物时怪物消失得一分并将得分累计显示出来；角色可以由方向键自由移动；角色为绿色方块怪物为红色圆点；点击游戏开始按钮才能开始游戏；角色可以通过空格键发射子弹子弹为小黑点小黑点形状小于怪物；子弹接触到怪物怪物变成五个
<!DOCTYPE html>
<html>
<head>
<title>吃豆子游戏</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#game{
width: 600px;
height: 400px;
margin: 20px auto;
border: 1px solid #ccc;
position: relative;
}
#score{
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #f00;
font-weight: bold;
}
#start{
position: absolute;
top: 180px;
left: 250px;
font-size: 30px;
color: #f00;
font-weight: bold;
cursor: pointer;
border: 1px solid #f00;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="game">
<div id="score"></div>
<div id="player" style="position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background-color: green;"></div>
</div>
<button id="start">开始游戏</button>
<pre><code><script type="text/javascript">
var game = document.getElementById("game"); //游戏区域
var player = document.getElementById("player"); //角色
var score = document.getElementById("score"); //分数
var startBtn = document.getElementById("start"); //开始游戏按钮
var playerX = 10, playerY = 10; //角色初始位置
var monsterNum = 5; //怪物数量
var monsters = []; //怪物数组
var scoreNum = 0; //分数
var gameStarted = false; //游戏是否开始
var bulletSpeed = 5; //子弹速度
//创建怪物
function createMonster(){
var monster = document.createElement("div");
monster.style.position = "absolute";
monster.style.width = "10px";
monster.style.height = "10px";
monster.style.borderRadius = "50%";
monster.style.backgroundColor = "red";
monster.style.left = Math.floor(Math.random() * (game.offsetWidth - 20)) + "px";
monster.style.top = Math.floor(Math.random() * (game.offsetHeight - 20)) + "px";
game.appendChild(monster);
monsters.push(monster);
}
//移动怪物
function moveMonster(monster){
var direction = Math.floor(Math.random() * 4); //随机方向
var speed = Math.floor(Math.random() * 5) + 1; //随机速度
var x = parseInt(monster.style.left);
var y = parseInt(monster.style.top);
switch(direction){
case 0: //向上
y -= speed;
break;
case 1: //向右
x += speed;
break;
case 2: //向下
y += speed;
break;
case 3: //向左
x -= speed;
break;
}
if(x < 0){
x = 0;
}
if(x > game.offsetWidth - 10){
x = game.offsetWidth - 10;
}
if(y < 0){
y = 0;
}
if(y > game.offsetHeight - 10){
y = game.offsetHeight - 10;
}
monster.style.left = x + "px";
monster.style.top = y + "px";
}
//碰撞检测
function checkCollision(){
for(var i = 0; i < monsters.length; i++){
var monster = monsters[i];
var monsterX = parseInt(monster.style.left);
var monsterY = parseInt(monster.style.top);
var playerX1 = playerX + 10;
var playerY1 = playerY + 10;
if(playerX < monsterX + 10 && playerX1 > monsterX && playerY < monsterY + 10 && playerY1 > monsterY){
scoreNum++;
score.innerHTML = "得分：" + scoreNum;
game.removeChild(monster);
monsters.splice(i, 1);
i--;
}
}
}
//发射子弹
function shoot(){
var bullet = document.createElement("div");
bullet.style.position = "absolute";
bullet.style.width = "5px";
bullet.style.height = "5px";
bullet.style.borderRadius = "50%";
bullet.style.backgroundColor = "black";
bullet.style.left = playerX + 10 + "px";
bullet.style.top = playerY + 10 + "px";
game.appendChild(bullet);
var timer = setInterval(function(){
var x = parseInt(bullet.style.left);
var y = parseInt(bullet.style.top) - bulletSpeed;
bullet.style.top = y + "px";
if(y < 0){
clearInterval(timer);
game.removeChild(bullet);
}
for(var i = 0; i < monsters.length; i++){
var monster = monsters[i];
var monsterX = parseInt(monster.style.left);
var monsterY = parseInt(monster.style.top);
if(x < monsterX + 10 && x + 5 > monsterX && y < monsterY + 10 && y + 5 > monsterY){
game.removeChild(monster);
monsters.splice(i, 1);
i--;
game.removeChild(bullet);
clearInterval(timer);
setTimeout(function(){
game.appendChild(createStar(monsterX, monsterY));
}, 3000);
}
}
}, 20);
}
//创建星星
function createStar(x, y){
var star = document.createElement("div");
star.style.position = "absolute";
star.style.width = "5px";
star.style.height = "5px";
star.style.backgroundColor = "#ff0";
star.style.left = x + "px";
star.style.top = y + "px";
game.appendChild(star);
var timer = setInterval(function(){
var opacity = parseFloat(star.style.opacity);
if(opacity > 0){
opacity -= 0.1;
star.style.opacity = opacity;
}else{
clearInterval(timer);
game.removeChild(star);
}
}, 300);
}
//按键事件
document.onkeydown = function(event){
if(gameStarted){
event = event || window.event;
switch(event.keyCode){
case 37: //左
playerX -= 5;
if(playerX < 0){
playerX = 0;
}
player.style.left = playerX + "px";
break;
case 38: //上
playerY -= 5;
if(playerY < 0){
playerY = 0;
}
player.style.top = playerY + "px";
break;
case 39: //右
playerX += 5;
if(playerX > game.offsetWidth - 20){
playerX = game.offsetWidth - 20;
}
player.style.left = playerX + "px";
break;
case 40: //下
playerY += 5;
if(playerY > game.offsetHeight - 20){
playerY = game.offsetHeight - 20;
}
player.style.top = playerY + "px";
break;
case 32: //空格
shoot();
break;
}
}
}
//开始游戏
startBtn.onclick = function(){
if(!gameStarted){
gameStarted = true;
this.style.display = "none";
for(var i = 0; i < monsterNum; i++){
createMonster();
}
setInterval(function(){
for(var i = 0; i < monsters.length; i++){
moveMonster(monsters[i]);
}
checkCollision();
}, 50);
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bi32 著作权归作者所有。请勿转载和采集!