coffeeScript Implementation in html

Question

사실 저는 Coffeescript와 sketch.js를 처음 사용하고 있습니다. 그래서 나는 html로 coffeescript를 구현할 수있는 방법을 알고 싶었습니다.

구체적으로 말해서 http://codepen.io/anon/pen/YVxzyJ은 coffeescript가 포함 된 html5 캔버스에서 sketch.js 풍선 예제를 구현하고 싶습니다. 나는 검색하려고했지만 유용한 해결책을 찾지 못했습니다.

# General Variables 
sketch = Sketch.create() 
particles = [] 
particleCount = 750 
sketch.mouse.x = sketch.width/2 
sketch.mouse.y = sketch.height/2 
sketch.strokeStyle = 'hsla(200, 50%, 50%, .4)' 
sketch.globalCompositeOperation = 'lighter' 

# Particle Constructor 
Particle = -> 
    this.x = random(sketch.width) 
    this.y = random(sketch.height, sketch.height * 2) 
    this.vx = 0 
    this.vy = -random(1, 10)/5 
    this.radius = this.baseRadius = 1 
    this.maxRadius = 50 
    this.threshold = 150 
    this.hue = random(180, 240) 

# Particle Prototype 
Particle.prototype = 
    update: -> 
    # Determine Distance From Mouse 
    distx = this.x - sketch.mouse.x 
    disty = this.y - sketch.mouse.y 
    dist = sqrt(distx * distx + disty * disty) 

    # Set Radius 
    if dist < this.threshold 
     radius = this.baseRadius + ((this.threshold - dist)/this.threshold) * this.maxRadius 
     this.radius = if radius > this.maxRadius then this.maxRadius else radius 
    else 
     this.radius = this.baseRadius 

    # Adjust Velocity 
    this.vx += (random(100) - 50)/1000 
    this.vy -= random(1, 20)/10000 

    # Apply Velocity 
    this.x += this.vx 
    this.y += this.vy 

    # Check Bounds 
    if this.x < - this.maxRadius || this.x > sketch.width + this.maxRadius || this.y < - this.maxRadius 
     this.x = random(sketch.width)  
     this.y = random(sketch.height + this.maxRadius, sketch.height * 2) 
     this.vx = 0 
     this.vy = -random(1, 10)/5 
    render: -> 
    sketch.beginPath() 
    sketch.arc(this.x, this.y, this.radius, 0, TWO_PI) 
    sketch.closePath() 
    sketch.fillStyle = 'hsla(' + this.hue + ', 60%, 40%, .35)' 
    sketch.fill() 
    sketch.stroke() 

# Create Particles 
z = particleCount 
while z-- 
    particles.push(new Particle()) 

# Sketch Clear 
sketch.clear = -> 
    sketch.clearRect(0, 0, sketch.width, sketch.height) 

# Sketch Update 
sketch.update = -> 
    i = particles.length 
    particles[ i ].update() while i-- 

# Sketch Draw 
sketch.draw = -> 
    i = particles.length 
    particles[ i ].render() while i-- 

이

은 sketch.js 거품 예제를 만드는 데 사용되는 커피 스크립트이며, 그것은 단지 다음과 CSS를 가지고 :

이

canvas { 
    background: #023; 
    display: block; 
} 

당신의 대답은 나를 위해 정말 도움이 될 것입니다.

Answer 1

커피 스크립트를 html로 구현하려는 경우 this을 살펴보십시오.

커피 스크립트 코드를 HTML 파일에 실행하려면 간단히 <script type="text/coffeescript" src="app.coffee"></script>을 추가해야합니다.

다른 경우 사용자가 type="coffeescript" 및 type="coffee"의 속성을 사용하는 것으로 나타 났으므로 사용자를 위해 잘 작동 할 수도 있습니다.