HTML5画布游戏静态实体元素
Posted
技术标签:
【中文标题】HTML5画布游戏静态实体元素【英文标题】：HTML5 canvas game static solid elements 【发布时间】：2013-06-29 18:08:42 【问题描述】：我正在用easeljs 编写一个画布游戏。在这个项目中几乎所有东西都正常工作，唯一的问题是我无法将静态对象添加到该字段。
这是我的演示链接：http://insidejs.com/game/
我不想用购物车进入彩色区域。玩家应该绕过这些区域。这个游戏说明了我需要做什么。：http://www.kokogames.com/free-games/91/racing-games/138/e-racer.htm 谢谢。
我的项目：
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="tr"><!--<![endif]-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Game</title>
<!-- css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/screen.css" rel="stylesheet" type="text/css" />
<!-- css -->
<!-- javascript -->
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/easeljs-0.6.1.min.js"></script>
<script type="text/javascript">
var CANVAS, STAGE, Shopping, GAME;
$(function ()
window.Shopping=
Game:
;
GAME = Shopping.Game;
GAME = new Application();
CANVAS = document.getElementById("game");
STAGE = new createjs.Stage(CANVAS);
GAME.init();
);
var Application = function ()
;
Application.prototype =
vehicle: null,
vehicleImg: new Image(),
map: null,
mapImg: new Image(),
TURN_FACTOR: 3,
MAX_THRUST: 1,
MAX_VELOCITY: 10,
KEYCODE_UP: 38,
KEYCODE_LEFT: 37,
KEYCODE_RIGHT: 39,
KEYCODE_DOWN: 40,
RIGHT_KEY: false,
LEFT_KEY: false,
UP_KEY: false,
DOWN_KEY: false,
map: null,
init: function ()
GAME.mapImg.src = "assets/images/map.jpg";
GAME.mapImg.name = 'map';
GAME.mapImg.onload = GAME.loadImage();
GAME.vehicleImg.src = "assets/images/vehicle.png";
GAME.vehicleImg.name = 'vehicle';
GAME.vehicleImg.onload = GAME.loadImage();
if (!createjs.Ticker.hasEventListener("tick"))
createjs.Ticker.addEventListener("tick", GAME.tick);
$(document).keydown(GAME.handleKeyDown);
$(document).keyup(GAME.handleKeyUp);
,
loadImage: function ()
GAME.vehicle = new createjs.Bitmap(GAME.vehicleImg);
GAME.vehicle.x = CANVAS.width / 2;
GAME.vehicle.y = CANVAS.height / 2;
GAME.vehicle.width = 100;
GAME.vehicle.height = 69;
GAME.vehicle.regX = GAME.vehicle.width / 2;
GAME.vehicle.regY = GAME.vehicle.height / 2;
GAME.map = new createjs.Bitmap(GAME.mapImg);
GAME.map.scaleX = 1;
GAME.map.scaleY = 1;
GAME.map.width = 3000;
GAME.map.height = 2000;
GAME.map.regX = GAME.map.width / 2;
GAME.map.regY = GAME.map.height / 2;
GAME.map.x = CANVAS.width / 2;
GAME.map.y = CANVAS.height / 2 - 300;
GAME.map.speed = 0;
GAME.map.vX = 0;
GAME.map.vY = 0;
STAGE.addChild(GAME.map);
STAGE.addChild(GAME.vehicle);
STAGE.update();
,
//game listener
tick: function (event)
if (GAME.LEFT_KEY)
GAME.vehicle.rotation -= GAME.TURN_FACTOR;
if (GAME.RIGHT_KEY)
GAME.vehicle.rotation += GAME.TURN_FACTOR;
if (GAME.UP_KEY)
GAME.accelarate();
if (GAME.LEFT_KEY)
GAME.vehicle.rotation -= 5;
if (GAME.RIGHT_KEY)
GAME.vehicle.rotation += 5;
if (GAME.DOWN_KEY)
GAME.decelerate();
if (GAME.LEFT_KEY)
GAME.vehicle.rotation -= 5;
if (GAME.RIGHT_KEY)
GAME.vehicle.rotation += 5;
STAGE.update(event);
,
handleKeyDown: function (e)
if (!e)
var e = window.event;
switch (e.keyCode)
case GAME.KEYCODE_LEFT:
GAME.LEFT_KEY = true;
break;
case GAME.KEYCODE_RIGHT:
GAME.RIGHT_KEY = true;
break;
case GAME.KEYCODE_UP:
e.preventDefault();
GAME.UP_KEY = true;
break;
case GAME.KEYCODE_DOWN:
e.preventDefault();
GAME.DOWN_KEY = true;
break;
,
handleKeyUp: function (e)
if (!e)
var e = window.event;
switch (e.keyCode)
case GAME.KEYCODE_LEFT:
GAME.LEFT_KEY = false;
break;
case GAME.KEYCODE_RIGHT:
GAME.RIGHT_KEY = false;
break;
case GAME.KEYCODE_UP:
GAME.UP_KEY = false;
break;
case GAME.KEYCODE_DOWN:
GAME.DOWN_KEY = false;
break;
,
accelarate: function ()
var angle = GAME.vehicle.rotation;
if (GAME.LEFT_KEY)
angle -= 5;
if (GAME.RIGHT_KEY)
angle += 5;
GAME.map.vX -= Math.cos(angle * Math.PI / 180) * 3;
GAME.map.vY -= Math.sin(angle * Math.PI / 180) * 3;
GAME.map.vX = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vX));
GAME.map.vY = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vY));
GAME.map.x += GAME.map.vX;
GAME.map.y += GAME.map.vY;
,
decelerate: function ()
var angle = GAME.vehicle.rotation;
if (GAME.LEFT_KEY)
angle -= 5;
if (GAME.RIGHT_KEY)
angle += 5;
GAME.map.vX += Math.cos(angle * Math.PI / 180) * 3;
GAME.map.vY += Math.sin(angle * Math.PI / 180) * 3;
GAME.map.vX = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vX));
GAME.map.vY = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vY));
GAME.map.x += GAME.map.vX;
GAME.map.y += GAME.map.vY;
//class end
;
</script>
<!-- javascript -->
</head>
<body>
<div id="page">
<canvas id="game" ></canvas>
</div>
</body>
</html>
【问题讨论】：
你想要的是碰撞检测？ 是的，我想检测碰撞并且购物车没有进入彩色区域。 我不认为easeljs包含物体碰撞检测功能。在我自己的游戏中，我自己实现了它。 github.com/olsn/Collision-Detection-for-EaselJS @WiredPrairie 不幸的是，你建议的碰撞检测在这里不起作用，因为他的地图是一张大的实心 jpg 【参考方案1】：要为您的游戏进行碰撞检测，您需要对您的项目进行一些更改： 目前您有一个大 JPG 作为地图，如果您尝试让对象与其他对象发生碰撞，这不是一个好主意。
1) 如果您愿意拆分大 JPG 地图（可能是最快的可接受解决方案）： 您可以使用一个大的灰色 JPG 作为地板，并在该地板的顶部放置单个绿色位图.然后您可以使用@WiredPrairie (https://github.com/olsn/Collision-Detection-for-EaselJS) 建议的碰撞检测 - 以这种方式进行碰撞检查大约需要 3-4 行代码（+拆分当前 map.jpg 的工作）。
2) 如果您想将该 JPG 保留为地图： 我建议您为绿色区域创建自定义矩形，并检查购物车是否在这样的矩形内的每一帧。另一种选择是实现像 Box2D 这样的物理库（我知道，这需要一些时间才能进入 Box2D 或其他库，我猜你正在寻找一个快速的解决方案，但相信我：这将是值得的它）
作为一个不相关的提示：对于像你这样的项目，真的值得看看 Box2D 或其他物理引擎，一旦你掌握了它的工作原理，使用物理库真的很有帮助;-)
【讨论】：
以上是关于HTML5画布游戏静态实体元素的主要内容，如果未能解决你的问题，请参考以下文章