Question

这是我在'游戏'中玩家对象的更新功能。我想将播放器保留在画布内，虽然这段代码有些作用，但播放器可以在画布的顶部和左侧中途交叉。为什么会发生这种情况？我该如何解决？

update()
    {
        if (keystate[LeftArrow] || keystate[AKey]) this.x -= 5;
        if (keystate[RightArrow] || keystate[DKey]) this.x += 5;
        if (keystate[UpArrow] || keystate[WKey]) this.y -= 5;
        if (keystate[DownArrow] || keystate[SKey]) this.y += 5;
        this.x = Math.max(Math.min(this.x, cvs.width - this.diameter), 0);
        this.y = Math.max(Math.min(this.y, cvs.height - this.diameter), 0);
    },

编辑：这是JSBin link。

Answer 1

您的播放器超出边界一半，因为播放器的坐标位于圆圈的中心。当其中任何一个为零时，意味着玩家圈子的中心将沿着一条轴。

相反，你应该测试一下。

if (player.x - player.radius < 0) { player.x = player.radius; }

＆＃13;

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: black;
			}
			
			canvas {
				display: block;
				margin-top: 30px;
				margin-left: auto;
				margin-right: auto;
				border: solid 1px white;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script type="application/javascript">
		
			void function() {
			
				"use strict";
				
				var canvasWidth = 180;
				var canvasHeight = 160;

				function Player(x,y,r) {
					this.x = x || 0;
					this.y = y || 0;
					this.r = r || 0;
					this.up = false;
					this.down = false;
					this.left = false;
					this.right = false;
				}
				
				Player.prototype = {
					MOVE_SPEED: 3.0,
				
					tick: function() {
						// Movement updates
						if (this.up) { this.y -= this.MOVE_SPEED; }
						if (this.down) { this.y += this.MOVE_SPEED; }
						if (this.left) { this.x -= this.MOVE_SPEED; }
						if (this.right) { this.x += this.MOVE_SPEED; }
						
						// Keep within canvas bounds
						if (this.x - this.r < 0.0) {
							this.x = this.r;
						}
						
						if (this.x + this.r > canvasWidth) {
							this.x = canvasWidth - this.r;
						}
						
						if (this.y - this.r < 0.0) {
							this.y = this.r;
						}
						
						if (this.y + this.r > canvasHeight) {
							this.y = canvasHeight - this.r;
						}
					},
					
					render: function(ctx) {
						ctx.fillStyle = "darkred";
						ctx.strokeStyle = "black";
						ctx.lineWidth = 2;
						ctx.beginPath();
						ctx.moveTo(this.x + this.r,this.y);
						ctx.arc(this.x,this.y,this.r,0.0,2.0 * Math.PI,false);
						ctx.fill();
						ctx.stroke();
					}
				};
				
				var canvas = null;
				var ctx = null;
				var player = null;
				
				onload = function() {
					canvas = document.getElementById("canvas");
					canvas.width = canvasWidth;
					canvas.height = canvasHeight;
					ctx = canvas.getContext("2d");
					player = new Player(90,80,10);
					
					loop();
				}
				
				onkeydown = function(e) {
					switch(e.key.toLowerCase()) {
						case "w": player.up = true; break;
						case "s": player.down = true; break;
						case "a": player.left = true; break;
						case "d": player.right = true; break;
					}
				}
				
				onkeyup = function(e) {
					switch(e.key.toLowerCase()) {
						case "w": player.up = false; break;
						case "s": player.down = false; break;
						case "a": player.left = false; break;
						case "d": player.right = false; break;
					}
				}
				
				function loop() {
					// Tick
					player.tick();
					
					// Render
					ctx.fillStyle = "gray";
					ctx.fillRect(0,0,canvasWidth,canvasHeight);
					
					player.render(ctx);
					
					//
					requestAnimationFrame(loop);
				}
			
			}();
		
		</script>
	</body>
</html>

＆＃13;

如何将对象保存在html5画布中？

1 个答案: