I am making a javascript game, using Canvas. However, I got that error(below image) and background image is not shown. I suspect below 4 files, because other files didn't make any trouble. I guess the problem is related with game_state...how can I solve the problem??
I am agonizing for 2days:( plz, help me..
error image1
error image2
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Lion Travel</title>
<!--GameFramework-->
<script src="/.c9/gfw/GameFramework.js"></script>
<script src="/.c9/gfw/FrameCounter.js"></script>
<script src="/.c9/gfw/InputSystem.js"></script>
<script src="/.c9/gfw/SoundManager.js"></script>
<script src="/.c9/gfw/GraphicObject.js"></script>
<script src="/.c9/gfw/SpriteAnimation.js"></script>
<script src="/.c9/gfw/ResourcePreLoader.js"></script>
<script src="/.c9/gfw/DebugSystem.js"></script>
<script src="/.c9/gfw/Timer.js"></script>
<script src="/.c9/gfw/FrameSkipper.js"></script>
<script src="/.c9/gfw/TransitionState.js"></script>
<!--GameInit-->
<script src="/.c9/gfw/gfw.js"></script>
<!--Game Logic-->
<script src="/.c9/RS_Title.js"></script>
</head>
<body>
<canvas id="GameCanvas" width="800" height="600">html5 canvas is not supported.</canvas>
</body>
</html>
gfw.js
function onGameInit() {
document.title = "Lion Travel";
GAME_FPS = 30;
debugSystem.debugMode = true;
resourcePreLoader.AddImage("/.c9/title_background.png");
soundSystem.AddSound("/.c9/background.mp3", 1);
after_loading_state = new TitleState();
setInterval(gameLoop, 1000 / GAME_FPS);
}
window.addEventListener("load", onGameInit, false);
RS_Title.js
function TitleState()
{
this.imgBackground = resourcePreLoader.GetImage("/.c9/title_background.png");
soundSystem.PlayBackgroundMusic("/.c9/background.mp3");
return this;
}
TitleState.prototype.Init = function()
{
soundSystem.PlayBackgroundMusic("/.c9/background.mp3");
};
TitleState.prototype.Render = function()
{
var theCanvas = document.getElementById("GameCanvas");
var Context = theCanvas.getContext("2d");
//drawing backgroundimage
Context.drawImage(this.imgBackground, 0, 0);
};
TitleState.prototype.Update = function()
{
};
GameFramework.js
var GAME_FPS;
var game_state = after_loading_state;
function ChangeGameState(nextGameState)
{
//checking essential function
if(nextGameState.Init == undefined)
return;
if(nextGameState.Update == undefined)
return;
if(nextGameState.Render == undefined)
return;
game_state = nextGameState;
game_state.Init();
}
function Update()
{
timerSystem.Update();
game_state.Update();
debugSystem.UseDebugMode();
}
function Render()
{
//drawing
var theCanvas = document.getElementById("GameCanvas");
var Context = theCanvas.getContext("2d");
Context.fillStyle = "#000000";
Context.fillRect(0, 0, 800, 600);
//game state
game_state.Render();
if(debugSystem.debugMode)
{
//showing fps
Context.fillStyle = "#ffffff";
Context.font = '15px Arial';
Context.textBaseline = "top";
Context.fillText("fps: "+ frameCounter.Lastfps, 10, 10);
}
}
function gameLoop()
{
Update();
Render();
frameCounter.countFrame();
}
The issue here is that you are initializing game_state with the object after_loading_state even before after_loading_state is initialized(which is initialized only after the document is loaded). Due to this game_state remains undefined.
To fix this, change var game_state = after_loading_state; in GameFramework.js to var game_state;. And add game_state = after_loading_state; as the first line in gameLoop function. This way, the initialization of variables occur in the correct order.
Related
Im trying to make the image of a trex jump when canavas is clicked
Here is my code
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<canvas onclick="canjump = true; renderer = requestAnimationFrame(loop); dinoy = 150;" height="250px" width="350px" style="border: 2px solid black" id="canvas"></canvas>
<img src="./dino.png" height="0px" width="0px" id="dinoimg">
<img src="./cacti.png" height="0px" width="0px" id="cactimg">
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
main.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var dinoimage = document.getElementById('dinoimg');
var dinoheight = 100;
var dinowidth = 50;
var dinox = 0;
var dinoy = 150;
var canjump = false;
var renderer;
var jmpv = 15;
function loop() {
if (canjump = true && dinoy <= 150) {
jumpdino();
} else {
dinoy = 151;
jmpv = 15;
canjump = false;
cancelAnimationFrame(renderer);
}
//setcacti();
//checkcollision();
renderer = requestAnimationFrame(loop);
}
function jumpdino() {
ctx.clearRect(0, 0, 350, 250);
ctx.drawImage(dinoimage, dinox, dinoy, dinowidth, dinoheight);
dinoy -= jmpv;
jmpv--;
}
The problem is that everything work as expected for first time but when canvas is clicked after then (second click and after), the image just go up and come down very fast and not smoothly with acceleration like first time.
Please help!!!
Those two fore function calls are commented because they arent implemented yet.
Just fixing the code you have I added a return in the else, the issue was even though you canceled the requestAnimationFrame after the else condition it still would continue and reassign renderer to the loop. So it was always running, each time you clicked it was just adding another instance making it go faster and faster.
function loop() {
if (canjump = true && dinoy <= 150) {
jumpdino();
} else {
dinoy = 151;
jmpv = 15;
canjump = false;
cancelAnimationFrame(renderer);
// You need to exit out.
return;
}
//setcacti();
//checkcollision();
renderer = requestAnimationFrame(loop);
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var dinoheight = 100;
var dinowidth = 50;
var dinox = 0;
var dinoy = 150;
var canjump = false;
var renderer;
var jmpv = 15;
function loop() {
if (canjump = true && dinoy <= 150) {
jumpdino();
} else {
dinoy = 151;
jmpv = 15;
canjump = false;
cancelAnimationFrame(renderer);
return;
}
//setcacti();
//checkcollision();
renderer = requestAnimationFrame(loop);
}
function jumpdino() {
ctx.clearRect(0, 0, 350, 250);
ctx.fillRect(dinox, dinoy, dinowidth, dinoheight);
dinoy -= jmpv;
jmpv--;
}
<canvas onclick="canjump = true; requestAnimationFrame(loop); dinoy = 150;" height="250px" width="350px" style="border: 2px solid black" id="canvas"></canvas>
Personally I'd remove the inline event handler and do something like this in your code as well.
canvas.addEventListener('click', () => {
canjump = true;
dinoy = 150;
loop();
});
As the title says when i try to draw more then 1 image a something weird happens. while it does draw stuff in the correct locations at the correct sizes it only ends up using the last drawn image. So i end up getting the same image 3 times at different locations and sizes while they are supposed to be different images.
This is my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas</title>
<script src="jquery-3.2.1.js"></script>
<script src="main.js"></script>
</head>
<style>
#canvas:hover
{
/*cursor: none;*/
}
#canvas
{
}
body
{
margin: 0;
}
</style>
<body>
<form action="index.php" method="post" enctype="multipart/form-data">
<canvas id="canvas"></canvas>
</form>
</body>
</html>
Javascript:
$(document).ready(function(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var keys = [];
var framerate = 1000/60;
var img = new Image();
var x = innerWidth/2 - 150;
var y = innerHeight/2 - 75;
var speed = 10;
var imageArray =
[
"sky.png",
"road.png",
"car.png"
];
function drawMap()
{
img.src = imageArray[0];
ctx.drawImage(img,0,0,innerWidth,innerHeight/2);
console.log("Sky Finished Drawing");
img.src = imageArray[1];
ctx.drawImage(img,0,innerHeight/2,innerWidth,innerHeight/2);
console.log("Road Finished Drawing");
img.src = imageArray[2];
ctx.drawImage(img,x,y,300,150);
console.log("Car Finished Drawing");
}
drawMap();
var mouse = {
x : undefined,
y : undefined
}
window.addEventListener("keydown",function(e){
keys[e.keyCode] = true;
});
window.addEventListener("keyup",function(e){
keys[e.keyCode] = false;
});
setInterval(animate,framerate);
function animate()
{
if(keys[87]) //W
{
ctx.clearRect(0,0,innerWidth,innerHeight);
drawMap();
console.log("W");
y -= speed;
}
if(keys[65]) //A
{
ctx.clearRect(0,0,innerWidth,innerHeight);
drawMap();
console.log("A");
x -= speed;
}
if(keys[83]) //S
{
ctx.clearRect(0,0,innerWidth,innerHeight);
drawMap();
console.log("S");
y += speed;
}
if(keys[68]) //D
{
ctx.clearRect(0,innerHeight/2,innerWidth,innerHeight);
drawMap();
x += speed;
console.log("D");
}
}
});
You created one Image object and used the same one for each src, so it applied only the last image source.
Please create Image object for each image:
function drawMap()
{
var img1 = new Image();
img1.src = imageArray[0];
ctx.drawImage(img1,0,0,innerWidth,innerHeight/2);
console.log("Sky Finished Drawing");
var img2 = new Image();
img2.src = imageArray[1];
ctx.drawImage(img2,0,innerHeight/2,innerWidth,innerHeight/2);
console.log("Road Finished Drawing");
var img3 = new Image();
img3.src = imageArray[2];
ctx.drawImage(img3,x,y,300,150);
console.log("Car Finished Drawing");
}
Ok so I'm attempting to have a webpage with two buttons. Each of these buttons, when clicked, creates a new canvas and calls a different draw function. The first draw function would draw large circles where the users mouse is and small ones when the mouse is pressed. The other draw function does the same thing except small circles when the mouse is unpressed and large ones when it is. I'm not having a problem referencing one of these with the button but the other button doesn't seem to call its draw function. sketch2.js seems to be working fine but it seems that the draw function in sketch.js is not being called. Any advice on how I should go about fixing this is greatly appreciated!
Below is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<button id="myBtn">little then big</button>
<div id="holder"></div>
<button id="myBtn2">big then little</button>
<div id="holder2"></div>
<style> body {padding: 0; margin:0;} </style>
</head>
<body>
<script type="text/javascript" src = "/Users/bburke95/Desktop/JS/p5.dom.js"> </script>
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="sketch2.js"></script>
</body>
</html>
This is my sketch.js class
btn = document.getElementById("myBtn");
var q;
btn.onclick = function setup() {
createCanvas(640, 480);
document.getElementById("holder").innerHTML = '<canvas id="myCanvas" width="490" height="220"></canvas>';
q = 1;
set = 0;
}
function draw() {
if (q == 1) {
var x;
var y;
if (mouseIsPressed) {
fill(255);
x = 160;
y = 160;
} else {
fill(0);
x = 80;
y = 80;
}
ellipse(mouseX, mouseY, x, y);
}
}
and this is my sketch2.js class
btn2 = document.getElementById("myBtn2");
var set;
btn2.onclick = function setup() {
createCanvas(640, 480);
document.getElementById("holder2").innerHTML = '<canvas id="myCanvas2" width="490" height="220"></canvas>';
set = 1;
q = 0;
}
function draw() {
if (set == 1) {
var x;
var y;
if (mouseIsPressed) {
fill(0);
x = 80;
y = 80;
} else {
fill(255);
x = 160;
y = 160;
}
ellipse(mouseX, mouseY, x, y);
}
}
If you want to run more than one P5.js processing sketches on the same page, you have to use "instance mode" to ensure that all the functions aren't cluttering the global namespace (which is a good idea anyway) so they don't overwrite one another.
From their Github project, you can instantiate new sketches like this:
var s = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(s);
I am trying to complete This tutorial on making a tic tac toe game using JavaScript and HTML5.
I've followed each step in the video multiple times. While my code seems to match the code in video I keep encountering an error: Uncaught Reference Error: draw is not defined. The error occurs in line 12.
I must be overlooking something. Can anyone point it out?
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe!</title>
<script type="text/javascript">
var c, canvas;
var turn = 1;
window.onload = function() {
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");
draw();
}
var moves = [];
window.onclick = function(e) {
if(e.pageX < 500 && e.pageY < 500) {
var cX = Math.floor(e.pageX / (500 / 3));
var cY = Math.floor(e.pageY / (500 / 3));
var alreadyClicked = false;
for(i in moves) {
if(moves[i][0] == cX && moves[i][1] == cY) {
alreadyClicked = true;
}
}
if(alreadyClicked == false) {
moves[(moves.length)] = [cX, cY, turn];
turn = turn * -1;
draw();
}
}
var bg = new Image();
var x = new Image();
var o = new Image();
bg.src = "ttt_board.png";
x.src = "ttt_x.png";
o.src = "ttt_o.png";
function draw() {
c.clearRect(0, 0, 500, 500);
c.drawImage(bg, 0, 0);
for(i in moves) {
if(moves[i][2] == 1) {
c.drawImage(x, Math.floor(moves[i][0] * (500 / 3) + 10), Math.floor(moves[i][1](500 / 3) + 10))
} else {
c.drawImage(o, Math.floor(moves[i][0] * (500 / 3) + 10), Math.floor(moves[i][1] * (500 / 3) + 10));
}
}
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>
The problem is that draw is defined in window.onclick, but you are trying to call it from window.onload. Are you sure you do not have a closing bracket missing before the definition of draw?
Try moving the draw() function out of the window.click function.
window.onclick = function(e) {
// ...
};
function draw() {
// ...
}
One of the major benefits of being strict with your indentation is that you can pick up these bugs very quickly.
window.click = function(e) {
// ...
function draw() {
// ...
}
};
Is the code you had.
As a result of draw being located inside of the window.onclick anonymous function, it is scoped there. Since window.onload does not share the scope of that anonymous function, you cannot access draw from window.onload. You should removed the draw function from your window.onclick event so that it may be called from other scopes.
function draw(){}
window.onload = function(){ /*code*/ };
window.onclick = function(){ /* code */ };
I can't draw the image using the function of the class.
I allready tried this.img and var img but they are both not working.
I added an online source of the jquery-libaryto place it online, but on my pc i'm using an offline source that is working!
<!doctype html>
<head>
<link rel="stylesheet" href="js\jquery-ui-1.10.1.custom.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"> </script>
<script type="text/javascript">
var canvas;
var ctx;
var BurgerArray = new Array(50);
function burger()
{
this.x = 10;
this.y = 20;
this.img = new Image();
img.src='Img/Burger1.png';
img.onload = function()
{
}
this.teken = function()
{
ctx.drawImage(img,20,20);
}
}
var b;
$(document).ready(function()
{
canvas =document.getElementById("MyCanvas");
ctx =canvas.getContext("2d");
b = new burger();
b.teken();
});
</script>
<style type="text/css">
#MyCanvas
{
margin:auto;
display:block;
border:dashed;
border-color:#0F0;
}
</style>
</head>
<body style=" width:100%; height:100%;">
<canvas id="MyCanvas" width="1000" height="600"></canvas>
</body>
</html>
When you create a new object, it's scope is different from the global one. Change the implementation to:
function burger(canvas)
{
this.x = 10;
this.y = 20;
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.teken = function() {
this.ctx.drawImage(img,20,20);
};
}
$(document).ready(function() {
var canvas = document.getElementById("MyCanvas");
var b = new burger(canvas);
b.teken();
});