所以我认为如果我将激光更改为a，这会让游戏更好 小圆圈，这个来自github.com的代码帮助了我，但是我如何让正方形的草莓推进器从左到右移动
这是strawberryinvaders.js代码
/*
spaceinvaders.js
the core logic for the space invaders game.
*/
/*
Game Class
The Game class represents a Space Invaders game.
Create an instance of it, change any of the default values
in the settings, and call 'start' to run the game.
Call 'initialise' before 'start' to set the canvas the game
will draw to.
Call 'moveShip' or 'shipFire' to control the ship.
Listen for 'gameWon' or 'gameLost' events to handle the game
ending.
*/
// Creates an instance of the Game class.
function Game() {
// Set the initial config.
this.config = {
bombRate: 0.05,
bombMinVelocity: 50,
bombMaxVelocity: 50,
invaderInitialVelocity: 25,
invaderAcceleration: 0,
invaderDropDistance: 20,
rocketVelocity: 120,
rocketMaxFireRate: 2,
gameWidth: 400,
gameHeight: 300,
fps: 50,
debugMode: false,
invaderRanks: 5,
invaderFiles: 10,
shipSpeed: 120,
levelDifficultyMultiplier: 0.2,
pointsPerInvader: 5
};
// All state is in the variables below.
this.lives = 3;
this.width = 0;
this.height = 0;
this.gameBounds = {left: 0, top: 0, right: 0, bottom: 0};
this.intervalId = 0;
this.score = 0;
this.level = 1;
// The state stack.
this.stateStack = [];
// Input/output
this.pressedKeys = {};
this.gameCanvas = null;
}
// Initialis the Game with a canvas.
Game.prototype.initialise = function(gameCanvas) {
// Set the game canvas.
this.gameCanvas = gameCanvas;
// Set the game width and height.
this.width = gameCanvas.width;
this.height = gameCanvas.height;
// Set the state game bounds.
this.gameBounds = {
left: gameCanvas.width / 2 - this.config.gameWidth / 2,
right: gameCanvas.width / 2 + this.config.gameWidth / 2,
top: gameCanvas.height / 2 - this.config.gameHeight / 2,
bottom: gameCanvas.height / 2 + this.config.gameHeight / 2,
};
};
Game.prototype.moveToState = function(state) {
// If we are in a state, leave it.
if(this.currentState() && this.currentState().leave) {
this.currentState().leave(game);
this.stateStack.pop();
}
// If there's an enter function for the new state, call it.
if(state.enter) {
state.enter(game);
}
// Set the current state.
this.stateStack.pop();
this.stateStack.push(state);
};
// Start the Game.
Game.prototype.start = function() {
// Move into the 'welcome' state.
this.moveToState(new WelcomeState());
// Set the game variables.
this.lives = 3;
this.config.debugMode = /debug=true/.test(window.location.href);
// Start the game loop.
var game = this;
this.intervalId = setInterval(function () { GameLoop(game);}, 1000 / this.config.fps);
};
// Returns the current state.
Game.prototype.currentState = function() {
return this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
};
// The main loop.
function GameLoop(game) {
var currentState = game.currentState();
if(currentState) {
// Delta t is the time to update/draw.
var dt = 1 / game.config.fps;
// Get the drawing context.
var ctx = this.gameCanvas.getContext("2d");
// Update if we have an update function. Also draw
// if we have a draw function.
if(currentState.update) {
currentState.update(game, dt);
}
if(currentState.draw) {
currentState.draw(game, dt, ctx);
}
}
}
Game.prototype.pushState = function(state) {
// If there's an enter function for the new state, call it.
if(state.enter) {
state.enter(game);
}
// Set the current state.
this.stateStack.push(state);
};
Game.prototype.popState = function() {
// Leave and pop the state.
if(this.currentState()) {
if(this.currentState().leave) {
this.currentState().leave(game);
}
// Set the current state.
this.stateStack.pop();
}
};
// The stop function stops the game.
Game.prototype.stop = function Stop() {
clearInterval(this.intervalId);
};
// Inform the game a key is down.
Game.prototype.keyDown = function(keyCode) {
this.pressedKeys[keyCode] = true;
// Delegate to the current state too.
if(this.currentState() && this.currentState().keyDown) {
this.currentState().keyDown(this, keyCode);
}
};
// Inform the game a key is up.
Game.prototype.keyUp = function(keyCode) {
delete this.pressedKeys[keyCode];
// Delegate to the current state too.
if(this.currentState() && this.currentState().keyUp) {
this.currentState().keyUp(this, keyCode);
}
};
function WelcomeState() {
}
WelcomeState.prototype.update = function (game, dt) {
};
WelcomeState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="30px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="center";
ctx.textAlign="center";
ctx.fillText("Space Invaders", game.width / 2, game.height/2 - 40);
ctx.font="16px Arial";
ctx.fillText("Press 'Space' to start.", game.width / 2, game.height/2);
};
WelcomeState.prototype.keyDown = function(game, keyCode) {
if(keyCode == 32) /*space*/ {
// Space starts the game.
game.level = 1;
game.score = 0;
game.lives = 3;
game.moveToState(new LevelIntroState(game.level));
}
};
function GameOverState() {
}
GameOverState.prototype.update = function(game, dt) {
};
GameOverState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="30px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="center";
ctx.textAlign="center";
ctx.fillText("Game Over!", game.width / 2, game.height/2 - 40);
ctx.font="16px Arial";
ctx.fillText("You scored " + game.score + " and got to level " + game.level, game.width / 2, game.height/2);
ctx.font="16px Arial";
ctx.fillText("Press 'Space' to play again.", game.width / 2, game.height/2 + 40);
};
GameOverState.prototype.keyDown = function(game, keyCode) {
if(keyCode == 32) /*space*/ {
// Space restarts the game.
game.lives = 3;
game.score = 0;
game.level = 1;
game.moveToState(new LevelIntroState(1));
}
};
// Create a PlayState with the game config and the level you are on.
function PlayState(config, level) {
this.config = config;
this.level = level;
// Game state.
this.invaderCurrentVelocity = 10;
this.invaderCurrentDropDistance = 0;
this.invadersAreDropping = false;
this.lastRocketTime = null;
// Game entities.
this.ship = null;
this.invaders = [];
this.rockets = [];
this.bombs = [];
}
PlayState.prototype.enter = function(game) {
// Create the ship.
this.ship = new Ship(game.width / 2, game.gameBounds.bottom);
// Setup initial state.
this.invaderCurrentVelocity = 10;
this.invaderCurrentDropDistance = 0;
this.invadersAreDropping = false;
// Set the ship speed for this level, as well as invader params.
var levelMultiplier = this.level * this.config.levelDifficultyMultiplier;
this.shipSpeed = this.config.shipSpeed;
this.invaderInitialVelocity = this.config.invaderInitialVelocity + (levelMultiplier * this.config.invaderInitialVelocity);
this.bombRate = this.config.bombRate + (levelMultiplier * this.config.bombRate);
this.bombMinVelocity = this.config.bombMinVelocity + (levelMultiplier * this.config.bombMinVelocity);
this.bombMaxVelocity = this.config.bombMaxVelocity + (levelMultiplier * this.config.bombMaxVelocity);
// Create the invaders.
var ranks = this.config.invaderRanks;
var files = this.config.invaderFiles;
var invaders = [];
for(var rank = 0; rank < ranks; rank++){
for(var file = 0; file < files; file++) {
invaders.push(new Invader(
(game.width / 2) + ((files/2 - file) * 200 / files),
(game.gameBounds.top + rank * 20),
rank, file, 'Invader'));
}
}
this.invaders = invaders;
this.invaderCurrentVelocity = this.invaderInitialVelocity;
this.invaderVelocity = {x: -this.invaderInitialVelocity, y:0};
this.invaderNextVelocity = null;
};
PlayState.prototype.update = function(game, dt) {
// If the left or right arrow keys are pressed, move
// the ship. Check this on ticks rather than via a keydown
// event for smooth movement, otherwise the ship would move
// more like a text editor caret.
if(game.pressedKeys[37]) {
this.ship.x -= this.shipSpeed * dt;
}
if(game.pressedKeys[39]) {
this.ship.x += this.shipSpeed * dt;
}
if(game.pressedKeys[32]) {
this.fireRocket();
}
// Keep the ship in bounds.
if(this.ship.x < game.gameBounds.left) {
this.ship.x = game.gameBounds.left;
}
if(this.ship.x > game.gameBounds.right) {
this.ship.x = game.gameBounds.right;
}
// Move each bomb.
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
bomb.y += dt * bomb.velocity;
// If the rocket has gone off the screen remove it.
if(bomb.y > this.height) {
this.bombs.splice(i--, 1);
}
}
// Move each rocket.
for(i=0; i<this.rockets.length; i++) {
var rocket = this.rockets[i];
rocket.y -= dt * rocket.velocity;
// If the rocket has gone off the screen remove it.
if(rocket.y < 0) {
this.rockets.splice(i--, 1);
}
}
// Move the invaders.
var hitLeft = false, hitRight = false;
for(i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
var newx = invader.x + this.invaderVelocity.x * dt;
var newy = invader.y + this.invaderVelocity.y * dt;
if(hitLeft == false && newx < game.gameBounds.left) {
hitLeft = true;
}
else if(hitRight == false && newx > game.gameBounds.right) {
hitRight = true;
}
}
// Check for rocket/invader collisions.
for(i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
var bang = false;
for(var j=0; j<this.rockets.length; j++){
var rocket = this.rockets[j];
if(rocket.x >= (invader.x - invader.width/2) && rocket.x <= (invader.x + invader.width/2) &&
rocket.y >= (invader.y - invader.height/2) && rocket.y <= (invader.y + invader.height/2)) {
// Remove the rocket, set 'bang' so we don't process
// this rocket again.
this.rockets.splice(j--, 1);
bang = true;
game.score += this.config.pointsPerInvader;
break;
}
}
if(bang) {
this.invaders.splice(i--, 1);
}
}
// Find all of the front rank invaders.
var frontRankInvaders = {};
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
// If we have no invader for game file, or the invader
// for game file is futher behind, set the front
// rank invader to game one.
if(!frontRankInvaders[invader.file] || frontRankInvaders[invader.file].rank < invader.rank) {
frontRankInvaders[invader.file] = invader;
}
}
// Give each front rank invader a chance to drop a bomb.
for(var i=0; i<this.config.invaderFiles; i++) {
var invader = frontRankInvaders[i];
if(!invader) continue;
var chance = this.bombRate * dt;
if(chance > Math.random()) {
// Fire!
this.bombs.push(new Bomb(invader.x, invader.y + invader.height / 2,
this.bombMinVelocity + Math.random()*(this.bombMaxVelocity - this.bombMinVelocity)));
}
}
// Check for bomb/ship collisions.
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
if(bomb.x >= (this.ship.x - this.ship.width/2) && bomb.x <= (this.ship.x + this.ship.width/2) &&
bomb.y >= (this.ship.y - this.ship.height/2) && bomb.y <= (this.ship.y + this.ship.height/2)) {
this.bombs.splice(i--, 1);
game.lives--;
}
}
// Check for invader/ship collisions.
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
if((invader.x + invader.width/2) > (this.ship.x - this.ship.width/2) &&
(invader.x - invader.width/2) < (this.ship.x + this.ship.width/2) &&
(invader.y + invader.height/2) > (this.ship.y - this.ship.height/2) &&
(invader.y - invader.height/2) < (this.ship.y + this.ship.height/2)) {
// Dead by collision!
game.lives = 0;
}
}
// Check for failure
if(game.lives <= 0) {
game.moveToState(new GameOverState());
}
// Check for victory
if(this.invaders.length === 0) {
game.score += this.level * 50;
game.level += 1;
game.moveToState(new LevelIntroState(game.level));
}
};
PlayState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
// Draw ship.
ctx.fillStyle = '#999999';
ctx.fillRect(this.ship.x - (this.ship.width / 2), this.ship.y - (this.ship.height / 2), this.ship.width, this.ship.height);
// Draw invaders.
ctx.fillStyle = '#006600';
for(var i=0; i<this.invaders.length; i++) {
var invader = this.invaders[i];
ctx.fillRect(invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height);
}
// Draw bombs.
ctx.fillStyle = '#ff5555';
for(var i=0; i<this.bombs.length; i++) {
var bomb = this.bombs[i];
ctx.fillRect(bomb.x - 2, bomb.y - 2, 4, 4);
}
// Draw rockets.
ctx.fillStyle = '#ff0000';
for(var i=0; i<this.rockets.length; i++) {
var rocket = this.rockets[i];
ctx.fillRect(rocket.x, rocket.y - 2, 1, 4);
}
// Draw info.
var textYpos = game.gameBounds.bottom + ((game.height - game.gameBounds.bottom) / 2) + 14/2;
ctx.font="14px Arial";
ctx.fillStyle = '#ffffff';
var info = "Lives: " + game.lives;
ctx.textAlign = "left";
ctx.fillText(info, game.gameBounds.left, textYpos);
info = "Score: " + game.score + ", Level: " + game.level;
ctx.textAlign = "right";
ctx.fillText(info, game.gameBounds.right, textYpos);
// If we're in debug mode, draw bounds.
if(this.config.debugMode) {
ctx.strokeStyle = '#ff0000';
ctx.strokeRect(0,0,game.width, game.height);
ctx.strokeRect(game.gameBounds.left, game.gameBounds.top,
game.gameBounds.right - game.gameBounds.left,
game.gameBounds.bottom - game.gameBounds.top);
}
};
PlayState.prototype.keyDown = function(game, keyCode) {
if(keyCode == 32) {
// Fire!
this.fireRocket();
}
if(keyCode == 80) {
// Push the pause state.
game.pushState(new PauseState());
}
};
PlayState.prototype.keyUp = function(game, keyCode) {
};
PlayState.prototype.fireRocket = function() {
// If we have no last rocket time, or the last rocket time
// is older than the max rocket rate, we can fire.
if(this.lastRocketTime === null || ((new Date()).valueOf() - this.lastRocketTime) > (1000 / this.config.rocketMaxFireRate))
{
// Add a rocket.
this.rockets.push(new Rocket(this.ship.x, this.ship.y - 12, this.config.rocketVelocity));
this.lastRocketTime = (new Date()).valueOf();
}
};
function PauseState() {
}
PauseState.prototype.keyDown = function(game, keyCode) {
if(keyCode == 80) {
// Pop the pause state.
game.popState();
}
};
PauseState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="14px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("Paused", game.width / 2, game.height/2);
return;
};
/*
Level Intro State
The Level Intro state shows a 'Level X' message and
a countdown for the level.
*/
function LevelIntroState(level) {
this.level = level;
this.countdownMessage = "3";
}
LevelIntroState.prototype.update = function(game, dt) {
// Update the countdown.
if(this.countdown === undefined) {
this.countdown = 3; // countdown from 3 secs
}
this.countdown -= dt;
if(this.countdown < 2) {
this.countdownMessage = "2";
}
if(this.countdown < 1) {
this.countdownMessage = "1";
}
if(this.countdown <= 0) {
// Move to the next level, popping this state.
game.moveToState(new PlayState(game.config, this.level));
}
};
LevelIntroState.prototype.draw = function(game, dt, ctx) {
// Clear the background.
ctx.clearRect(0, 0, game.width, game.height);
ctx.font="36px Arial";
ctx.fillStyle = '#ffffff';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("Level " + this.level, game.width / 2, game.height/2);
ctx.font="24px Arial";
ctx.fillText("Ready in " + this.countdownMessage, game.width / 2, game.height/2 + 36);
return;
};
/*
Ship
The ship has a position and that's about it.
*/
function Ship(x, y) {
this.x = x;
this.y = y;
this.width = 20;
this.height = 16;
}
/*
Rocket
Fired by the ship, they've got a position, velocity and state.
*/
function Rocket(x, y, velocity) {
this.x = x;
this.y = y;
this.velocity = velocity;
}
/*
Bomb
Dropped by invaders, they've got position, velocity.
*/
function Bomb(x, y, velocity) {
this.x = x;
this.y = y;
this.velocity = velocity;
}
/*
Invader
Invader's have position, type, rank/file and that's about it.
*/
function Invader(x, y, rank, file, type) {
this.x = x;
this.y = y;
this.rank = rank;
this.file = file;
this.type = type;
this.width = 18;
this.height = 14;
}
/*
Game State
A Game State is simply an update and draw proc.
When a game is in the state, the update and draw procs are
called, with a dt value (dt is delta time, i.e. the number)
of seconds to update or draw).
*/
function GameState(updateProc, drawProc, keyDown, keyUp, enter, leave) {
this.updateProc = updateProc;
this.drawProc = drawProc;
this.keyDown = keyDown;
this.keyUp = keyUp;
this.enter = enter;
this.leave = leave;
}
答案 0 :(得分：1)
解决此问题的一种方法是添加一个实际设置计时器的附加变量，这样用户只能触发每x个帧数。
所以在这一行下：
var lasers = [];
添加此变量：
var framesToNextFire = 0;
然后改变if（keyboard [32]）{条件到这个：
if(keyboard[32]) {
// only fire one laser
if(!keyboard.fired) {
if ( framesToNextFire <=0 ) {
fireLaser();
keyboard.fired = true;
framesToNextFire = 60;
}
} else {
keyboard.fired = false;
}
}
最后在上述条件之后添加以下行：
framesToNextFire = framesToNextFire - 1;
基本上这样做只允许它每60帧发射一次（所以当前代码只有一秒）。如果这个时间太长，你可以在条件内改变60到30，每隔0.5秒做一次。这样，即使用户按住空格键，他们也只能以固定的速率开火。
答案 1 :(得分：1)
您可以在keydown
keyup上触发激光
请参阅下面的代码段。
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var spaceship = {
x: 100,
y: 300,
width: 32,
height: 32,
counter: 0
};
var keyboard = {};
var lasers = [];
function drawBackground() {
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);
}
function gameLoop() {
// update and draw functions called here
updateSpaceship();
updateLasers();
drawBackground();
drawSpaceship();
drawLasers();
}
addKeyboardEvents();
setInterval(gameLoop, 1000 / 60);
function drawSpaceship() {
context.fillStyle = "white";
context.fillRect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);
}
function addEvent(node, name, func) {
if(node.addEventListener) {
node.addEventListener(name, func, false);
} else if(node.attachEvent) {
// handle Microsoft browsers too
node.attachEvent(name, func);
}
}
function updateSpaceship() {
// move left
if(keyboard[37]) {
spaceship.x -= 10;
if(spaceship.x < 0) {
spaceship.x = 0;
}
}
// move right
if(keyboard[39]) {
spaceship.x += 10;
var right = canvas.width - spaceship.width;
if(spaceship.x > right) {
spaceship.x = right;
}
}
}
function addKeyboardEvents() {
addEvent(document, "keydown", function(e) {
if(e.keyCode == 32){
keyboard[e.keyCode] = false;
} else {keyboard[e.keyCode] = true;}
});
addEvent(document, "keyup", function(e) {
if(e.keyCode == 32){
keyboard[e.keyCode] = false;
fireLaser();
} else {keyboard[e.keyCode] = false;}
});
}
function drawLasers() {
context.fillStyle = "white";
for(var iter in lasers) {
var laser = lasers[iter];
context.fillRect(laser.x, laser.y, laser.width, laser.height);
}
}
function updateLasers() {
// move the laser
for(var iter in lasers) {
var laser = lasers[iter];
laser.y -= 2;
laser.counter++;
}
// remove lasers that are off the screen
lasers = lasers.filter(function(laser) {
return laser.y > 0;
});
}
function fireLaser() {
lasers.push ({
x: spaceship.x + 20, //offset
y: spaceship.y - 10,
width: 5,
height: 30
});
//playSound('laser');
}
function updateSpaceship() {
// move left
if(keyboard[37]) {
spaceship.x -= 10;
if(spaceship.x < 0) {
spaceship.x = 0;
}
}
// move right
if(keyboard[39]) {
spaceship.x += 10;
var right = canvas.width - spaceship.width;
if(spaceship.x > right) {
spaceship.x = right;
}
}
if(keyboard[32]) {
// only fire one laser
if(!keyboard.fired) {
fireLaser();
keyboard.fired = true;
} else {
keyboard.fired = false;
}
}
}#main {
width: 61em;
max-width: 100%;
*zoom: 1;
margin: auto;
}
#game {
margin: auto;
display: block;
border: 1px solid #ccc;
}<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Strawberry Invaders</title>
<meta name="description" content="Strawberry Invaders">
<meta name="author" content="Brandon Lowdermilk">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div id="main" role="main">
<canvas id="game" width="600" height="400"></canvas>
</div>
<footer>
</footer>
<script src="js/strawberryinvaders.js"></script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>