向 JavaScript 平台游戏添加按钮答案

【问题标题】：Adding buttons to a JavaScript platform game向 JavaScript 平台游戏添加按钮
【发布时间】：2018-07-21 22:26:21
【问题描述】：

我制作了一个 javascript 平台游戏，玩家可以使用它向左移动、向右移动或跳跃键盘上的箭头键。我希望能够使用 javascript 按钮来执行此操作我做了而不是键盘箭头键。

这些是我的 javascript 按钮。

<button id="left" type="button">Left</button>
<button id="up" type="button">Jump</button>
<button id="right" type="button">Right</button>

这是我未经编辑的 javascript 代码，它使用它使角色可以跳跃，或者使用键盘箭头键向左或向右移动。

var playerXSpeed = 7;
var gravity = 30;
var jumpSpeed = 17;


Player.prototype.update = function(time, state, keys) {
  let xSpeed = 0;
  if (keys.ArrowLeft) xSpeed -= playerXSpeed;
  if (keys.ArrowRight) xSpeed += playerXSpeed;
  let pos = this.pos;
  let movedX = pos.plus(new Vec(xSpeed * time, 0));
  if (!state.level.touches(movedX, this.size, "wall")) {
    pos = movedX;
  }

  let ySpeed = this.speed.y + time * gravity;
  let movedY = pos.plus(new Vec(0, ySpeed * time));
  if (!state.level.touches(movedY, this.size, "wall")) {
    pos = movedY;
  } else if (keys.ArrowUp && ySpeed > 0) {
    ySpeed = -jumpSpeed;
  } else {
    ySpeed = 0;
  }
  return new Player(pos, new Vec(xSpeed, ySpeed));
};

这是检查箭头键是向上还是向下的代码部分。如果箭头键向上，则角色不会移动。如果它们被按住，那么角色会继续移动，直到松开按键才会停止。我知道我必须做更多的事情，以便它与我的 javascript 按钮交互，但我不知道该怎么做。

function trackKeys(keys) {
  let down = Object.create(null);
  function track(event) {
    if (keys.includes(event.key)) {
      down[event.key] = event.type == "keydown";
      event.preventDefault();
    }
  }
  window.addEventListener("keydown", track);
  window.addEventListener("keyup", track);
  return down;
}

var arrowKeys =
  trackKeys(["ArrowLeft", "ArrowRight", "ArrowUp"]);

【问题讨论】：

标签： javascript html css button 2d-games

【解决方案1】：

您可以通过将事件侦听器添加到按钮的onmousedown 和onmouseup 事件中来相当轻松地添加这些控件。

您还应该避免在您的player.update() 中使用new 创建新对象，因为浏览器会搜索更多内存并且垃圾收集器会花时间清理旧对象，这会很慢。

下面是一个片段，应该做你所追求的。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: black;
			}
			
			canvas {
				display: block;
				margin: auto;
				margin-bottom: 15px;
				border: solid 1px white;
				border-radius: 10px;
			}
			
			div {
				display: block;
				margin: auto;
				width: 170px;
				height: 30px;
			}
			
			button {
				width: 75px;
				height: 30px;
				text-align: center;
				font:-style: Lucida Console;
				font-size: 20px;
				border: solid 1px white;
				border-radius: 10px;
				
				color: #FFFFFFFF;
				background-color: #333333FF;
				transition-duration: 0.1s;
			}
			
			button:hover {
				background-color: #777777FF;
			}
			
			button:active {
				background-color: #AAAAAAFF;
			}
			
			.top {
				display: block;
				margin: auto;
				margin-bottom: 10px;
			}
			
			.bottom {
				display: inline-block;
				margin: auto;
				margin-left: 5px;
				margin-right: 1px;
			}
			
		</style>
	</head>
	
	<body>
		<canvas id="canvas"></canvas>
		<button id="jumpButton" class="top">↑</button>
		<div>
			<button id="leftButton" class="bottom">←</button>
			<button id="rightButton" class="bottom">→</button>
		</div>
		<script type="application/javascript">
		
		void function() {
		
			"use strict";
			
			// Variables
			var canvasWidth = 180;
			var canvasHeight = 160;
			var canvas = null;
			var ctx = null;
			var player = null;
			
			var jumpButton = null;
			var leftButton = null;
			var rightButton = null;
			
			// Classes
			function Player(x,y) {
				// Position
				this.x = x || 0.0; // Using || in JS means use this second value if the first is null or undefined
				this.y = y || 0.0;
				
				// Velocity
				this.dx = 0.0;
				this.dy = 0.0;
				
				// Input
				this.isJumping = false; // Extra boolean to stop the player from jumping in mid-air
				this.isJumpDown = false;
				this.isLeftDown = false;
				this.isRightDown = false;
			}
			
			Player.prototype = {
				WIDTH: 10.0,
				HEIGHT: 20.0,
				
				SIDE_SPEED: 1.0,
				JUMP_SPEED: 4.0,
				FALL_SPEED: 0.2,
			
				tick: function() {
					// Input
					if (this.isLeftDown) {
						this.dx = -this.SIDE_SPEED;
					} else if (this.isRightDown) {
						this.dx = +this.SIDE_SPEED;
					} else {
						this.dx = 0.0;
					}
					
					if (this.isJumpDown && !this.isJumping) {
						this.isJumping = true;
						this.dy = -this.JUMP_SPEED;
					}
					
					// Falling
					if (this.isJumping) {
						this.dy += this.FALL_SPEED;
						
						if (this.y + this.dy > canvasHeight - this.HEIGHT) {
							this.y = canvasHeight - this.HEIGHT;
							this.dy = 0.0;
							this.isJumping = false;
						}
					}
					
					// Left/Right boundaries
					if (this.x < -this.WIDTH) {
						this.x = canvasWidth;
					} else if (this.x > canvasWidth) {
						this.x = -this.WIDTH;
					}
				
					this.x += this.dx;
					this.y += this.dy;
				},
				
				render: function(ctx) {
					ctx.strokeStyle = "black";
					ctx.fillStyle = "darkred";
					ctx.beginPath();
					ctx.rect(this.x,this.y,this.WIDTH,this.HEIGHT);
					ctx.fill();
					ctx.stroke();
				}
			};
			
			// Functions
			
			// Button event listeners
			function onJumpDown(e) {
				player.isJumpDown = true;
			}
			
			function onJumpUp(e) {
				player.isJumpDown = false;
			}
			
			function onLeftDown(e) {
				player.isLeftDown = true;
			}
			
			function onLeftUp(e) {
				player.isLeftDown = false;
			}
			
			function onRightDown(e) {
				player.isRightDown = true;
			}
			
			function onRightUp(e) {
				player.isRightDown = false;
			}
			
			// Game loop
			function loop() {
				// Tick
				player.tick();
				
				// Render
				ctx.fillStyle = "gray";
				ctx.fillRect(0,0,canvasWidth,canvasHeight);
				
				player.render(ctx);
				
				//
				requestAnimationFrame(loop);
			}
			
			// Entry point (this function runs first, window.onload)
			onload = function() {
				canvas = document.getElementById("canvas");
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
				
				ctx = canvas.getContext("2d");
				
				jumpButton = document.getElementById("jumpButton");
				leftButton = document.getElementById("leftButton");
				rightButton = document.getElementById("rightButton");
				
				jumpButton.onmousedown = onJumpDown;
				jumpButton.onmouseup = onJumpUp;
				
				leftButton.onmousedown = onLeftDown;
				leftButton.onmouseup = onLeftUp;
				
				rightButton.onmousedown = onRightDown;
				rightButton.onmouseup = onRightUp;
				
				player = new Player(85.0,140.0);
				
				loop();
			}
		
		}();
		
		</script>
	</body>
</html>

【讨论】：

谢谢。它自己工作。但是我无法让它与我的代码 sn-ps 中的代码一起工作。