I have a django server (which is for my personal/local use only) and I am trying to include an interactive game in it (again, for my personal use, not for deployment). I have found this open-source game: https://github.com/MattSkala/html5-bombergirl.git which I found very nice.
I can make this game run from a simple html page but when I tried to make it run inside a django template, it won't work.
Here is the html code that works i.e. from which the game launches in my web browser:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/EaselJS/lib/easeljs-0.8.1.min.js"></script>
<script type="text/javascript" src="bower_components/PreloadJS/lib/preloadjs-0.6.1.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/Entity.js"></script>
<script type="text/javascript" src="js/Player.js"></script>
<script type="text/javascript" src="js/Bot.js"></script>
<script type="text/javascript" src="js/Bonus.js"></script>
<script type="text/javascript" src="js/Tile.js"></script>
<script type="text/javascript" src="js/Fire.js"></script>
<script type="text/javascript" src="js/Bomb.js"></script>
<script type="text/javascript" src="js/Menu.js"></script>
<script type="text/javascript" src="js/InputEngine.js"></script>
<script type="text/javascript" src="js/GameEngine.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<canvas id="canvas" width="545" height="416"></canvas>
<script>
gGameEngine = new GameEngine();
gGameEngine.load();
</script>
</html>
In django, I have updated and loaded all the necessary (js, css, bower_components) static files.
Here is my django views.py:
def game(request):
return render(request, 'game.html')
and my template game.html:
{% extends "base.html" %}
{% block content %}
<canvas id="canvas" width="545" height="416"></canvas>
<script>
gGameEngine = new GameEngine();
gGameEngine.load();
</script>
{% endblock %}
But my page stays blank. No game loading and no error on the webpage nor the terminal ! Nothing happens.
I also tried to add this function into the GameEngine.js file:
function my_run()
{
//document.getElementById("canvas").innerHTML = "Hi there, do I work ?";
gGameEngine = new GameEngine();
document.getElementById("canvas").innerHTML = gGameEngine.load()
}
and modified my template into:
<script src = {% static "game/js/GameEngine.js" %}> </script>
//<p id="canvas">Text for test.</p>
<canvas id="canvas" width="545" height="416"></canvas>
<button type = "button" onClick="my_run()">Click me!</button>
Without success !!
For test, printing "Hi there, do I work?" in the "Text for test" paragraph works. I can therefore say that the static files are correctly loaded. However, nothing happens for the game.
Why ? Does anyone has any idea ?
Thank you in advance for your help.
I resolved my problem. I forgot to update the path of the images and sounds to ones that are understandable by django.
Related
Im trying to code a simple Javascript exercise where I have to place different text at different part of the page but it keeps throwing me a
TypeError:sal[0] is undefined
Here is the javascript code.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
What am I doing wrong?
For further reference, here is my HTML code aswell
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="GB"> Holla</h1>
<script src="main.js"></script>
</body>
</html>
Your JavaScript is running before the page (DOM) has fully loaded.
the simplest way to make sure the DOM is loaded before your JS runs, is to add 'defer' to the script tag thus;-
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<h1 class="GB"> Holla</h1>
</body>
</html>
I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>
<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<!-- Your JavaScript -->
<script type="text/x-handlebars">
<!-- this is default application template -->
<h1>{{App.name}}</h1>
{{outlet}}
</script>
<script type="text/javascript">
//App is the object of the Ember.Application
//create() is the constructor of the Ember.Application
App = Ember.Application.create();
//App.name is the variable that holds the string values
App.name= "Hello... Welcome to TutorialsPoint";
</script>
</body>
</html>
I ran this.But Application.instanceInitializer is not a function in ember-initializer.js how solve this error?
You are including a version of Ember Data that is incompatible with the version of Ember you are using.
Quick fix:
Swap this:
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
For this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.15/ember-data.js"></script>
And the error will disappear and the app will do what it should.
What might be better is to find a more up-to-date tutorial and follow that.
This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.
Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>
two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.
Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.
Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>
Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>
In my default.jspx which contains the basic layout for the page I am trying to import some jquery libraries as follows
<head>
...
<spring:url value="/resources/js/lib/jquery-1.9.1.min.js" var="jquery_url" />
<spring:url value="/resources/js/lib/jquery.tokeninput.js" var="jquery_tokeninput_url" />
<script src="${jquery_url}" type="text/javascript"></script>
<script src="${jquery_tokeninput_url}" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
</script>
<util:load-scripts />
...
</head>
but when the page is rendered in the browser the first script tag swallows the two others
<head>
...
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery-1.9.1.min.js">
//These lines are inside the first script tag
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery.tokeninput.js"/>
<script type="text/javascript">
$.noConflict();
//The tag is closed here
</script>
<link href="/roo-inari/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet">
...
Any idea what might be causing this? The project is based on a spring roo generated web mvc scaffold.
I am using Chrome v.25.
The simple solution was to write a comment inside the tag so that it is not closed automatically. Silly me
<script src="${jquery_url}" type="text/javascript"><!-- required for some browsers --></script>