WebClub2018/scroller_helper.js at master · rwtsoftware/WebClub2018 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

var myMap;


var draw = function(myMap) {
  for (let k in myMap.objects) {
    let o = myMap.objects[k];
    $(myMap.window).children('.'+o.id).css({
      top: (o.y * myMap.picture_size) + 'px',
      left: (o.x * myMap.picture_size) + 'px'
    });
  }
  drawPlayer(myMap);
};

var drawPlayer = function(myMap) {
  $(myMap.window).children('.player').css({
  	top: (myMap.player.y * myMap.picture_size) + 'px',
  	left: (myMap.player.x * myMap.picture_size) + 'px'
  });
  collisionDetect(myMap);
}

var collisionDetect = function(myMap) {
  for (let k in myMap.objects) {
    let o = myMap.objects[k];
    if (myMap.player.x === o.x && myMap.player.y === o.y) {
    	console.log(o);
    	 myMap.objects[k].x=-10;
    	o.callback();
    }
  }
}

var scroller = {
  newMap: function(window, html) {
  	if (typeof myMap === 'undefined') {
  	  myMap = {
  	    objects: [],
  	    picture_size: '20',
  	    visible_width: '20',
  	    visible_height: '5',
  	    player: {x: 0, y: 0, html: html},
  	    window: window,
  	    successCallback: null,
  	    failureCallback: null,
  	    fail: function() {
          this.objects = [];
          this.failureCallback();
  	    }
  	  }
  	}
  	else {
  	  alert('already running');
  	}
  },

   killcar: function(x, y, html, callback) {
  clearInterval(myMap.interval);
       if (myMap.failureCallback) {
          myMap.failureCallback();
      	}
      	myMap = undefined;
   },

  addObject: function(x, y, html, callback) {
  	myMap.objects.push({x: x, y: y, html: html, callback: callback, id: myMap.objects.length});
  },

  onSuccess: function(callback) {
  	myMap.successCallback = callback;
  },

  onFailure: function(callback) {
  	myMap.failureCallback = callback;
  },

  run: function() {
    $(myMap.window).css({
      position: 'relative',
      height: (myMap.picture_size * myMap.visible_height) + 'px',
      width: (myMap.picture_size * myMap.visible_width) + 'px',
      'background-color': 'gray',
      overflow: 'hidden',
      'z-index': -1
    })
	    .attr('tabindex', '0')
	    .html('')
	    .focus();
	$(window)
	  .off("keypress")
	  .keypress(function( event ) {
	    if (event.key === 'w') {
	      myMap.player.y--;
	    }
	    if (event.key === 's') {
	      myMap.player.y++;
	    }
	    if (event.key === 'a') {
	      myMap.player.x--;
	      }
	    if (event.key === 'd') {
	      myMap.player.x++;
	    }
	    drawPlayer(myMap);
	  });
    $(myMap.window).append('<div class="player">'+myMap.player.html+'</div>');
    $(myMap.window).children('.player').css({
      	width: myMap.picture_size + 'px',
  	  	height: myMap.picture_size + 'px',
  	  	top: (myMap.player.y * myMap.picture_size) + 'px',
  	  	left: (myMap.player.x * myMap.picture_size) + 'px',
  	  	position: 'absolute'
      });
  	for (let k in myMap.objects) {
  	  let o = myMap.objects[k];
  	  $(myMap.window).append('<div class="'+o.id+'">'+o.html+'</div>');
  	  $(myMap.window).children('.'+o.id).css({
  	  	width: myMap.picture_size + 'px',
  	  	height: myMap.picture_size + 'px',
  	  	top: (o.y * myMap.picture_size) + 'px',
  	  	left: (o.x * myMap.picture_size) + 'px',
  	  	position: 'absolute'
  	  });
  	}
    myMap.interval = setInterval(function() {
      let stillRunning = false;
      for (let k in myMap.objects) {
        myMap.objects[k].x--;
        if (myMap.objects[k].x > -2) {
          stillRunning = true;
        }
      }
      this.draw(myMap);
      if (!stillRunning) {
      	clearInterval(myMap.interval);
       if (myMap.successCallback) {
          myMap.successCallback();
      	}
      	myMap = undefined;
      }
    }, 1000);
  }
};