html5游戏判断超出边界,HTML5游戏 - 散步边界问题

落日映苍穹つ 2022-10-05 12:47 175阅读 0赞

我正在制作一个自顶向下的射手，基本上角色始于屏幕中间，矩形内(安全区域)。角色不是静态的，场景是。他可以在安全区内走动。一旦角色走出这个区域，静态画面就会切换......角色是静态的，场景正在他身边移动。HTML5游戏 - 散步边界问题

唯一的问题是，我不能走回安全区域，让我的静力学再次切换。

所以我永远卡在区外。我所做的只是检查我的角色位置是否在某个值内(这是正确的)，如果他不在，那么我的KeyControls会影响地图而不是角色。

所以这是我的边界(安全区)检查：

//Walking Window Boundaries

var boundarySizeX = 400;

var boundarySizeY = 200;

ctxWalkBoundary.fillStyle = "grey";

ctxWalkBoundary.fillRect(gameWidth/2 - boundarySizeX/2, gameHeight/2 - boundarySizeY/2, boundarySizeX, boundarySizeY);

ctxWalkBoundary.clearRect((gameWidth/2 - boundarySizeX/2) + 2, (gameHeight/2 - boundarySizeY/2) + 2, (boundarySizeX) - 4, (boundarySizeY) -4);

var paddingLeft = (gameWidth - boundarySizeX)/2;

var paddingRight = gameWidth - ((gameWidth - boundarySizeX)/2) - this.charWidth;

var paddingTop = (gameHeight - boundarySizeY)/2;

var paddingBottom = gameHeight - ((gameHeight - boundarySizeY)/2) - this.charHeight;

var paddingY = (gameHeight - boundarySizeY)/2;

if(this.drawX > paddingLeft && this.drawX < paddingRight && this.drawY > paddingTop && this.drawY < paddingBottom)\{

inBoundary = true;

\}

else\{

inBoundary = false;

console.debug("Out Of Boundary!");

\}

这是我KeyChecker：

//UP

if(this.isUpKey)\{

//Character movement

if(inBoundary)\{

this.drawX = this.drawX + this.speed \* Math.cos((this.characterRotation));

this.drawY = this.drawY + this.speed \* Math.sin((this.characterRotation));

\}

else\{

mapPositionX = mapPositionX - this.speed \* Math.cos((this.characterRotation));

mapPositionY = mapPositionY - this.speed \* Math.sin((this.characterRotation));

\}

我的性格始终面临着我的鼠标(旋转)。所以每次用户按下W或Up时，角色将始终走向鼠标位置。

任何想法，我可以回到该区域？

\----- -----更新

我想我需要以某种方式检查，如果我还在安全区朝外 - 如果不是，那么反向他静。

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 手游制作,HTML5游戏制作（九）——炮塔游戏

本章学习创建一个炮台类游戏，通过一个完成的游戏案例，来理解：平铺背景、物理属性、行为的含义，以及进一步熟悉界面视图的功能，掌握基本的操作技巧。【炮塔游戏】游戏功能描

蔚落/ 2022年10月08日 00:40/ 0 赞/ 243 阅读

相关颜色通行html5小游戏,html

JavaScript console.clear() // Utility Functions --> // This func. gets a random float

绝地灬酷狼/ 2022年10月05日 13:52/ 0 赞/ 178 阅读

相关 html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏

CSS 语言： CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Covered+By+You

た入场券/ 2022年10月05日 12:50/ 0 赞/ 224 阅读

相关 html5游戏判断超出边界,HTML5游戏 - 散步边界问题

我正在制作一个自顶向下的射手，基本上角色始于屏幕中间，矩形内(安全区域)。角色不是静态的，场景是。他可以在安全区内走动。一旦角色走出这个区域，静态画面就会切换......角色是

落日映苍穹つ/ 2022年10月05日 12:47/ 0 赞/ 176 阅读

相关 html扑克牌游戏源码,html5扑克牌消除小游戏源码

特效描述：html5扑克牌消除小游戏源码。html5扑克牌消除小游戏源码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 $(function()\

迷南。/ 2022年10月05日 12:44/ 0 赞/ 189 阅读

相关 HTML5游戏前端开发秘籍

<table style="word-wrap:break-word; margin:0px; padding:0px; empty-cells:show; border-co

我不是女神ヾ/ 2022年08月27日 13:43/ 0 赞/ 226 阅读

相关 lufylegend HTML5游戏引擎

http://lufylegend.com/ HTML5游戏引擎 lufylegend是一个HTML5开源引擎，它实现了利用仿ActionScript3.0的语法进

╰半橙微兮°/ 2022年08月24日 06:11/ 0 赞/ 175 阅读

相关收藏几个HTML5游戏引擎

> > > > 国内： > > Cocos 2d-x [http://www.cocos.com/][http_www.co

向右看齐/ 2022年08月17日 15:14/ 0 赞/ 210 阅读

相关 HTML5游戏，五子棋

[![de9af456-9a67-4851-8551-f1ecf175b8b4.png][]][de9af456-9a67-4851-8551-f1ecf175b8b4.png

心已赠人/ 2022年08月12日 10:28/ 0 赞/ 205 阅读

相关开发 HTML5 小游戏

[Html5小游戏][Html5] 在介绍小游戏之前，先看一个框架 [Phaser][]。 `Phaser` 框架是一个快速、免费且开源的 `HTML5` 游戏开发框架，它

分手后的思念是犯贱/ 2022年01月20日 01:49/ 0 赞/ 339 阅读