coffeeScriptの実装

Question

実際に私はCoffeescriptとsketch.jsを初めて使用しています。だから、私はhtmlでcoffeescriptを実装できる方法を知りたがっています。

具体的には、私はhttp://codepen.io/anon/pen/YVxzyJスケッチのバブルの例をhtml5キャンバスに実装したいところです。ここにはcoffeescriptが含まれています。私は検索しようとしましたが、役に立たない解決策は見つかりませんでした。

# 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にバブルの例を作成するために使用されるのCoffeeScriptであり、それは唯一、次のようであるCSSを持っています

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

あなたの答えは私にとって本当に役立つだろう。

Answer 1

コーヒースクリプトをhtmlで実装する場合は、thisをご覧ください。

コーヒースクリプトコードをHTMLファイルで実行するには、簡単に<script type="text/coffeescript" src="app.coffee"></script>を追加する必要があります。

他の場合、私は人々がtype="coffeescript"とtype="coffee"の属性を使用しているのを見てきました。