cpp in the browser

canvas.cpp

/**
    From the demo:
    http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

 */

#include <cheerp/client.h>
#include <cheerp/clientlib.h>
#include <cheerp/webgl.h>
#include <iostream>
#include <string>

using namespace cheerp;
using namespace client;

namespace client {
    bool get_isCocoonJS();
}

HTMLElement* body;
HTMLCanvasElement* canvas;

HTMLImageElement* bgImage;
HTMLImageElement* heroImage;
HTMLImageElement* monsterImage;
CanvasRenderingContext2D* ctx;

int done = 3;
int preload = 0;

double hero_speed = 256;
double hero_x = 0;
double hero_y = 0;

double monster_x = 0;
double monster_y = 0;

int monstersCaught = 0;
int key = -1;
double then;


// Reset the game when the player catches a monster
void reset() [[client]] {
	hero_x = parseInt(canvas->getAttribute("width"), 10) / 2;
	hero_y = parseInt(canvas->getAttribute("height"), 10) / 2;

	// Throw the monster somewhere on the screen randomly
	monster_x = 32 + (Math.random() * (parseInt(canvas->getAttribute("width"), 10) - 64));
	monster_y = 32 + (Math.random() * (parseInt(canvas->getAttribute("height"), 10) - 64));
}

// Update game objects
void update(double modifier) [[client]] {


	if (38 == key) { // Player holding up
		hero_y -= hero_speed * modifier;
	}
	if (40 == key) { // Player holding down
		hero_y += hero_speed * modifier;
	}
	if (37 == key) { // Player holding left
		hero_x -= hero_speed * modifier;
	}
	if (39 == key) { // Player holding right
		hero_x += hero_speed * modifier;
	}
	// Are they touching?
	if (
		hero_x <= (monster_x + 32)
		&& monster_x <= (hero_x + 32)
		&& hero_y <= (monster_y + 32)
		&& monster_y <= (hero_y + 32)
	) {
		++monstersCaught;
		reset();
	}

}

// Draw everything
void render() [[client]] {

    // draw images
    ctx->drawImage(bgImage, 0, 0);
    ctx->drawImage(heroImage, hero_x, hero_y);
    ctx->drawImage(monsterImage, monster_x, monster_y);

	// Score
	ctx->set_fillStyle(new String("rgb(250, 250, 250)"));
	ctx->set_font("24px Helvetica");
	ctx->set_textAlign("left");
	ctx->set_textBaseline("top");
	ctx->fillText("Goblins caught: ", 32, 32);
	ctx->fillText(std::to_string(monstersCaught).c_str(), 210, 32);
}

void gameLoop() [[client]] {
	double now =  (new Date())->getMilliseconds();
	double delta = now - then;

    if (delta > 0) {
        update(delta / 1000);
        render();
    }

	then = now;

	// Request to do this again ASAP
	requestAnimationFrame(Callback(gameLoop));
}

void startGame() [[client]] {
    then = (new Date())->getMilliseconds();
    reset();
    gameLoop();
}

void loadCallback() [[client]] {

    /**
        Using Ludei Canvas+?
     */
    bool isCocoonJS = get_isCocoonJS();

    /**
        Initialize the canvas
     */
    canvas = static_cast<HTMLCanvasElement*>(document.createElement(isCocoonJS ? "screencanvas" : "canvas"));
    ctx = static_cast<CanvasRenderingContext2D*>(canvas->getContext("2d"));
    canvas->setAttribute("width", 512);
    canvas->setAttribute("height", 480);
    document.get_body()->appendChild(canvas);

    /**
        preload background image
     */
    bgImage = static_cast<HTMLImageElement*>(document.createElement("img"));
    bgImage->setAttribute("src", "images/background.png");
    bgImage->addEventListener("load", Callback([](Event* e){
        if (++preload == done) startGame();
    }));

    /**
        preload hero image
     */
    heroImage = static_cast<HTMLImageElement*>(document.createElement("img"));
    heroImage->setAttribute("src", "images/hero.png");
    heroImage->addEventListener("load", Callback([](){
        if (++preload == done) startGame();
    }));

    /**
        preload monster image
     */
    monsterImage = static_cast<HTMLImageElement*>(document.createElement("img"));
    monsterImage->setAttribute("src", "images/monster.png");
    monsterImage->addEventListener("load", Callback([](){
        if (++preload == done) startGame();
    }));

    /**
        keydown event
     */
    addEventListener("keydown", Callback([](KeyboardEvent* e){
        key = e->get_keyCode();
    }), false);

    /**
        keyup event
     */
    addEventListener("keyup", Callback([](){
        key = 0;
    }), false);

}

void webMain() [[client]] {
    document.addEventListener("DOMContentLoaded", Callback(loadCallback));
}