2D minecraft на JS

PHP/JS+HTML+CSS/Python/др.

Оцените мою работу по шкале от одного до десяти!

1/10
0
0%
2/10
0
0%
3/10
1
33%
4/10
0
0%
5/10
0
0%
6/10
0
0%
7/10
1
33%
8/10
0
0%
9/10
0
0%
10/10
1
33%
Всего голосов : 3

Сообщение 2D minecraft на JS
» 17 фев 2018, 15:11

Всем привет! У меня уже был подобный проект viewtopic.php?f=116&t=13451, но я его писал на мобильном и поетому он был не очень ;)). Сейчас я полностью переписал его, и сделал персонажа (он, пока-что, двигается по сетке, но вскоре я сделаю его нормальным) и возможность изменять ландшафт.

 Код игры (только javascript)
Код: Выделить всё
//variables and cycles

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var width = 50;
var height = 50;

var cw = 1000;
var ch = 500;

var barVis;

var genHei = Math.floor(height / 2);

var save = new Array ();

for(var i = 0; i < width; i ++) {
   save [ i ] = new Array ();
   for(var j = 0; j < height; j ++) {
      save [ i ] [ j ] = 0;
   }
}

//game code

window.onload = function () {
   window.onkeydown = function (e) {
      console.log(e.keyCode);
      if(e.keyCode == 38) setMove("up");
      if(e.keyCode == 37) setMove("left");
      if(e.keyCode == 39) setMove("right");
      //if(e.keyCode == 40) setMove("down");
   }
   window.onkeyup = function (e) {
      console.log(e.keyCode);
      if(e.keyCode == 38) setMove("stop");
      if(e.keyCode == 37) setMove("stop");
      if(e.keyCode == 39) setMove("stop");
      if(e.keyCode == 40) setMove("stop");
   }
   
   
   canvas.onclick = function (e) {
       var msX = e.offsetX - cw / 2;
       var msY = e.offsetY - ch / 2;
       if (save [Math.floor(msX/32 + xPos/32)] [Math.floor(msY/32  + yPos/32)] == 0) {
            setBlock(Math.floor(msX/32 + xPos/32) , Math.floor(msY/32  + yPos/32), 1);
      }
      else {
         setBlock(Math.floor(msX/32 + xPos/32) , Math.floor(msY/32  + yPos/32), 0);
      }
    }
   
   
   
   gameCode();
   
}

function gameCode () {
   gen();
   barVis = 0;
}

resizeCanvas();

//player behavior

var xPos = 3 * 32;
var yPos = Math.floor(height / 2 - 5) * 32;
var mDir = "stop"

var spX = 0;
var spY = 0;

var speed = 5;



function setMove(dr) {
   if(dr == "up") setDirection(dr);
   if(dr == "left") setDirection(dr);
   if(dr == "right") setDirection(dr);
   if(dr == "stop") setDirection(dr);
}

function setDirection (drt) {
   mDir = drt;
}

function mv () {
   xPos += spX;
   yPos += spY;
   
   if(mDir == "right") {
      if(save [Math.floor(xPos / 32) + 1] [Math.floor(yPos / 32)] == 0) {
         spX = speed;
      }
      else {
         spX = 0;
      }
   }
   
   if(mDir == "left") {
      if(save [Math.floor(xPos / 32) - 1] [Math.floor(yPos / 32)] == 0) {
         spX = -speed;
      }
      else {
         spX = 0;
      }
   }
   
   if(mDir == "up") {
      if(save [Math.floor(xPos / 32)] [Math.floor(yPos / 32) + 1] != 0) {
         spY = -speed / 1.5;
      }
   }
   
   fall();
   
   if(mDir == "stop") {
      spX = 0;
   }
   

}

function fall () {
   if(save [Math.floor(xPos / 32)] [Math.floor(yPos / 32) + 1] == 0) {
      spY += 0.1;
   }
   else if (spY > 0){
      spY = 0;
   }
}

//functions

function clear () {
   for(var i = 0; i < width; i ++) {
       for(var j = 0; j < height; j ++) {
          save [ i ] [ j ] = 0;
       }
    }
}

function resizeCanvas () {
   canvas.width = cw;
   canvas.height = ch;
}

function drawPlayer () {
   drawBlock(Math.floor(xPos / 32),Math.floor(yPos / 32), "blue", "yellow");
}

var render = setInterval(function () {
   mv();
   context.clearRect(0, 0, cw, ch);
   for(var i = 0; i < width; i ++) {
       for(var j = 0; j < height; j ++) {
          if(save [ i ] [ j ] == 1) drawGrass(i, j);
         if(save [ i ] [ j ] == 2) drawDirt(i, j);
         if(save [ i ] [ j ] == 3) drawStone(i, j);
         if(barVis == 1) if(save [ i ] [ j ] == 4) drawBarier(i, j);
       }
    }
   drawPlayer();
}, 1000 / 60);

var Hei;
var index;

function gen () {
   clear();
   Hei = genHei;
   for(var i = 0; i < width; i ++) {
       Hei += Math.floor(Math.random () * 3 -1);
      index = 0;
       setGenBlock(i, Hei, 1, index);
      setGenBlock(i, Hei, 2, index);
      setGenBlock(i, Hei, 2, index);
      setGenBlock(i, Hei, 3, index);
      setGenBlock(i, Hei, 3, index);
      setGenBlock(i, Hei, 3, index);
      
    }
    for(var j = 0; j < height; j ++) {
      setBlock(0, j, 4);
      setBlock(width - 1, j, 4);
   }
}

function drawRect (x, y, w, h, c) {
   context.fillStyle = c;
   context.fillRect(x, y, w, h);
}

function drawBlock (x, y, c, ci) {
   drawRect(x * 32 - xPos + cw / 2, y * 32 - yPos + ch / 2, 32, 32,c);
   drawRect(x * 32 + 5 - xPos + cw / 2, y * 32 + 5 - yPos + ch / 2, 32 - 10, 32 - 10,ci);
}

function setBlock (x, y, n) {
   save [ x ] [ y ] = n;
}
function setGenBlock (x, y, n, ind) {
   setBlock(x, y + ind, n);
   index ++;
}

function drawGrass (x, y) {
   drawBlock(x, y, 'green', 'brown');
}

function drawDirt (x, y) {
   drawBlock(x, y, 'orange', 'brown');
}

function drawStone (x, y) {
   drawBlock(x, y, 'black', 'gray');
}
function drawBarier (x, y) {
   drawBlock(x, y, 'black', 'black');
}


index2.png

canvas.png


Управление и возможности:

Управление персонажем с помощью стрелок.
Если кликнуть на блок левой кнопкой мыши, то он сломается, а если кликнуть на пустое пространство, то там поставится блок земли.

Если хотите сделать скриншот, то просто кликните правой кнопкой мыши по экрану и нажмите сохранить изображение как...

Играть онлайн: http://black-rect.epizy.com/Games/all/m ... index.html

Я буду развивать проект, пишите свои отзывы и если заметите баг, свистите и за 24 часа он будет уже пофикшен! :good:

Black Rect Studios
Сколько языков программирования ты знаешь — столько раз ты ПРОГРАММИСТ!

 Мои проекты
WarStrategy: viewtopic.php?f=20&t=13573
INI Editor Pro: viewtopic.php?f=14&t=13354
Симулятор Бомжа: viewtopic.php?f=116&t=13457
Mineсraft 2D JS: viewtopic.php?f=116&t=13642
Змейка на JS: viewtopic.php?f=116&t=13990
Project Sinus JS: viewtopic.php?f=116&t=13837

Black Square
Аватара пользователя

Участник
Сообщений: 173
Я тут с 03 фев 2017
Откуда: Киев
Двиг: C2, СC, JS
Лицензия: Business
Skype: sviatkoslav@gmail.co
Репутация 10 [ ? ]

Сообщение 2D minecraft на JS
» 02 мар 2018, 18:01

Всем привет! Сделал обнову игры. Добавил квадратик мыши и пофиксил пару багов! http://black-rect.epizy.com/game-post.php?f=16&lang=ru
Сколько языков программирования ты знаешь — столько раз ты ПРОГРАММИСТ!

 Мои проекты
WarStrategy: viewtopic.php?f=20&t=13573
INI Editor Pro: viewtopic.php?f=14&t=13354
Симулятор Бомжа: viewtopic.php?f=116&t=13457
Mineсraft 2D JS: viewtopic.php?f=116&t=13642
Змейка на JS: viewtopic.php?f=116&t=13990
Project Sinus JS: viewtopic.php?f=116&t=13837

Black Square
Аватара пользователя

Участник
Сообщений: 173
Я тут с 03 фев 2017
Откуда: Киев
Двиг: C2, СC, JS
Лицензия: Business
Skype: sviatkoslav@gmail.co
Репутация 10 [ ? ]



Вернуться в Web

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх