编程猫编程射击小游戏

// 首先，我们来定义一些常量，方便后续使用

var canvasWidth = 800;

var canvasHeight = 400;

var playerWidth = 50;

var playerHeight = 50;

var bulletWidth = 10;

var bulletHeight = 10;

var enemyWidth = 30;

var enemyHeight = 30;

// 创建玩家对象

var player = {

x: canvasWidth / 2 - playerWidth / 2,

y: canvasHeight - playerHeight - 10,

width: playerWidth,

height: playerHeight,

color: 'blue',

speed: 10,

bullets: [],

draw: function(context) {

context.fillStyle = this.color;

context.fillRect(this.x, this.y, this.width, this.height);

},

moveLeft: function() {

if (this.x > 0) {

this.x -= this.speed;

}

},

moveRight: function() {

if (this.x + this.width < canvasWidth) {

this.x += this.speed;

}

},

shoot: function() {

var bullet = {

x: this.x + this.width / 2 - bulletWidth / 2,

y: this.y,

width: bulletWidth,

height: bulletHeight,

color: 'red',

speed: 5,

update: function() {

this.y -= this.speed;

},

draw: function(context) {

context.fillStyle = this.color;

context.fillRect(this.x, this.y, this.width, this.height);

}

};

this.bullets.push(bullet);

}

};

// 创建敌人对象

function Enemy(x, y) {

this.x = x;

this.y = y;

this.width = enemyWidth;

this.height = enemyHeight;

this.color = 'green';

this.speed = 2;

this.update = function() {

this.y += this.speed;

};

this.draw = function(context) {

context.fillStyle = this.color;

context.fillRect(this.x, this.y, this.width, this.height);

};

}

// 创建敌人数组

var enemies = [];

// 创建画布对象

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

var context = canvas.getContext('2d');

document.body.appendChild(canvas);

// 监听键盘事件

window.addEventListener('keydown', function(event) {

switch (event.keyCode) {

case 37: // 左箭头键

player.moveLeft();

break;

case 39: // 右箭头键

player.moveRight();

break;

case 32: // 空格键

player.shoot();

break;

}

});

// 游戏主循环

function gameLoop() {

// 更新玩家子弹

for (var i = 0; i < player.bullets.length; i++) {

var bullet = player.bullets[i];

bullet.update();

// 检查子弹是否击中敌人

for (var j = 0; j < enemies.length; j++) {

var enemy = enemies[j];

if (checkCollision(bullet, enemy)) {

player.bullets.splice(i, 1);

enemies.splice(j, 1);

i--;

break;

}

}

// 检查子弹是否超出画布

if (bullet.y + bullet.height < 0) {

player.bullets.splice(i, 1);

i--;

}

}

// 更新敌人

for (var i = 0; i < enemies.length; i++) {

var enemy = enemies[i];

enemy.update();

// 检查敌人是否与玩家发生碰撞

if (checkCollision(enemy, player)) {

alert('游戏结束！');

location.reload();

}

// 检查敌人是否超出画布

if (enemy.y + enemy.height > canvasHeight) {

enemies.splice(i, 1);

i--;

}

}

// 清空画布

context.clearRect(0, 0, canvasWidth, canvasHeight);

// 绘制玩家

player.draw(context);

// 绘制玩家子弹

for (var i = 0; i < player.bullets.length; i++) {

var bullet = player.bullets[i];

bullet.draw(context);

}

// 绘制敌人

for (var i = 0; i < enemies.length; i++) {

var enemy = enemies[i];

enemy.draw(context);

}

// 随机生成敌人

if (Math.random() < 0.01) {

var x = Math.random() * (canvasWidth - enemyWidth);

var y = -enemyHeight;

var enemy = new Enemy(x, y);

enemies.push(enemy);

}

// 递归调用游戏主循环

requestAnimationFrame(gameLoop);

}

// 检测碰撞

function checkCollision(obj1, obj2) {

return obj1.x < obj2.x + obj2.width

&& obj1.x + obj1.width > obj2.x

&& obj1.y < obj2.y + obj2.height

&& obj1.y + obj1.height > obj2.y;

}

// 启动游戏

gameLoop();