HTML/CSS - TOUHOU 東方 ~ Fangame Online Editor and JavaScript Compiler

html

css

body {
    text-align: center;
    background-image: url('https://pbs.twimg.com/media/CgpnBvIUYAAqW0A.jpg');
    background-size: 100%;
    background-color: #000;
    background-repeat: no-repeat;
    color: #FFF;
    font-family: 'Bellefair', serif;
}
p {
    background-color: rgba(0,0,0,0.5);
    border-radius: 20px;
}
div {
    padding: 10px;
}
canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}
.but {
    padding: 5px 15px;
    background: #09C;
    color: #FFF;
    border: 0px none;
    -webkit-border-radius: 5px;
    border-radius: 5px;

$(function(){
var message = "<div><h2>TOUHOU東方</h2><br>Hello!<br><br>Welcome into my TOUHOU東方 fangame.<br>Move your character by moving your device.<br>Try avoiding everything!!<br><br>ENJOY!<br><br>(edit: I temporary removed the audio because it stopped working for no reason and I don't have the time to fix this for now)</div>";
var par = $('<p>').html(message);
$('body').append(par);
var audio = $('<audio>');
var bgm = [
    'http://66.90.93.122/ost/touhou-chireiden-subterranean-animism/pnyziodaom/-12-gouka-mantle.mp3',
    'http://66.90.93.122/ost/touhou-10.5-scarlet-weather-rhapsody-zenjinrui-no-tengakuroku-touhou-hisouten-original-soundtrack/zyvcqdewni/204-flowering-night.mp3',
    'http://66.90.93.122/ost/touhou-chireiden-subterranean-animism/yvtpaokmep/-15-hartmann-no-youkai-shoujo.mp3'
];
$(audio).attr({'id':'bgm','loop':'none','controls':'none','src':bgm[Math.floor(Math.random()*bgm.length)]});
$('body').append(audio);
$(audio).hide();
var gameStarted = false;
var button = $('<button>').text('Play!');
//$(button).attr({'onclick':'document.getElementById("bgm").play()','class':'but'});
$(button).attr('class','but');
$(button).click(function(){
    gameStarted = true;
})
$(par).append(button);
var dim = {
    w:360,
    h:512
}
if($(window).height() > dim.h){
    var WIDTH = dim.w*$(window).height()/dim.h;
}else{

BROWSER

Console