Создание игры без движка и с движком

Расскажите мне как создавать игру с движком и без движка.

Я понимаю, что движок-это библиотека, набор команд. Но мне нужен пример. Не хотел я втягиваться снова в процесс обучения сейчас, но, видимо, у меня нет выбора, надо успевать всё. В общем, как это было с pointjs:

Спойлер:

Вряд ли код рабочий, потому что я прямо сейчас удалял лишнее и мог переусердствовать. Это для примера, создавался фон, который двигался и на фоне стоял игрок, мог двигаться вправо, влево.

Вот игрок и фон
https://yadi.sk/i/PvP30fFf3QwabV
https://yadi.sk/i/_Lx0ZfOT3Qwanx



Как теперь всё это сделать без pointjs?
И как потом написать свой движок для такой игры?
Буду очень признателен за такое обучение.

я даже пробовать объяснять не буду. это слишком сложно.

гм.. это совсем сложно, правда. У меня есть некоторые опыт. Но ведь и я не осилил. Да и сканнер кучу времени на поинт.жс потратил.

тебе нужно выбрать один из движков исходя из предпочтений. Без движка никуда.

ну вот смотри например. invaders338 ты видел. а вот например тоже самое, только без движка https://pyro338.ru/space-invaders/old.html

смысл в том, что движок в основном принимает на себя функции отрисовки. если ты умеешь отрисовывать в канвасе что тебе нужно, то и без движка не составит труда свою игру написать. функции движения и вот этого вот всего будут идентичными что с движком, что без движка

Код:

log = function(logged){
  console.log(logged);
}

var Game = function(canvasId){
  var canvas = document.getElementById(canvasId);
  var screen = canvas.getContext('2d');
  var gameSize = {
    x: canvas.width,
    y: canvas.height,
  };
  this.bodies = createInvaders(this).concat([new Player(this, gameSize)]);
  var self = this;
  loadSound('shoot.wav', function(shootSound){
    self.shootSound = shootSound;
    var tick = function(){
      self.update(gameSize);
      self.draw(screen, gameSize);
      requestAnimationFrame(tick);
    }
    tick();
  })
}

Game.prototype = {
  update: function(gameSize){
    var bodies = this.bodies;
    var nonCollidingWithAnything = function(b1){
      return bodies.filter(function(b2){
        return colliding(b1, b2);
      }).length == 0;
    }
    this.bodies = this.bodies.filter(nonCollidingWithAnything);
    for(var i = 0; i < this.bodies.length; i++){
      if(this.bodies[i].position.y <0){
        this.bodies.splice(i, 1);
      }
    }
    for(var i = 0; i < this.bodies.length; i++){
      this.bodies[i].update();
    }
  },
  draw: function(screen, gameSize){
    clearCanvas(screen, gameSize);
    for(var i = 0; i < this.bodies.length; i++){
      drawRect(screen, this.bodies[i]);
    }
  },
  addBody: function(body){
    this.bodies.push(body);
  },
  invadersBelow: function(invader){
    return this.bodies.filter(function(b){
      return b instanceof Invader && b.position.y > invader.position.y && b.position.x - invader.position.x < invader.size.width;
    }).length > 0;
  }
}

var Invader = function(game, position, gameSize){
  this.game = game;
  this.gameSize = gameSize;
  this.size = {
    width: 16,
    height: 16
  }
  this.position = position;
  this.patrolX = 0;
  this.speedX = 0.8;
}

Invader.prototype = {
  update: function(){
    if(this.patrolX < 0 || this.patrolX > 500){
      this.speedX = -this.speedX;
    }
    this.position.x += this.speedX;
    this.patrolX += this.speedX;
    if(Math.random() < 0.01 && !this.game.invadersBelow(this)){
      var bullet = new Bullet({x: this.position.x + this.size.width/2-1, y: this.position.y+this.size.height/2}, {x: Math.random()-0.5, y: +2,});
      this.game.addBody(bullet);
    }
  }
}

var Player = function(game, gameSize){
  this.game = game;
  this.bullets = 0;
  this.timer = 0;
  this.size = {
    width: 16,
    height: 16,
  };
  this.position = {
    x: gameSize.x/2-this.size.width/2,
    y: gameSize.y-50,
  };
  this.keyboarder = new Keyboarder;
  this.gameSize = gameSize;
}

Player.prototype = {
  update: function(){
    if(this.keyboarder.isDown(this.keyboarder.KEYS.LEFT)){
      if(this.position.x > 0){
        this.position.x -= 2;
      }
    }
    if(this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT)){
      if(this.position.x < this.gameSize.x-this.size.width){
        this.position.x += 2;
      }
    }
    if(this.keyboarder.isDown(this.keyboarder.KEYS.SPACE)){
      if(this.bullets <=5){
        var bullet = new Bullet({x: this.position.x + this.size.width/2-1, y: this.position.y-4}, {x: 0, y: -6,});
        this.game.addBody(bullet);
        this.bullets++;
        this.game.shootSound.load();
        http://this.game.shootSound.play();
      }
    }
    this.timer++;
    if(this.timer % 12 ==0){
      this.bullets = 0;
    }
  }
}

var Bullet = function(position, velocity){
  this.size = {
    width: 2,
    height: 3,
  };
  this.position = position;
  this.velocity = velocity;
}

Bullet.prototype = {
  update: function(){
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
  }
}

var Keyboarder = function(){
  var KeyState = {

  }
  window.onkeydown = function(e){
    KeyState[e.keyCode] = true;
  }
  window.onkeyup = function(e){
    KeyState[e.keyCode] = false;
  }
  this.isDown = function(keyCode){
    return KeyState[keyCode];
  }
  this.KEYS = {
    LEFT: 37,
    RIGHT: 39,
    SPACE: 32,
  }
}

var createInvaders = function(game){
  var invaders = [];
  for(var i = 0; i < 24; i++){
    var x = 30 + (i % 8) * 30;
    var y = 30 + (i % 3) * 30;
    invaders.push(new Invader(game, {x: x, y: y}));
  }
  return invaders;
}

var colliding = function(b1, b2){
  return !(b1 == b2 ||
    b1.position.x+b1.size.width/2 < b2.position.x-b2.size.width/2 ||
    b1.position.y+b1.size.height/2 < b2.position.y-b2.size.height/2 ||
    b1.position.x-b1.size.width/2 > b2.position.x+b2.size.width/2 ||
    b1.position.y-b1.size.height/2 > b2.position.y+b2.size.height/2
  );
}

var loadSound = function(url, callback){
  var loaded = function(){
    callback(sound);
    sound.removeEventListener('canplaythrough', loaded);
  }
  var sound = new Audio(url);
  sound.addEventListener('canplaythrough', loaded);
  sound.load();
}

var drawRect = function(screen, body){
  screen.fillRect(body.position.x, body.position.y, body.size.width, body.size.height);
}

var clearCanvas = function(screen, gameSize){
  screen.clearRect(0, 0, gameSize.x, gameSize.y);
}

window.onload = function(){
  new Game('screen');
}


raingo пишет:тебе нужно выбрать один из движков исходя из предпочтений. Без движка никуда.

можно и без движка. но сложнее

Илья, я не прошу писать движок на все случаи жизни, я прошу написать движок на несколько движений.

Антон, спасибо, стало понятней, про канвас я уже читал.

Парни,а можете взять мой тайлшит или любой другой , поставить фон, отрисовать перса и сделать его движение вправо/влево без движка. Мне кажется это займёт минут 20 . Если будет 2 варианта - я буду вообще счастлив.

друг) ты же понимаешь, что за тебя твой код писать никто не будет))

Вот сначала причём и где создавать всё это в html или js подключать или прямо в html писать. Вот полностью что куда и зачем. Чтоб я скопировал, вставил куда надо и всё работало. Не надо там ничего сложного, вот просто вправо/влево движение

а там что много писать?дай свой тайл где есть анимация вправо/влево или две другие и свой код с началом кода и реализацией движения вправо/влево или другие движения, чтоб скопировать, вставить и наглядно видеть работу

в хтмл просто один канвас рисуешь и потом к нему по id обращаешься

Код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Space invaders</title>
  <script type="text/javascript" src="bin/game.js"></script>
</head>
<body>
  <canvas width="800" height="450" id="screen"></canvas>
</body>
</html>


вроде у сканера были уроки создания игр без point.js?

Сто проц были. ща кину ссылку.

Отлично,с этим никаких вопросов, а в game.js что?

вот я тебе готовый код с движениями вправо/влево. как отрисовывать тайлы на чистом канвасе - я не знаю. только прямоугольники могу.

в game.js - код который начинается с log = function(logged){
console.log(logged);
}

Действительно были...ну, всё равно, взять бы игру без движка и такую же игру с движком и посмотреть разницу - вот это было бы супер. Не надо там ничего сложного, картинка фона, перса и пару движений

вот та же самая игра с движком https://pyro338.ru/space-invaders/ и без движка https://pyro338.ru/space-invaders/old.html

Да, я про код))А не разницу во внешнем виде

код практически одинаковый за исключением функций отрисовки

А еще главный цикл, низкоуровневые функции отрисовки, получение инфы от клавиатуры.

В этом плеер-листе вроде есть инфа, как делать подобное.

Кстати, Дессан, попоробуй зайти в соседнюю ветку (внутренний цензор) и поругаться матом)

А что картинки нельзя вставлять?

тайлы точнее

можно, но я не знаю как. не задавался этим вопросом

А ты все игры делал на pointjs?