290 lines
8.4 KiB
JavaScript
290 lines
8.4 KiB
JavaScript
//handle controls, only space in this game
|
|
document.onkeypress = function(e){
|
|
e = e || window.event;
|
|
kcode = e.keyCode || e.which;
|
|
if (kcode == 32 && jump_height==0){ //space bar
|
|
//score.innerHTML = parseInt(score.innerHTML) + 1;
|
|
if(running == false){
|
|
score.innerHTML = 0;
|
|
message.style.display = 'none';
|
|
reset();
|
|
drawScene();
|
|
return
|
|
}
|
|
jump_force = 8;
|
|
}
|
|
};
|
|
|
|
var canvas = document.getElementById("scene");
|
|
var score = document.getElementById("score");
|
|
var message = document.getElementById("message");
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
var canvas_width = canvas.width; //800;
|
|
var canvas_height = canvas.height; //800;
|
|
//~ var y = canvas_height / 2; // # middle of the screen
|
|
var canvas_center_x = canvas_width / 2; // # middle of the screen
|
|
var canvas_center_y = canvas_height / 2; // # middle of the screen
|
|
|
|
//~ var grd = ctx.createLinearGradient(0, canvas_center_y, 0, canvas_height);
|
|
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeStyle = '#ff0000';
|
|
|
|
var running = false;
|
|
|
|
// wave settings
|
|
var wave_points = 10;
|
|
var sample_rate = canvas_width; // sample rate
|
|
var frequency = 8.0; // The frequency of a sine wave is the number of complete cycles that happen every second.
|
|
var amplitude = 30.0; // how many pixels tall the waves with rise/fall.
|
|
var velocity = parseFloat(canvas_width); //
|
|
var wavelength = velocity / frequency; //λ
|
|
|
|
var timeloop_multiplier = 1;
|
|
|
|
var t = 0;
|
|
|
|
var pi2 = Math.PI * 2.0;
|
|
var pi2_frequency = pi2 * frequency;
|
|
|
|
|
|
window.addEventListener('resize', resizeCanvas, false);
|
|
|
|
function changeWave(freq, amp){
|
|
frequency = freq; // The frequency of a sine wave is the number of complete cycles that happen every second.
|
|
amplitude = amp; // how many pixels tall the waves with rise/fall.
|
|
wavelength = velocity / frequency; //λ
|
|
}
|
|
|
|
function resizeCanvas(){
|
|
canvas.width = window.innerWidth;
|
|
//~ canvas.height = window.innerHeight;
|
|
canvas_width = canvas.width; //800;
|
|
canvas_height = canvas.height; //800;
|
|
y = canvas_height / 2; // # middle of the screen
|
|
canvas_center_x = canvas_width / 2; // # middle of the screen
|
|
canvas_center_y = canvas_height / 2; // # middle of the screen
|
|
|
|
// Calculate gradient in relation to the screen size
|
|
grd = ctx.createLinearGradient(0, canvas_center_y, 0, canvas_height);
|
|
grd.addColorStop(0, "#0087A8");
|
|
grd.addColorStop(1, "#0087A8");
|
|
ctx.fillStyle = grd;
|
|
}
|
|
resizeCanvas();
|
|
|
|
|
|
function Sprite(img, width, height, positions){
|
|
this.img = new Image();
|
|
this.img.src = img;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.angle = 0;
|
|
this.positions = positions;
|
|
this.center = [width / 2, height / 2];
|
|
this.hit = false;
|
|
}
|
|
|
|
|
|
function sprite_intersect(sprite1, sprite2){
|
|
x = sprite1.position[0] - sprite2.position[0];
|
|
y = sprite1.position[1] - sprite2.position[1];
|
|
return (x < sprite1.width && x > 0) && (y < sprite1.height && y > 0);
|
|
}
|
|
|
|
function timeloop(wavelength, multiplyer){
|
|
/* looped time, instead of continuosly counting up
|
|
# we just repeat once one wavelength has been travelled*/
|
|
var a = 0;
|
|
wavelength_max = Math.ceil(wavelength / multiplyer);
|
|
while (true){
|
|
if (a > wavelength_max)
|
|
a = 0;
|
|
//~ yield a;
|
|
a += multiplyer;
|
|
}
|
|
}
|
|
|
|
function timeloop_new(t, wavelength, multiplyer){
|
|
/* looped time, instead of continuosly counting up
|
|
we just repeat once one wavelength has been travelled */
|
|
wavelength_max = Math.ceil(wavelength / multiplyer) * multiplyer;
|
|
t += multiplyer;
|
|
// 0 and wavelength are the same, so start on multiplyer ie first step
|
|
if (t > wavelength_max)
|
|
t = multiplyer;
|
|
return t;
|
|
}
|
|
|
|
function wave_point(time, x, y, amplitude, frequency, sample_rate){
|
|
cr = Math.cos((pi2_frequency * ((x + time) / sample_rate)))
|
|
new_y = y + amplitude * cr;
|
|
return [x, new_y, cr];
|
|
}
|
|
|
|
// calculate vector between two points and normalise the result
|
|
function vector_norm(p1, p2){
|
|
a1 = p2[0] - p1[0];
|
|
a2 = p2[1] - p1[1];
|
|
length = Math.sqrt((a1 * a1) + (a2 * a2));
|
|
return [a1 / length, a2 / length];
|
|
}
|
|
|
|
function draw_triangle(p1, p2, p3){
|
|
|
|
}
|
|
|
|
// calculate the dot product of two vectors then pass the dot to
|
|
// acos to get a angle in radians
|
|
function triangle_angle(p1, p2, p3){
|
|
a = vector_norm(p1, p2); // vector 1
|
|
b = vector_norm(p1, p3);
|
|
dot = a[0] * b[0] + a[1] * b[1];
|
|
return Math.acos(dot);
|
|
}
|
|
|
|
function calculate_image_angle(p1, p2){
|
|
// Draw the duck, calculate the angle by creating a right angled traingle from the wave points
|
|
if(p1[1] > p2[1]){
|
|
angle = -triangle_angle(
|
|
[p1[0] - 10, p1[1]],
|
|
p2,
|
|
p1);
|
|
}else{
|
|
angle = triangle_angle(
|
|
[p1[0] - 10, p1[1]],
|
|
p2,
|
|
p1);
|
|
}
|
|
return angle;
|
|
}
|
|
|
|
|
|
function draw_character(sprite_obj, point, angle){
|
|
// Draw the duck
|
|
ctx.save();
|
|
ctx.translate(point[0], point[1] - sprite_obj.center[1]);
|
|
ctx.rotate(angle);
|
|
ctx.drawImage(sprite_obj.img, -16, -16, sprite_obj.width, sprite_obj.height);
|
|
ctx.restore();
|
|
}
|
|
|
|
|
|
function draw_wave(){
|
|
// Draw the wave polygon
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, canvas_height);
|
|
for (p=0;p < points.length; p=p+1){
|
|
ctx.lineTo(parseInt(points[p][0]), parseInt(points[p][1]));
|
|
}
|
|
ctx.lineTo(canvas_width, canvas_height);
|
|
ctx.lineWidth = 10;
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
}
|
|
|
|
function draw_wave_points(){
|
|
// Draw the wave points, usefull for debuging
|
|
ctx.beginPath();
|
|
for (p=0;p < points.length; p=p+1){
|
|
ctx.arc(parseInt(points[p][0]), parseInt(points[p][1]),2,0,2*Math.PI);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Calculate the initial wave polygon, at time 0 then step to the next time index
|
|
var points = new Array();
|
|
var point = null;
|
|
for (x_pos = 0; x_pos < canvas_width + 1; x_pos = x_pos + 10) {
|
|
for (p=0;p < points.length; p = p + 1){
|
|
points[p][0] = points[p][0] - wave_points;
|
|
}
|
|
point = wave_point(time=t, x=canvas_width, y=canvas_center_y, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate);
|
|
points.push([point[0], point[1]]);
|
|
t = timeloop_new(t, wavelength, timeloop_multiplier);
|
|
}
|
|
|
|
|
|
var player = new Sprite('icon.png', 32, 32, [0, 0]);
|
|
var barrel = new Sprite('rock.png', 32, 32, [0, 0]);
|
|
|
|
var angle = null;
|
|
var center_point = Math.ceil(points.length / 2);
|
|
|
|
var barrel_pos = points.length;
|
|
|
|
var rotate = 0;
|
|
|
|
var world_gravity = 0.75;
|
|
var jump_height = 0;
|
|
var jump_force = 0;
|
|
|
|
|
|
function reset() {
|
|
barrel_pos = points.length;
|
|
jump_height = 0;
|
|
jump_force = 0;
|
|
}
|
|
|
|
function drawScene(){
|
|
running = true;
|
|
ctx.clearRect(0, 0, canvas_width, canvas_height);
|
|
|
|
// shift each points along by wave point distance, remove the first item on the array
|
|
// push a new point to the end of the wave
|
|
for (p=0;p < points.length; p = p + 1){
|
|
points[p][0] = points[p][0] - wave_points;
|
|
}
|
|
points.shift();
|
|
points.push(wave_point(time=t, x=canvas_width, y=canvas_center_y, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate));
|
|
|
|
if (jump_height > 0 || jump_force > 0){
|
|
jump_height += jump_force;
|
|
jump_force -= world_gravity;
|
|
}else{
|
|
jump_force = 0;
|
|
jump_height = 0;
|
|
}
|
|
|
|
//angle = calculate_image_angle(points[center_point - 1], points[center_point]);
|
|
rotate = rotate + 0.1;
|
|
player.position = [points[center_point][0], points[center_point][1] - jump_height];
|
|
draw_character(
|
|
player,
|
|
[points[center_point][0], points[center_point][1] - jump_height],
|
|
rotate
|
|
);
|
|
|
|
if (barrel_pos > 0){
|
|
barrel_pos -= 1;
|
|
barrel.position = [points[barrel_pos][0], points[barrel_pos][1]];
|
|
draw_character(
|
|
barrel,
|
|
[points[barrel_pos][0], points[barrel_pos][1]],
|
|
0
|
|
);
|
|
if(sprite_intersect(player, barrel)){
|
|
console.log('hit');
|
|
running = false;
|
|
message.style.display = 'block';
|
|
}
|
|
if (barrel.position[0] < canvas_width / 2 && barrel.hit==false){
|
|
score.innerHTML = parseInt(score.innerHTML) + 1;
|
|
barrel.hit = true;
|
|
}
|
|
}else{
|
|
barrel_pos = points.length;
|
|
barrel.hit = false;
|
|
}
|
|
|
|
draw_wave();
|
|
//~ draw_wave_points();
|
|
|
|
wavelength = changeWave(frequency, amplitude);
|
|
t = timeloop_new(t, wavelength, timeloop_multiplier);
|
|
if (running == true){
|
|
requestAnimationFrame(drawScene);
|
|
}
|
|
}
|