BezierDemo

A simple Tower Defense game in Javascript and the HTML5 canvas element

by Adrianus Kleemans

HTML

<canvas id="canvas" width="410" height="310">
    Please update your browser.
</canvas>

</p>
<table border="0">
  <tr>
    <td><input type="checkbox" name="color" value="rot" id="red"  checked="true"/> red (original Bezier with n=2: &#934;1 = &#934;2 = 2)</td>
    <td>Speed: <input type="text" id="speed" value="1" size="3"/></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="color" value="blau" id="blue" checked="true"/> blue (&#934;1 = 1.5, &#934;2 = 1.5)</td>
    <td>Trace: <input type="checkbox" name="trace" value="green" id="trace" checked="true"/></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="color" value="gr&uuml;n" id="green" checked="true"/> green (&#934;1 = 2,  &#934;2 = 1.5)</td>
  </tr>
</table>
<br /> 
<p>
    <button onclick="start()">Play</button>
    <button onclick="stop()">Stop</button>
    <button onclick="reset()">Reset</button>
</p>
<p id="log">  </p><br />

CSS

table {
  width: 400px;
}

JavaScript

var canvas;
var ctx;
var log;

var p0 = [200, 300];
var p1 = [50, 30];
var p2 = [300, 5];

var t = 0.0;
var timer;
var timer2;
var p_path = [];
var m_path = [];
var q_path = [];
var r_path = [];

var red_checkbox;
var green_checkbox; 
var blue_checkbox;
var trace_checkbox;

var running;

// helpers
function scalarMult(v, s) {
    return v.map(function(x) {return x * s;});
}

function vectorAdd(a, b) {
    var c = [0, 0];
    for (var i = 0; i < a.length; i++) {
        c[i] = a[i] + b[i];
    }
    return c;
}

// main

function bezier1(t) {
    return vectorAdd(scalarMult(p1, (1 - t)), scalarMult(p2, t));
}

function bezier2(t) {
    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 2)), scalarMult(p1, 2 * t * (1 - t))), scalarMult(p2, Math.pow(t, 2)));
}

function bezier_mod(t) {
    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 1.5)), scalarMult(p1, 2 * t *(1 - t))), scalarMult(p2, Math.pow(t, 1.5)));
}

function bezier_mod2(t) {
    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 2)), scalarMult(p1, 2 * t *(1 - t))), scalarMult(p2, Math.pow(t, 1.5)));
}

function plot() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#000000";
    ctx.fillRect(p0[0]-2, p0[1]-2, 5, 5);
    ctx.fillRect(p1[0]-2, p1[1]-2, 5, 5);
    ctx.fillRect(p2[0]-2, p2[1]-2, 5, 5);
    
    ctx.fillStyle = "#424242";
    ctx.beginPath();
    ctx.arc(m[0], m[1], 3, 0, 2*Math.PI);
    ctx.fill();
    for (var i = 0; i < m_path.length; i++) {
        ctx.fillRect(m_path[i][0], m_path[i][1], 1, 1);
    }
    
    if (red_checkbox.checked) {
        ctx.fillStyle = "#AA0000";
        ctx.beginPath();
        ctx.arc(p[0], p[1], 3, 0, 2*Math.PI);
        ctx.fill();
        if (trace_checkbox.checked) {
            for (var i = 0; i < p_path.length; i++) {
                ctx.fillRect(p_path[i][0], p_path[i][1], 1, 1);
            }
        }
    }
    
    if (green_checkbox.checked) {
        ctx.fillStyle = "#00AA00";
       ...