Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

HTML 5 Simple Canvas Game - zmiana tła

Szukasz dobrego skryptu? Ściągnąłeś skrypt i nie wiesz co dalej z nim robić? Masz problem z konfiguracją bądź modyfikacją? Tutaj znajdziesz pomoc z dostosowaniem najpopularniejszych skryptów (phpBB, Joomla, WordPress, itd).

HTML 5 Simple Canvas Game - zmiana tła

Post 14.07.2017, 23:40:55

Siemka. Sprawa prosta potrzebuję prosty skrypt do Simple canvas game

Kod całej gry:
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";


// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";


var hero2Ready = false;
var hero2Image = new Image();
hero2Image.onload = function () {
hero2Ready = true;
};
hero2Image.src = "images/hero2.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";

var monster2Ready = false;
var monster2Image = new Image();
monster2Image.onload = function () {
monster2Ready = true;
};
monster2Image.src = "images/monster2.png";

// Game objects
var hero = {
speed: 200 // movement in pixels per second
};
var monster = {speed:100};
var monster2 = {speed:100};
var monstersCaught = 0;

var hero2 = {
speed: 200 // movement in pixels per second
};

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
monster2.x = 32 + (Math.random() * (canvas.width - 64));
monster2.y = 32 + (Math.random() * (canvas.height - 64));
};

// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
if (82 in keysDown) {
reset();
monstersCaught = 0;
}

// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
monstersCaught = 0;
reset();
}
if (
hero.x <= (monster2.x + 32)
&& monster2.x <= (hero.x + 32)
&& hero.y <= (monster2.y + 32)
&& monster2.y <= (hero.y + 32)
) {
++monstersCaught;
monster2.x = 32 + (Math.random() * (canvas.width - 64));
monster2.y = 32 + (Math.random() * (canvas.height - 64));
}
if(hero.x <=0)
hero.x = hero.x+2;
if(hero.y <=0)
hero.y = hero.y+2;
if(hero.x >=480)
hero.x = hero.x-2;
if(hero.y >=450)
hero.y = hero.y-2;

if(monster.x > hero.x)
(monster.x -= monster.speed * modifier);
if(monster.x < hero.x)
(monster.x += monster.speed * modifier);
if(monster.y > hero.y)
(monster.y -= monster.speed * modifier);
if(monster.y < hero.y)
(monster.y += monster.speed * modifier);

if(monster.x <=0)
monster.x = monster.x+2;
if(monster.y <=0)
monster.y = monster.y+2;
if(monster.x >=480)
monster.x = monster.x-2;
if(monster.y >=450)
monster.y = monster.y-2;
};

// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}

if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}

if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}

if (monster2Ready) {
ctx.drawImage(monster2Image, monster2.x, monster2.y);
}

// Score
ctx.fillStyle = "rgb(250, 0, 0)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Punkty: " + monstersCaught, 32, 32);
ctx.fillStyle = "rgb(0, 0, 250)";
//ctx.fillText("Gra by Szymon & Marek", 130, 200);
};

// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;
};

// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible



Rzecz jest bardzo prosta (wiem bo kolega mi kiedyś to zrobił i to była jedna linijka tylko nijak nie mogę sobie przypomnieć jak to się robiło), że jesli postać osiągnie odpowiednią ilość punktów (monstersCaught) to następuje zmiana tła na inne cos w stylu "if monstersCaught >=25 set background "image/tło2.jpg



Dzięki za pomoc ;)
Xebre
Posty: 1
Dołączył(a): 14.07.2017

Powrót do Scripts Support


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935032 wiadomości
  • w 246327 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)