如何解决了解 Javascript 中基于 Tile 的碰撞,用于简单的 2d 射击游戏
我在这个用于大学项目的 Javascript 2d 射击游戏上遇到了很多麻烦。我已经完成了瓷砖地图、玩家精灵、子弹机制,但现在我进入了冲突的部分......而且我不明白如何为此启动任何代码。
我希望我的玩家在平台上,我做了 playerx = map [10] 和 playery = map [9],但是如果我输入更多值,这就是我得到的位置,我知道这不是正确的方法,但我真的迷路了:
我只想了解如何将我的播放器链接到我的图块地图,因为我的播放器没有图块属性?我需要什么变量或控制器才能让它工作?更重要的是,我是否需要更改我已经完成的代码才能使其正常工作??
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var cols = 25;
var rows = 18;
var tileWidth = 32;
var tileHeight = 32;
var tileX = 0;
var tileY = 0;
canvas.width = cols * tileWidth;
canvas.height = rows * tileHeight;
var map = [
467,468,467,499,500,501,282,258,528,528
];
var map467 = new Image();
map467.src = "467_tile.png"
var map468 = new Image();
map468.src = "468_tile.png"
var map499 = new Image();
map499.src = "499_tile.png"
var map500 = new Image();
map500.src = "500_tile.png"
var map501 = new Image();
map501.src = "501_tile.png"
var map528 = new Image();
map528.src = "528_tile.png"
var map258 = new Image();
map258.src = "258_tile.png"
var map282 = new Image();
map282.src = "282_tile.png"
var keys = [];
var player = {
x: map [10],y: map [9],width: 48,height: 48,frameX: 0,frameY: 1,speed: 3,moving: false,movingLeft: false,movingRight: false,jump: false,jumpSpeed:10,jumpLeft: false,jumpRight: false,gravity: 0.5,jumpY: 500,velY: 0,ground: true,groundY: 552,direction: 0,facing: 'right',shot:false
};
var enemy = {
enemyX: 0,enemyY:600-48,enemyWidth:48,enemyHeight:48,enemySpeed: 2,enemyFrameX: 0,enemyFrameY: 0,};
var bullets = [];
var bullet = {
color: '#FFFFFF',width: 4,height: 2,x: 0,y: 0,speed: 3.5,direction: null
}
var enemySprite = new Image();
enemySprite.src = "Sprites/trump_run_sprite.png";
var playerSprite = new Image();
playerSprite.src = "Sprites/sprite_sheet_soldier3.png";
function drawEnemy(img,sX,sY,sW,sH,dX,dY,dW,dH) {
ctx.drawImage(img,dH);
}
function drawSprite(img,dH);
}
函数 drawMap() {
for (var y = 0; y < rows; y++){
for (var x = 0; x<cols; x++) {
switch (map[((y*cols)+x)]){
case 467:
ctx.drawImage(map467,x*tileWidth,y*tileHeight,tileWidth,tileHeight);
break;
case 468:
ctx.drawImage(map468,tileHeight);
break;
case 499:
ctx.drawImage(map499,tileHeight);
break;
case 500:
ctx.drawImage(map500,tileHeight);
break;
case 501:
ctx.drawImage(map501,tileHeight);
break;
case 528:
ctx.drawImage(map528,tileHeight);
break;
case 282:
ctx.drawImage(map282,tileHeight);
break;
case 258:
ctx.drawImage(map258,tileHeight);
break;
}
}
}
}
function animate() { // animation loop
ctx.clearRect(0,canvas.width,canvas.height);
drawMap();
drawEnemy(enemySprite,enemy.enemyWidth * enemy.enemyFrameX,enemy.enemyHeight * enemy.enemyFrameY,enemy.enemyWidth,enemy.enemyHeight,enemy.enemyX,enemy.enemyY,enemy.enemyHeight);
drawSprite(playerSprite,player.width * player.frameX,player.height * player.frameY,player.width,player.height,player.x,player.y,player.height);
movePlayer();
drawBullet();
MoveEnemy();
MovingSprite();
requestAnimationFrame(animate);
}
setTimeout(animate,100);
function movePlayer() {
//Left
if (keys[37] && player.x > 0) {
player.x -= player.speed;
player.frameY = 2;
player.movingLeft = true;
player.movingRight = false;
player.direction =0
player.facing = "left"
}
//Right
if (keys[39] && player.x < canvas.width - player.width) {
player.x += player.speed;
player.frameY = 3;
player.movingRight = true
player.movingLeft = false
player.direction = 1;
player.facing = "right";
}
// UP
if (keys[38]) {
player.jump = true;
player.ground = false;
player.y -= player.jumpSpeed;
player.frameY = 5;
}
// JUMP + GraviTY (BOUNCE EFFECT)
if (player.jump === true) {
player.velY += player.gravity
player.y += player.velY
if (player.y >= canvas.height - player.height && player.jump === true) {
player.y = canvas.height - player.height
player.velY = 0
player.jump = false;
player.ground = true
}
}
}
function MovingSprite() {
// RUN LEFT & RIGHT + IDLE ANIMATION SPRITE + JUMP (LATER)
if (player.frameX < 5) {
player.frameX++
} else player.frameX = 0;
if (player.moving === false && player.movingLeft === true && player.movingRight === false ) {
player.frameY = 4;
player.direction = 0;
if (player.frameX < 4) {
player.frameX++
} else player.frameX = 0;
}
if ( player.moving=== false && player.movingRight === true && player.movingLeft === false) {
player.frameY = 1;
player.direction = 1;
if (player.frameX < 4) {
player.frameX++
} else player.frameX = 0;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。