Бесконечное движение фона в канвасе

@Рестрик · Регистрация: 24.02.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте, по заданию нужно создать <canvas id="map"></canvas> с шириной 800 и высотой 500 так, чтобы сделать на BG движущийся бесконечный фон.
Я поступил таким методом :
При этом методе задний фон дает сбои в цикле. Старался по всякому, пофиксить не удалось. Возможно я использую не те методы. Пробовал взаимодействовать со стилем фона - не получилось.
Очень надеюсь что поможете и подправите код, ибо я новенький в JC, а ответа нигде не нашел.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Game</title>
        <script src="game.js"></script>
        <link rel ="stylesheet" href="style.css">
    </head>
    <body>
        <div id="gameName">GaMeS</div>
        <canvas id="map"></canvas>
        <canvas id="enemy"></canvas>
        <canvas id="player"></canvas>
        <canvas id="stats"></canvas>
        <input id="drawBtn" type="button" value="Draw">
        <input id="clearBtn" type="button" value="Clear"        
    </body>
</html>

CSS

body{
    background: #333;
}
canvas{
    display: block;
    margin: 30px auto 0px;
}
#player, #enemy, #stats{
    display: block;
    margin: -500px auto 0px;
}
#gameName{
    color:#fff;
    font-family: courier;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}
#map {
  background: url("img/bg.png") repeat-x left top;
}

Javascript

window.onload = init;
 
var map;
var ctxMap;
 
var pl
var ctxPl;
 
var enemyCvs;
var ctxEnemy;
 
var stats;
var ctxStats;
 
var drawBtn;
var clearBtn;
 
var gameWidth = 800;
var gameHeight = 500;
 
var background = new Image();
background.src = "img/bg.png"
 
var background1 = new Image();
background1.src = "img/bg.png"
 
var tiles = new Image();
tiles.src = "img/tiles.png";
 
var player;
var enemies = [];
 
var isPlaying;
var health;
 
var mapX = 0;
var map1X = gameHeight;
 
//for creating enimes
var spawnInterval;
var spawnTime = 3000;
var spawnAmout = 7;
 
var requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimatiobFrame ||
                        window.msRequestAnimationFrame;
 
function init(){
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");
    
    pl = document.getElementById("player");
    ctxPl = pl.getContext("2d");
    
    enemyCvs = document.getElementById("enemy");
    ctxEnemy = enemyCvs.getContext("2d");
 
    stats = document.getElementById("stats");
    ctxStats = stats.getContext("2d");  
 
    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    enemyCvs.width = gameWidth;
    enemyCvs.height = gameHeight;
    stats.width = gameWidth;
    stats.height = gameHeight;
    
    ctxStats.fillStyle = "#3D3D3D";
    ctxStats.font = "bold 15pt Arial";
    
    drawBtn = document.getElementById("drawBtn");
    clearBtn = document.getElementById("clearBtn");
    
    drawBtn.addEventListener("click", drawRect, false);
    clearBtn.addEventListener("click", clearRect, false);
    
    player = new Player();
    resetHealth()
    startLoop();
    
    document.addEventListener("keydown", checkKeyDown, false);
    document.addEventListener("keyup", checkKeyUp, false);
}
 
function resetHealth(){
    health=100;
}
 
function spawnEnemy(count){
    for(var i = 0; i < count; i++){
        enemies[i] = new Enemy();
    }
}
 
function startCreatingEnemies(){
    stopCreatingEnemies();
    spawnInterval = setInterval(function(){spawnEnemy(spawnAmout)}, spawnTime);
}
 
function stopCreatingEnemies(){
    clearInterval(spawnInterval);
}
 
 
function loop(){
    if(isPlaying){
        draw();
        update();
        requestAnimFrame(loop);
    }
}
 
function startLoop(){
    isPlaying = true;
    loop();
    startCreatingEnemies();
}
 
function stopLoop(){
    isPlaying = false;
}
 
function draw(){
    player.draw();
    
    clearCtxEnemy();
    for(var i = 0; i < enemies.length; i++){
        enemies[i].draw();
    }
}
 
function update(){
    moveBg();
    drawBg;
    updateStats();
    player.update();
    
    for(var i = 0; i < enemies.length; i++){
        enemies[i].update();
    }
    
}
 
function moveBg(){
    var vel = 2;
    mapX -= 2;
    map1X -= 2;
    if(mapX + gameWidth < 0) mapX = gameHeight - 5;
    if(map1X + gameWidth < 0) map1X = gameHeight - 5;
}
 
function Player(){
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 0;
    this.drawY = 185;
    this.width = 145;
    this.height = 115;
 
    this.isUp = false;
    this.isDown = false;
    this.isRight = false;
    this.isLeft = false;
    
    this.speed = 3;
}
 
function Enemy(){
    this.srcX = 0;
    this.srcY = 115;
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    this.width = 105;
    this.height = 75;
 
    this.speed = 10;
}
 
Enemy.prototype.draw = function(){
    ctxEnemy.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
        this.drawX, this.drawY, this.width, this.height);
}
 
Enemy.prototype.update = function(){
    this.drawX -= this.speed;
    if(this.drawX < (0 - this.width)){
        this.destroy();
    }
}
 
Enemy.prototype.destroy = function(){
    enemies.splice(enemies.indexOf(this),1);
}
 
Player.prototype.draw = function(){
    clearCtxPlayer();
    ctxPl.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
        this.drawX, this.drawY, this.width, this.height);
}
 
Player.prototype.update = function(){
    drawBg();
    if(health <= 0) resetHealth();
    
    if(this.drawX < (0 - 30)) this.drawX = (0 - 30);
    if(this.drawX > (gameWidth - this.width)) this.drawX = (gameWidth - this.width);
    if(this.drawY < (0 - 30)) this.drawY = (0 - 30);
    if(this.drawY > (gameHeight - this.height + 30)) this.drawY = (gameHeight - this.height + 30);
    
    for(var i = 0; i < enemies.length; i++){
        if(this.drawX >= enemies[i].drawX &&
            this.drawY >= enemies[i].drawY &&
            this.drawX <= enemies[i].drawX + enemies[i].width &&
            this.drawX <= enemies[i].drawX + enemies[i].height){
            health--;
            }
    }
    
    this.chooseDir();
}
 
Player.prototype.chooseDir = function(){
    if(this.isUp)
        this.drawY -=this.speed;
    if(this.isDown)
        this.drawY +=this.speed;
    if(this.isRight)
        this.drawX +=this.speed;
    if(this.isLeft)
        this.drawX -=this.speed;
}
 
function checkKeyDown(e){
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W"){
        player.isUp = true;
        e.preventDefault();
    }
    if(keyChar == "S"){
        player.isDown = true;
        e.preventDefault();
    }
    if(keyChar == "D"){
        player.isRight = true;
        e.preventDefault();
    }
    if(keyChar == "A"){
        player.isLeft = true;
        e.preventDefault();
    }
}
 
function checkKeyUp(e){
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W"){
        player.isUp = false;
        e.preventDefault();
    }
    if(keyChar == "S"){
        player.isDown = false;
        e.preventDefault();
    }
    if(keyChar == "D"){
        player.isRight = false;
        e.preventDefault();
    }
    if(keyChar == "A"){
        player.isLeft = false;
        e.preventDefault();
    }
}
 
function drawRect(){
    ctxMap.fillStyle = "#3D3D3D";
    ctxMap.fillRect(10, 10, 100, 100);
}
 
function clearRect(){
    ctxMap.clearRect(0, 0, 800, 500)
}
 
function clearCtxPlayer(){
    ctxPl.clearRect(0,0, gameWidth, gameHeight);
}
 
function updateStats(){
    ctxStats.clearRect(0,0, gameWidth, gameHeight);
    ctxStats.fillText("Health " + health, 10, 20);
}
 
function clearCtxEnemy(){
    ctxEnemy.clearRect(0,0, gameWidth, gameHeight);
}
 
function drawBg(){
    ctxMap.clearRect(0,0, gameWidth, gameHeight);   
    ctxMap.drawImage(background, 0, 0, 800, 480,
    mapX, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background1, 0, 0, 800, 480,
    map1X, 0, gameWidth, gameHeight);
}

версия 2 :

Javascript

window.onload = init;
 
var map;
var ctxMap;
 
var position=0;
var interval = setInterval(function () {
position -= 1;
$("#map").css({ "background-position":+ position +"px 0px" }) },50 );
 
var pl
var ctxPl;
 
var enemyCvs;
var ctxEnemy;
 
var stats;
var ctxStats;
 
var drawBtn;
var clearBtn;
 
var gameWidth = 800;
var gameHeight = 500;
 
var background = new Image();
background.src = ""
 
var background1 = new Image();
background1.src = ""
 
var tiles = new Image();
tiles.src = "img/tiles.png";
 
var player;
var enemies = [];
 
var isPlaying;
var health;
 
var mapX = 0;
var map1X = gameHeight;
 
//for creating enimes
var spawnInterval;
var spawnTime = 3000;
var spawnAmout = 7;
 
var requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimatiobFrame ||
                        window.msRequestAnimationFrame;
 
function init(){
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");
    
    pl = document.getElementById("player");
    ctxPl = pl.getContext("2d");
    
    enemyCvs = document.getElementById("enemy");
    ctxEnemy = enemyCvs.getContext("2d");
    
    stats = document.getElementById("stats");
    ctxStats = stats.getContext("2d");  
 
    interval = document.getElementById("map")
    
    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    enemyCvs.width = gameWidth;
    enemyCvs.height = gameHeight;
    stats.width = gameWidth;
    stats.height = gameHeight;
    
    ctxStats.fillStyle = "#3D3D3D";
    ctxStats.font = "bold 15pt Arial";
    
    drawBtn = document.getElementById("drawBtn");
    clearBtn = document.getElementById("clearBtn");
    
    drawBtn.addEventListener("click", drawRect, false);
    clearBtn.addEventListener("click", clearRect, false);
    
    player = new Player();
    resetHealth();
    startLoop();
    
    document.addEventListener("keydown", checkKeyDown, false);
    document.addEventListener("keyup", checkKeyUp, false);
}
 
function resetHealth(){
    health=100;
}
 
function spawnEnemy(count){
    for(var i = 0; i < count; i++){
        enemies[i] = new Enemy();
    }
}
 
function startCreatingEnemies(){
    stopCreatingEnemies();
    spawnInterval = setInterval(function(){spawnEnemy(spawnAmout)}, spawnTime);
}
 
function stopCreatingEnemies(){
    clearInterval(spawnInterval);
}
 
 
function loop(){
    if(isPlaying){
        draw();
        update();
        requestAnimFrame(loop);
    }
}
 
function startLoop(){
    isPlaying = true;
    loop();
    startCreatingEnemies();
}
 
function stopLoop(){
    isPlaying = false;
}
 
function draw(){
    player.draw();
    
    clearCtxEnemy();
    for(var i = 0; i < enemies.length; i++){
        enemies[i].draw();
    }
}
 
function update(){
    moveBg();
    drawBg;
    updateStats();
    player.update();
    
    for(var i = 0; i < enemies.length; i++){
        enemies[i].update();
    }
    
}
 
function moveBg(){
    var vel = 2;
    mapX -= 2;
    map1X -= 2;
    if(mapX + gameWidth < 0) mapX = gameHeight - 5;
    if(map1X + gameWidth < 0) map1X = gameHeight - 5;
}
 
function Player(){
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 0;
    this.drawY = 185;
    this.width = 145;
    this.height = 115;
 
    this.isUp = false;
    this.isDown = false;
    this.isRight = false;
    this.isLeft = false;
    
    this.speed = 3;
}
 
function Enemy(){
    this.srcX = 0;
    this.srcY = 115;
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    this.width = 105;
    this.height = 75;
 
    this.speed = 10;
}
 
Enemy.prototype.draw = function(){
    ctxEnemy.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
        this.drawX, this.drawY, this.width, this.height);
}
 
Enemy.prototype.update = function(){
    this.drawX -= this.speed;
    if(this.drawX < (0 - this.width)){
        this.destroy();
    }
}
 
Enemy.prototype.destroy = function(){
    enemies.splice(enemies.indexOf(this),1);
}
 
Player.prototype.draw = function(){
    clearCtxPlayer();
    ctxPl.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
        this.drawX, this.drawY, this.width, this.height);
}
 
Player.prototype.update = function(){
    drawBg();
    if(health <= 0) resetHealth();
    
    if(this.drawX < (0 - 30)) this.drawX = (0 - 30);
    if(this.drawX > (gameWidth - this.width)) this.drawX = (gameWidth - this.width);
    if(this.drawY < (0 - 30)) this.drawY = (0 - 30);
    if(this.drawY > (gameHeight - this.height + 30)) this.drawY = (gameHeight - this.height + 30);
    
    for(var i = 0; i < enemies.length; i++){
        if(this.drawX >= enemies[i].drawX &&
            this.drawY >= enemies[i].drawY &&
            this.drawX <= enemies[i].drawX + enemies[i].width &&
            this.drawX <= enemies[i].drawX + enemies[i].height){
            health--;
            }
    }
    
    this.chooseDir();
}
 
Player.prototype.chooseDir = function(){
    if(this.isUp)
        this.drawY -=this.speed;
    if(this.isDown)
        this.drawY +=this.speed;
    if(this.isRight)
        this.drawX +=this.speed;
    if(this.isLeft)
        this.drawX -=this.speed;
}
 
function checkKeyDown(e){
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W"){
        player.isUp = true;
        e.preventDefault();
    }
    if(keyChar == "S"){
        player.isDown = true;
        e.preventDefault();
    }
    if(keyChar == "D"){
        player.isRight = true;
        e.preventDefault();
    }
    if(keyChar == "A"){
        player.isLeft = true;
        e.preventDefault();
    }
}
 
function checkKeyUp(e){
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W"){
        player.isUp = false;
        e.preventDefault();
    }
    if(keyChar == "S"){
        player.isDown = false;
        e.preventDefault();
    }
    if(keyChar == "D"){
        player.isRight = false;
        e.preventDefault();
    }
    if(keyChar == "A"){
        player.isLeft = false;
        e.preventDefault();
    }
}
 
function drawRect(){
    ctxMap.fillStyle = "#3D3D3D";
    ctxMap.fillRect(10, 10, 100, 100);
}
 
function clearRect(){
    ctxMap.clearRect(0, 0, 800, 500)
}
 
function clearCtxPlayer(){
    ctxPl.clearRect(0,0, gameWidth, gameHeight);
}
 
function updateStats(){
    ctxStats.clearRect(0,0, gameWidth, gameHeight);
    ctxStats.fillText("Health " + health, 10, 20);
}
 
function clearCtxEnemy(){
    ctxEnemy.clearRect(0,0, gameWidth, gameHeight);
}
 
function drawBg(){
    ctxMap.clearRect(0,0, gameWidth, gameHeight);   
    ctxMap.drawImage(background, 0, 0, 800, 480,
    mapX, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background1, 0, 0, 800, 480,
    map1X, 0, gameWidth, gameHeight);
}

@WhiteMind · 24.02.2016, 21:15

абсолютные инет ссылки приведите чтобы я мог на https://jsfiddle.net/ тестить

@Рестрик · 24.02.2016, 21:33 **[ТС]**

Для замены кода в файлах

CSS

1
2
3

#map {
  background: url("http://s020.radical(.ru)/i702/1602/d9/ed6418ea0aee.png") repeat-x left top;
}

Javascript

var background = new Image();
background.src = "http://s020.radical(.ru)/i702/1602/d9/ed6418ea0aee.png"
 
var background1 = new Image();
background1.src = "http://s020.radical(.ru)/i702/1602/d9/ed6418ea0aee.png"
 
var tiles = new Image();
tiles.src = "http://s45.radical(.ru)/i107/1602/6e/262460b82bc8.png";

@WhiteMind · 24.02.2016, 22:58

не 1а из след ссылок
http://s020.radical.ru/i702/16... ea0aee.png
http://s45.radical.ru/i107/160... b82bc8.png
не валидна

@Рестрик · 24.02.2016, 23:04 **[ТС]**

Странно. Перезалив :
BG : http://s50.radikal(.ru)/i128/1... ccf2af.png
Titles : http://s017.radikal(.ru)/i430/... 45acac.png

@WhiteMind · 24.02.2016, 23:53

так. у вас 2а асинхронных таймера.
управляют задним фоном

Javascript

var interval = setInterval(function () {
    position -= 1;
    $("#map").css({ "background-position":+ position +"px 0px" }) 
},50);

и 2й

Javascript

function drawBg(){
    ctxMap.clearRect(0,0, gameWidth, gameHeight);   
    ctxMap.drawImage(background, 0, 0, 800, 480,mapX, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background1, 0, 0, 800, 480,map1X, 0, gameWidth, gameHeight);
}

вот 2й какраз и барахлит.
у меня нет особого желания разбираться почему он барахлит, тем более вы игрока,врага как отдельные канвасы выводите а не отрисовываете все на 1н
+ 1й способ вполне сносно работает.
потому так
https://jsfiddle.net/4e7880pt/

@Рестрик · 25.02.2016, 23:21 **[ТС]**

Спасибо большое. Я понял где ошибки.

@WhiteMind Hello Kitty 690 / 562 / 402 Регистрация: 12.02.2016 Сообщений: 1,436 Записей в блоге: 1
	24.02.2016, 21:15	2
	абсолютные инет ссылки приведите чтобы я мог на https://jsfiddle.net/ тестить 0

@WhiteMind Hello Kitty 690 / 562 / 402 Регистрация: 12.02.2016 Сообщений: 1,436 Записей в блоге: 1
	24.02.2016, 22:58	4
	не 1а из след ссылок http://s020.radical.ru/i702/16... ea0aee.png http://s45.radical.ru/i107/160... b82bc8.png не валидна 0

@Рестрик 0 / 0 / 0 Регистрация: 24.02.2016 Сообщений: 12
	24.02.2016, 23:04 [ТС]	5
	Странно. Перезалив : BG : http://s50.radikal(.ru)/i128/1... ccf2af.png Titles : http://s017.radikal(.ru)/i430/... 45acac.png 0

@Рестрик 0 / 0 / 0 Регистрация: 24.02.2016 Сообщений: 12
	25.02.2016, 23:21 [ТС]	7
	Спасибо большое. Я понял где ошибки. 0

Опции темы