Coffeescript Game Tutorial the Keyboard

ProgrammingCoffeScript
CoffeScript, Game, Programming

키보드 이벤트를 추가한 코드이다.

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
rightDown = false
leftDown = false
# set rightDown or leftDown if the right or left key are down
document.onkeydown = (evt) ->
switch evt.keyCode
when 39 then rightDown = true
when 37 then leftDown = true
# and unset then when the right or left key is released
document.onkeyup = (evt) ->
switch evt.keyCode
when 39 then rightDown = false
when 37 then leftDown = false
draw = ->
clear()
circle(x, y, 10)
# move the paddle if left or right is currently pressed
paddlex += 5 if rightDown
paddlex -= 5 if leftDown
rect(paddlex, HEIGHT-paddleh, paddlew, paddleh)
dx = -dx if x + dx > WIDTH or x + dx < 0
if y + dy < 0 then dy = -dy
else if y + dy > HEIGHT
if x > paddlex and x < paddlex + paddlew
dy = -dy
else
# game over, so stop the animation
clearInterval(intervalId)
x += dx;
y += dy;
window.onload = ->
init()

Reference

Share Comments

Coffeescript Game Tutorial Add a Paddle

ProgrammingCoffeeScript
CoffeeScript, Game, Programming

화면 하단에 막대기를 추가한 코드이다.

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
paddlex = 0
paddleh = 0
paddlew = 0
init_paddle = ->
paddlex = WIDTH / 2
paddleh = 10
paddlew = 75
draw = ->
clear()
circle(x, y, 10)
rect(paddlex, HEIGHT - paddleh, paddlew, paddleh)
dx = -dx if x + dx > WIDTH or x + dx < 0
if y + dy < 0
dy = -dy
else if y + dy > HEIGHT
if x > paddlex and x < paddlex + paddlew
dy = -dy
else
clearInterval(intervalId)
x += dx;
y += dy;
window.onload = ->
init()
init_paddle()

Reference

Share Comments

Coffeescript Game Tutorial Bounce

ProgrammingCoffeScript
CoffeScript, Game, Programming

공 튀기는 코드이다.

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
### BEGIN LIBRARY CODE ###
x = 150
y = 150
dx = 2
dy = 4
ctx = null
WIDTH = 0
HEIGHT = 0
init = ->
canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
WIDTH = canvas.width
HEIGHT = canvas.height
setInterval(draw, 10)
circle = (x, y, r) ->
ctx.beginPath()
ctx.arc(x, y, r, 0, Math.PI*2, true)
ctx.closePath()
ctx.fill()
rect = (x, y, w, h) ->
ctx.beginPath()
ctx.rect(x, y, w, h)
ctx.closePath()
ctx.fill()
clear = ->
ctx.clearRect(0, 0, WIDTH, HEIGHT)
### END LIBRARY CODE ###
draw = ->
clear()
circle(x, y, 10)
dx = -dx if x + dx > WIDTH or x + dx < 0
dy = -dy if y + dy > HEIGHT or y + dy < 0
x += dx;
y += dy;
window.onload = ->
init()

Reference

Share Comments

Coffeescript Game Tutorial Libary an Interlude

ProgrammingCoffeeScript
CoffeeScript, Game, Programming

지금까지 했던걸 라이브러리 형태로 정리한 코드이다.

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
# BEGIN LIBRARY CODE
x = 150
y = 150
dx = 2
dy = 4
WIDTH = 0
HEIGHT = 0
ctx = null
init = ->
canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
WIDTH = canvas.width
HEIGHT = canvas.height
intervalId = setInterval(draw, 10)
circle = (x, y, r) ->
ctx.beginPath()
ctx.arc(x, y, r, 0, Math.PI*2, true)
ctx.closePath()
ctx.fill()
rect = (x, y, w, h) ->
ctx.beginPath()
ctx.rect(x, y, w, h)
ctx.closePath()
ctx.fill()
clear = ->
ctx.clearRect(0, 0, WIDTH, HEIGHT)
# END LIBRARY CODE
draw = ->
clear()
circle(x, y, 10)
x += dx;
y += dy;
window.onload = ->
init()

Reference

Share Comments

Coffeescript Game Tutorial Action

ProgrammingCoffeeScript
Canvas, CoffeeScript, Programming

원이 대각선 아래로 움직이는 코드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
x = 150
y = 150
dx = 2
dy = 4
ctx = null
init = ->
    canvas = document.getElementById("myCanvas")
    ctx = canvas.getContext("2d")
    return setInterval(draw, 10)
draw = ->
    ctx.clearRect(0, 0, 300, 300)
    ctx.beginPath()
    ctx.arc(x, y, 10, 0, Math.PI*2, true)
    ctx.closePath()
    ctx.fill()
    x += dx;
    y += dy;
window.onload = ->
    init()

Reference

Share Comments

Coffeescript Game Tutorial Add Some Color

ProgrammingCoffeeScript
Canvas, CoffeeScript, Programming

색깔 원을 그리는 코드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload = ->
    # get a reference to the canvas
    canvas = document.getElementById("canvas")
    ctx = canvas.getContext("2d")
    ctx.fillStyle = "#00A308"
    ctx.beginPath()
    ctx.arc(220, 220, 50, 0, Math.PI*2, true)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = "#FF1C0A"
    ctx.beginPath()
    ctx.arc(100, 100, 100, 0, Math.PI*2, true)
    ctx.closePath()
    ctx.fill()
    # the rectangle is half transparent
    ctx.fillStyle = "rgba(255, 255, 0, 0.5)"
    ctx.beginPath()
    ctx.rect(15, 150, 120, 120)
    ctx.closePath()
    ctx.fill()

Reference

Share Comments

Coffeescript Game Tutorial Draw a Circle

Programming
Canvas, CoffeeScript, Programming

캔버스에 동그라미를 그리는 코드이다.

1
2
3
4
5
6
7
8
9
10
11
window.onload = ->
    # get a reference to the canvas
    canvas = document.getElementById("canvas")
    ctx = canvas.getContext("2d")
    # draw a circle
    ctx.beginPath()
    ctx.arc(75, 75, 10, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fill()

Reference

Share Comments

Coffeescript Game Tutorial Introduction

ProgrammingCoffeeScript
CoffeeScript, Programming

HTML5의 Canvas를 이용해 게임을 만들어보자. 하지만 커피 스크립트라는 언어의 매력에 빠져 자바 스크립트 공부는 바이바이~ 해버렸다. 자바 스크립트만큼 공부할 자료가 많지는 않지만 언어가 워낙 간결하다보니 조금씩 해보면 금방 익힐… 수 있을까? ㅋㅋ

자자 서론이 너무 길다. 난 글 적는거 싫어하므로 냅다 소스코드만 보여줄거다.

보고 공부할 자료는 http://billmill.org/static/canvastutorial/ 의 자바 스크립트로 게임을 만드는 튜토리얼이다. 이 내용을 커피 스크립트로 코딩할거니 알아서 비교해서 보기 바란다;;

다음 글부터 시작이다. 고고고~

Share Comments

Basic Audio

ProgrammingLibGDX
Android, Java, LibGDX, Programming

튜토리얼 보면서 따라한 코드이다.
배경음악은 주구장창 흘러나오고, 마우스나 손가락으로 터치할때마다 효과음이 발생한다.

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
package com.awesome;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.audio.Sound;
import com.badlogic.gdx.files.FileHandle;
public class SuperAwesomeExample implements ApplicationListener {
    Music music;
    Sound sound;
    @Override
    public void create() {
        FileHandle musicFile = Gdx.files.internal("data/Kalimba.mp3");
        music = Gdx.audio.newMusic(musicFile);
        FileHandle soundFile = Gdx.files.internal("data/MediumExplosion8-Bit.ogg");
        sound = Gdx.audio.newSound(soundFile);
        music.setLooping(true);
        music.setVolume(0.5f);
        music.play();
    }
    @Override
    public void render() {
        if(Gdx.input.justTouched()) {
            sound.play();
        }
    }
    @Override
    public void resize(int arg0, int arg1) {
        // TODO Auto-generated method stub
    }
    @Override
    public void pause() {
        // TODO Auto-generated method stub
    }
    @Override
    public void resume() {
        // TODO Auto-generated method stub
    }
    @Override
    public void dispose() {
        music.dispose();
        sound.dispose();
    }
}
Share Comments

Basic File I/O

ProgrammingLibGDX
Android, Java, LibGDX, Programming

File IO 방법은 간단하다.

네가지 모드가 있지만 우선 자주 쓰는건 두가지 인듯.
internal은 해당 프로젝트의 디렉토리를 기준으로 한다.(안드로이드의 경우 asset)
external은 home 디렉토리를 기준으로 한다.(안드로이드의 경우 sdcard)

1
2
FileHandle file = Gdx.files.internal("data/test.txt");
String txt = file.readString();

위와 같이 텍스트 파일을 처리할 수 있다.

p.s) 공부하면서 쓰는 내용이라 체계적으로 정리가 안되네.
시간나면 좀 더 고쳐봐야겠다.

Share Comments