不能让两个玩家
[英]Can't Make a Player Two
问题描述
我正在尝试向JavaScript游戏中添加第二个播放器，但是代码无法正常工作。 我需要一些有关如何执行此操作的说明。 第二个玩家不需要花哨，可以使用其他颜色的正方形。 我当前的玩家是绿色方块。 任何信息将对您有所帮助，谢谢。
var myObstacle; (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); function startGame() {} var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), width = 700, height =600, player = { x : 1, y : 7, width : 25, height : 25, speed: 10, velX: 0, velY: 0, jumping: false }, keys = [], friction = .9, gravity = .8; canvas.width = width; canvas.height = height; function update(){ // check keys if (keys[38] || keys[32]) { // up arrow or space if(!player.jumping){ player.jumping = true; player.velY = -player.speed*.1; } } if (keys[39]) { // right arrow if (player.velX < player.speed) { player.velX++; } } if (keys[37]) { // left arrow if (player.velX > -player.speed) { player.velX--; } } player.velX *= friction; player.velY += gravity; player.x += player.velX; player.y += player.velY; if (player.x >= width-player.width) { player.x = width-player.width; } else if (player.x <= 0) { player.x = 0; } if(player.y >= height-player.height){ player.y = height - player.height; player.jumping = false; } ctx.clearRect(0,0,width,height); ctx.fillStyle = "green"; ctx.fillRect(player.x, player.y, player.width, player.height); requestAnimationFrame(update); } document.body.addEventListener("keydown", function(e) { keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function(e) { keys[e.keyCode] = false; }); window.addEventListener("load",function(){ update(); });
<html> <head> <title>Square Stairs™</title> </head> <body bgcolor="#000"> <canvas id="canvas" style="border:3px solid #fff"></canvas> </body> </html>
如果可以的话，请帮助，谢谢。
2 个解决方案
解决方案1
1 2017-05-23 19:28:49
使用一点OOP：
var myObstacle; (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); function Player(color){ this.x = 1; this.y = 7 this.width = 25 this.height= 25 this.speed= 10 this.velX= 0 this.velY= 0 this.jumping= false this.color = color; } function startGame() {} var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), width = 700, height =600, player = new Player('green'), player2 = new Player('red') keys = [], friction = .9, gravity = .8; canvas.width = width; canvas.height = height; function update(){ // check keys if (keys[38] || keys[32]) { // up arrow or space if(!player.jumping){ player.jumping = true; player.velY = -player.speed*.1; } } if (keys[39]) { // right arrow if (player.velX < player.speed) { player.velX++; } } if (keys[37]) { // left arrow if (player.velX > -player.speed) { player.velX--; } } player.velX *= friction; player.velY += gravity; player.x += player.velX; player.y += player.velY; if (player.x >= width-player.width) { player.x = width-player.width; } else if (player.x <= 0) { player.x = 0; } if(player.y >= height-player.height){ player.y = height - player.height; player.jumping = false; } player2.velY += gravity; player2.x += player2.velX; player2.y += player2.velY; if (player2.x >= width-player2.width) { player2.x = width-player2.width; } else if (player2.x <= 0) { player2.x = 0; } if(player2.y >= height-player2.height){ player2.y = height - player2.height; player2.jumping = false; } ctx.clearRect(0,0,width,height); ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); ctx.fillStyle = player2.color; ctx.fillRect(player2.x, player2.y, player2.width, player2.height); requestAnimationFrame(update); } document.body.addEventListener("keydown", function(e) { keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function(e) { keys[e.keyCode] = false; }); window.addEventListener("load",function(){ update(); });
<html> <head> <title>Square Stairs™</title> </head> <body bgcolor="#000"> <canvas id="canvas" style="border:3px solid #fff"></canvas> </body> </html>
解决方案2
1 2017-05-23 20:59:26
好吧，我无法抗拒...我添加了更多的OOP。 因此，现在您可以根据需要添加任意数量的播放器。 重要的区别是颜色和键映射。 我的示例（任意）添加了三个参与者：
var players=[];
players.push(new Player('green', {
32: 'jump',
37: 'left',
38: 'jump',
39: 'right'
}))
players.push(new Player('red', {
56: 'jump',
52: 'left',
54: 'right'
}, width-25))
players.push(new Player('blue', {
87: 'jump',
65: 'left',
68: 'right'
}, (width-25)/2))
var myObstacle; (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); function startGame() {} function Player(color,keymap,x) { this.x = (typeof x === 'undefined') ? 1 : x; this.y = 7; this.width = 25; this.height = 25; this.speed = 10; this.velX = 0; this.velY = 0; this.jumping= false; this.keymap = {} for (let key in keymap) { switch (keymap[key]) { case 'jump': this.keymap[key] = this.jump break; case 'left': this.keymap[key] = this.moveLeft break; case 'right': this.keymap[key] = this.moveRight break; } } this.color = color; } // Player() Player.prototype.jump=function () { if (!this.jumping) { this.jumping = true; this.velY = -this.speed*1.5; } } Player.prototype.moveRight = function () { if (this.velX < this.speed) { this.velX++; } } Player.prototype.moveLeft = function () { if (this.velX > -this.speed) { this.velX--; } } // Globals var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), width = 700, height =600, keys = [], friction = .9, gravity = .8; canvas.width = width; canvas.height = height; // Set up players var players=[]; players.push(new Player('green', { 32: 'jump', 37: 'left', 38: 'jump', 39: 'right' })) players.push(new Player('red', { 56: 'jump', 52: 'left', 54: 'right' }, width-25)) players.push(new Player('blue', { 87: 'jump', 65: 'left', 68: 'right' }, (width-25)/2)) function update() { ctx.clearRect(0,0,width,height); players.forEach(player => { // check player-specific keys for (let i in player.keymap) { if (keys[i] && typeof player.keymap[i] === 'function') player.keymap[i].bind(player)(); } player.velX *= friction; player.velY += gravity; player.x += player.velX; player.y += player.velY; if (player.x >= width-player.width) { player.x = width-player.width; } else if (player.x <= 0) { player.x = 0; } if (player.y >= height-player.height) { player.y = height - player.height; player.jumping = false; } ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); }) // player.forEach requestAnimationFrame(update); } document.body.addEventListener("keydown", function(e) { // console.log(e.keyCode); keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function(e) { keys[e.keyCode] = false; }); window.addEventListener("load",function(){ update(); });
html> <head> <title>Square Stairs™</title> </head> <body bgcolor="#000"> <canvas id="canvas" style="border:3px solid #fff"></canvas> </body> </html>
如何做到这一点，以便程序可以告诉您一号或二号玩家是否赢得了比赛？
[英]How would one make it so that the program can tell you if player one or two have won the game?
如何切换播放器变量以在播放器一和播放器二之间切换？
[英]How can I toggle my player variable to switch between player one and player two?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.