기본 콘텐츠로 건너뛰기

node.js BingoGame





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
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var socketio = require('socket.io');
 
var app = express();
 
app.configure(function () {
    app.set('port', process.env.PORT || 33333);
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));
});
 
app.configure('development', function () {
    app.use(express.errorHandler());
});
 
//development only
if ('development' == app.get('env')) {
    app.use(express.errorHandler());
}
 
app.get('/', routes.index);
app.get('/main', routes.main);
app.get('/users', user.list);
 
var server = http.createServer(app);
 
var io = socketio.listen(server);
 
server.listen(app.get('port'), function () {
    console.log("express server listening on port " + app.get('port'));
});
 
var users = {};
var user_count = 0;
var turn_count = 0;
 
io.sockets.on('connection', function (socket) {
    
    socket.on('join', function (data) {
        var username = data.username;
        
        
        socket.username = username;
        
        users[user_count] = {};
        users[user_count].name = username;
        users[user_count].turn = false;
        
        io.sockets.emit('update_users', users);
        
        user_count++;
    });
    
    socket.on('game_start', function (data) {
        socket.broadcast.emit ("game_started", data);
        users[turn_count].turn= true;
 
        io.sockets.emit('update_users', users);
    });
    
    socket.on('select', function (data) {
        console.log('select');
        socket.broadcast.emit("check_number", data);
 
        users[turn_count].turn = false;
        turn_count++;
        if (turn_count >= user_count) {
            turn_count = 0;
        }
        users[turn_count].turn = true;
 
        io.sockets.emit('update_users', users);
    });
    
    socket.on('disconnect', function (data) {
        delete users[socket.username];
        
        io.sockets.emit('update_users', users);
 
        user_count--;
    });
});
 
 
cs
cs
서버 코드이다.

서버는 데이터만 뿌려주는 역할을 한다. 단지 경유지점 같은것. ㅎㅎ
사실 서버라는게 클라이언트들을 연결을 해주기 위해 있는것이다(직접적으로 연결이 안되있으니... 경유지점을 만들었느데, 그것이 서버)
그냥 특정 이벤트에 대해서 그에 맞게 데이터를 적절히 뿌려주면 된다.

그럼 이제 클라이언트 소스들을 봐야겠다.

1
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
extends layout
 
block content
    h1= title
    p Welcome! #{username}
 
    #game
        #bingo
            table.bingo-board
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
            #user
                #list
                #logs
                input#start_button(type='button', value='Game Start!')
                input#username(type='hidden', value='#{username}')
                inpup#chat(type='text', value='chat')
cs

cs
main.jade

이건 html처럼은 생겼는데 html이 아니다.
jade라는 템플릿 엔진.

jade라는 놈은 html과 다르게 동적으로 표현이 가능하다.
태그는 html과 같다.


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
var bingo = {
    is_my_turn: Boolean,
    socket: null,
    
    init: function () {
        var self = this;
        
        this.is_my_turn = true;
        
        this.socket = io.connect();
        
        this.socket.on("check_number", function (data) {
            self.where_is_it(data.num);
            self.print_msg(data.username + "checked'" + data.num + "'");
        });
        
        this.socket.on("game_started", function (data) {
            self.print_msg(data.username + " started this game.");
            $("#start_button").hide();
        });
        
        this.socket.on("update_users", function (data) {
            self.update_userlist(data);
        });
        
        //join
        this.socket.on("connect", function () {
            self.socket.emit("join", { username: $("#username").val() });
        });
        
        var numbers = [];
        for (var i = 0; i <= 25 ; i++) {
            numbers.push(i);
        }
        
        numbers.sort(function (a, b) {
            var temp = parseInt(Math.random() * 10);
            var isOddOrEven = temp % 2;
            var isPosOrNeg = temp > 5? 1:-1;
            return (isOddOrEven * isPosOrNeg);
        });
        
        $("table.bingo-board td").each(function (i) {
            $(this).html(numbers[i]);
            
            $(this).click(function () {
                self.select_num(this);
            });
        });
        
        $("#start_button").click(function () {
            self.socket.emit("game_start", { username: $("#username").val() });
            alert('start');
            self.print_msg("You started this game.");
            $("#start_button").hide();
        });
    },
    
    select_num: function (obj) {
        if (this.is_my_turn && !$(obj).attr("checked")) {
            
            this.socket.emit("select", {username: $("#username").val(), num: $(obj).text() });
 
            this.check_num(obj);
            
            this.is_my_turn = false;
        }
        else {
            this.print_msg("it is not your turn");
        }
    },
    
    where_is_it: function (num) {
        var self = this;
        var obj = null;
 
        $("#table.bingo-board td").each(function (i) {
            if ($(this).text() == num) {
                self.check_num(this);
            }
        });
    },
    
    check_num: function (obj) {
        $(obj).css("text-decoration", "line-through");
        $(obj).css("color", "#ccc");
        $(obj).attr("checked", "true");
    },
    
    update_userlist: function (data) {
        var self = this;
        $("#list").empty();
        
        console.log(data);
        
        $.each(data, function (key, value) {
            var turn = "(-) ";
            if (value.turn == true) {
                turn = "(*) ";
                console.log(value.name);
                console.log($("#username").val());
                if (value.name == $("#username").val()) {
                    self.is_my_turn = true;
                }
            }
            $("#list").append(turn + value.name + "
");
        });
    } ,
    
    leave: function () {
    },
    
    print_msg: function (msg) {
        $("#logs").append(msg + "
");
    }
};
 
$(document).ready(function () {
    bingo.init();
});
cs
 cs
main.js

이넘 덕분에 main.jade는 동적인 페이지가 된다. 하하......ㅋㅋㅋ

머 암튼 근데 이렇게 파일들이 분리가 되있는데 어떻게 하나로 될까?

영상에서 보시다시피 이런 파일을 그냥 불러온다.



1
2
3
4
5
6
7
8
9
10
11
doctype 
html
    head
       title= title
       link(rel='stylesheet', href='/stylesheets/style.css')
       script(src='/javascripts/jquery-2.1.4.min.js')
       script(src='/javascripts/main.js')
       script(src='/socket.io/socket.io.js')
    body
        block content


layout.jade

이것도 jade파일이다 실질적으로 이넘이 main.jade위에 붙게 된다.
머 암튼...
잘보면 css파일도 불러온다.


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
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00b7ff;
}
#game {
    width: 320px;
    height: 300px;
}
#bingo {
    float:left;
}
#user {
    float:right;
}
#list {
    border: 1px solid gray;
    width: 140px;
    height: 50px;
    overflow: auto;
    margin-bottom: 10px;
}
#logs {
    border: 1px solid gray;
    width: 140px;
    height: 50px;
    overflow: auto;
    margin-bottom: 10px;
}
.bingo-board {
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-spacing: 0px;
    margin-bottom: 10px;
}
.bingo-board td {
    width: 25px;
    height: 25px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}
#input_box {
    width: 140px;
    height: 50px;
    margin-bottom: 10px;
}
#user_input {
    border: 1px solid gray;
    width: 140px;
}
cs
style.css

css는 이렇게 구상이 되있다.

 

/은 state code가 200이다 정상적으로 출력이 됬다는 말이다.

그아래에 있는 아이들
css
main.js
jquery들은 status code가 304네?

정상이다.
404, 505만 안뜨면 된다
URL 경로가 잘못됬거나, 파일을 찾을수 없을 때 에러가 나타난다. ㅋ
처음에 삽질하느라 404, 500에러를 겁나봤다 ㅋㅋㅋ 이 두 에러는 각각 노랑 적색으로 나타난다.


304는 redirect 됬다는 말
그냥 파일을 불러왔다는거로 이해하면 될듯하다.

이렇게 main.jade위에 코드를 붙인다. 잘 보면 링크가 걸려있는데 링크를 들어가면 
위에 친 소스가 나타난다.

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[javascript] 자스민(Jasmine)을 이용하여 TDD 작성후 웹 페이지에 적용해보자.

 다음 코드는  멍개의 코드 저장소 에 있습니다. 코드를 확인하고 싶으면 여기를 click 하세요 시작하기 전에... 책을 시작하기 전에 책에서 사용하는 자스민을 어떤식으로 이용하여 테스트 코드를 작성할 수 있는지 봐보자. 자스민 사용방법 테스트 러너파일 작성 테스트 러너란 자스민 코드와 소스파일, 스펙을 참조하는 html 파일 app_spec.html 테스트 코드를 작성하기 전에 첫째로 js 파일을 UI에서 완전히 분리하여 작성하는 것이 중요하다. 모듈패턴 테스트 코드가 가능한 코드를 작성하기 위해서는  모듈패턴 을 사용하도록 합니다. 모듈패턴이란? 함수로 데이터를 감추고, 모듈 API를 담고있는 객체를 반환하는 형태다. 모듈패턴은 자바스크립트에서 가장 많이 사용하는 패턴입니다. 두 가지 형태로 모듈패턴을 사용할 수 있습니다. 첫 번째는 호출하는 방식으로 사용합니다. 두 번째는 즉시 실행 함수 기반으로 사용할 수 있습니다. 여기서 즉시 실행 함수를  IIFE(Immediately Invoked Function Expression) 라고 합니다. 모듈 패턴 코드를 어떤식으로 작성할 수 있는지 간단하게 확인해보겠습니다. // 공간생성 let App = App || {}; // 생성된 공간에 함수를 추가한다. 인자로 함수를 넘긴다.( == 의존성 있는 함수를 주입) App.Person = function(God){ let name = God.makeName(); // API 노출 return { getName: function(){return name;}, setName: function(newName){name = newName;} } }; App 변수를 생성합니다. 생선된 변수에 Person() 함수를 만듭니다. person() 함수는 첫 번째 인자로 함수를 전달받습니다. retur...
댓글 1개
자세한 내용 보기

[알고리즘] snake게임 알고리즘

막무가네로 알고리즘을 공부하면 재미가 없으니 게임을 접목하여 다루어 보도록 하겠습니다. 게임의 대상은 스네이크 게임입니다. 많은 사람들은 어릴 때 뱀게임을 많이 해봤을 것 입니다. 이번에 다뤄볼 주제는 뱀이 움직임을 어떻게 구현을 할지 알아보겠습니다. 뱀은 크게 3가지의 경우가 있습니다 1. 가장 중요한 뱀을 움직이기 2. 음식먹기 이때 뱀은 크기가 늘어나야 합니다. 3. 뱀이 움직이는 정책   - 뱀이 움직이지 못하는 경우는 : 우측방향에서 좌측 방향으로 OR 위에 아래 방향고 같이 180도 반전되는 움직임은 막겠습니다. 순수한 알고리즘을 만드는 과정이기 때문에 음식을 먹었는지 안먹었는지 판단하는 부분은 랜덤으로 판단을 하도록 하겠습니다. def is_eat(): return random.choice([1, 0]) 랜덤으로 1, 0을 반환을 해줍니다. 실제로 게임을 만든다면 해당 함수는 뱀의 머리가 음식의 좌표와 같은지 검사를 해주면 되겠습니다. key_position_map = { 'w': [-1, 0], # up 's': [1, 0], # down 'a': [0, -1], # left 'd': [0, 1] # right } direction = key_position_map.get('d') 다음으로는 키맵핑을 한 오브젝트 입니다. direction은 현재 뱀의 방향을 나타냅니다. snake_body = [[2, 3], [1, 3],[1, 2], [1, 1]] 주인공이 되는 뱀의 좌표들 입니다. while True: key = input() new_direction = key_position_map.get(key) if new_direction and direction_check(direction, new_direction): directi...
댓글 쓰기
자세한 내용 보기

[react] react 작업환경 설정

react-boilerplate 사용방법 해당 프로젝트는 일반적인 react를 사용하기 전에 이런저런 환경설정을 미리 셋팅을 해둔 프로젝트 입니다. 해당 프로젝트는 아래의 설정들을 거쳐 해당 명령어만 실행을 해주면 일반적인 react 프로젝트를 실행 시킬 수 있습니다. 1. git clone https://github.com/pjt3591oo/react-boilerplate.git - 프로젝트 클론하기 2. npm install – Dependency 설치하기 3. npm start – 개발 서버 실행하기 (포트: 7777) 위 명령어를 실행 하였으면 http://localhost:7777로 접속해보기 해당 프로젝트의 자세한 설명은 아래에 작성하였습니다. 시작하기 앞서서 npm 3.10.6이상 버전 설치 권장 : npm의 버전마다 설치 방식이 달라 2.x버전에서 아래에 나와있는 모듈을 설치 할 때 상당히 오래 걸릴 수 있습니다. 1. Global Package 설치하기 babel  : 아직 ECMAScript6를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용할 수 있게 해줌. webpack  : 모듈 번들러로서, Browserify처럼 브라우저 위에서 import(require)을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다. webpack-dev-server  : webpack에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-=loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있다. $ npm install -g babel webpack webpack-dev-server 2. project생성 $ mkdir react-tutorial && cd react-tutorial $ npm init 3. Dependency 및 Plugin 설치 react사용을 위한 ...
댓글 쓰기
자세한 내용 보기