<!DOCTYPE html>
<html>
<head>
<canvas id="app">Your browser doesnt support the Canvas. Please update it to actual version.</canvas>
</head>
<body>
<script defend src="js2d.js"></script>
<script defend src="key.js"></script>
<script defend src="engine.js"></script>
<script>
/*load game script*/
'use strict'
var game = {
width: 800,
height: 600,
scene: 'loader'
};
/*in this variable i contian all game configurations*/
/*and load canvas*/
var c = document.getElementById('app');
var ctx = c.getContext('2d');
c.width=game.width;
c.height=game.height;
/*load image*/
var loader_first = new Image();
var loader_second = new Image();
var loader_third = new Image();
loader_first.src="http://vkapilessons.esy.es/1.png";
loader_second.src="http://vkapilessons.esy.es/2.png";
loader_third.src="http://vkapilessons.esy.es/3.png";
var isLoad = false;
/*create the loader*/
if(game.scene=='loader') {
window.onload = function getLoader() {
ctx.drawImage(loader_first,0,0,game.width,game.height);
setTimeout(
function() {
ctx.clearRect(0,0,game.width,game.height);
ctx.drawImage(loader_second,0,0,game.width,game.height);
}
, 900);
setTimeout(
function() {
ctx.clearRect(0,0,game.width,game.height);
ctx.drawImage(loader_third,0,0,game.width,game.height);
isLoad=true;
player.draw();
}
, 1600);
};
};
/*change gamescene*/
if(isLoad) {
game.scene='gamelesson'
};
/*global obj player with player.config*/
var player = {
x:150,
y: 250,
width: 50,
height: 50,
/*player behv.*/
isRight: false,
isLeft: false,
isJump: false,
isDestroy: false,
speed: 3,
draw: function drawPlayer() {
clearCanvas(0,0,game.width,game.height);
draw(player.x, player.y, player.width, player.height);
map.draw();
}
};
/*in this function we create the player-move*/
function movePlayerLeft() {
clearCanvas(player.x, player.y, player.width, player.height);
player.x-=player.speed
player.draw()
};
function movePlayerRight() {
clearCanvas(player.x, player.y, player.width, player.height);
player.x+=player.speed
player.draw()
};
var isJump = 0;
function playerJump() {
if (isJump==0) {
setTimeout(function() {
clearCanvas(player.x, player.y, player.width, player.height);
player.y-=10;
player.draw();
isJump = 1;
},100);
setTimeout(function(){
clearCanvas(player.x, player.y, player.width, player.height);
player.y+=10;
player.draw();
isJump=0;
},300);
};
};
/*big func to clear or draw canvas easy*/
function clearCanvas(x,y,width,height) {
ctx.clearRect(x,y,width,height);
};
function draw(x,y,width,height) {
ctx.fillRect(x,y,width,height);
};
/*in game loop we give keyCode and dofunc*/
startGame(
function() {
if(isKeyDown('D')) {
movePlayerRight();
};
if(isKeyDown('A')) {
movePlayerLeft();
};
if(isKeyDown('LEFT')) {
movePlayerLeft();
};
if(isKeyDown('RIGHT')) {
movePlayerRight();
};
if(isKeyDown('W')) {
if(isJump==0) {
playerJump();
};
};
if(isKeyDown('UP')) {
if(isJump==0) {
playerJump();
};
};
});
var map = {
x: [150,350,480],
y: [290,250, 250],
w: [100,100, 250],
h: [30,30,40],
draw: function() {
for(var i=map.x.length; i!=-1; i--)
ctx.fillRect(map.x[i], map.y[i], map.w[i], map.h[i]);
}
};
var isCollision = 0;
function checkCollision() {
for(var i=map.x.length; i!=-1; i--){
if (player.x < map.x[i] + map.w[i] &&
player.x + player.width > map.x[i] &&
player.y < map.y[i] + map.h[i] &&
player.height + player.y > map.y[i]) {
console.log('Hello motherfucker');
player.y=map.y[i]+map.w[i];
isCollision=1;
var fall=0;
} else {
if(isCollision==0) {
var fall = setInterval(function() {
clearCanvas(player.x,player.y,player.width,player.height);
player.y+=3;
player.draw();
if(player.y>800) {
clearInterval(fall)
console.log('Fall has been stoped!:)')
};
},10)
fall();
};
};
};
};
var fall;
function fall() {
if(isCollision==0) {
var fall;
};
};
</script>
</body>
Содержимое файлов key.js и engine.js отвечают за клавишу и игровой цикл. Как я себе представляю механизм и вообще в чем проблема?
Дело такое. Мне нужно постоянно (т.е., нужно действие в цикл засунуть, я бы это уже сделал, да только вот оно вообще не работает, цикл в функции startGame) сравнивать значения из массива мапы с координатами игрока, если все совпадает - игрок становится на координату платформы (player.y = map.y[i]+map.w[i]).
Казалось бы все должно работать. но есть одно НО. В массиве несколько значений, а значит что для одной платформы - коллизия есть, для остальных нет, в следствии чего происходит и console.log() и fall();.
Как я представлял себе решение задачи?
var global=0
var try=0
while(global==0) {
for() if() {
global=1
} else {
global==0
try++
If(try==map.x.lenght) {
fall();
};
};
}
но в данном случае значение функции - undefined. для запуска функции использовал консоль(checkCollision();)
Что должно получится? персонаж должен уметь ходить и прыгать по платформам и падать, если не допрыгнул (стандартная механика платформера, короче).
ОЧЕНЬ буду благодарен за помощь, заранее спасибо :)