I have a devastating problem that I can't fix.
The JS canvas is screwing up a rectangle next to a player function expression.Here is the player code:
var menuSwitch = 0;
var pocx = 210;
var pocy = 20;
var switch1;
var lvlSwitch = 1;
var spd = 10;
var mx,my;
var pl = pl();
function pl(){
return{
draw: function(){
//draw the player
ctx.clearRect(0,0,w,h);//clears so the player doesn't "drag"
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(pocx, pocy, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//move the player
if(switch1 == 0){
pocx = 210;
pocy = 20;
}else if(switch1 == 1){
pocy -= spd;
}else if(switch1 == 2){
pocx -= spd;
}else if(switch1 == 3){
pocy += spd;
}else if(switch1 == 4){
pocx += spd;
}
//rect bounding the player
if(pocx < 5){//since half of the diameter of the player is 5, the edge of the circle "bounces"
switch1 = 4;
}
if(pocy < 5){
switch1 = 3;
}
if(pocx > w){
switch1 = 2;
}
if(pocy > h){
switch1 = 1;
}
}
};
}
The canvas is 420 by 420. The paint() function, which goes 30 milliseconds each time by a setInterval is displayed here:
function paint(){
//pl.draw();
if(menuSwitch == 0){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = 'skyblue';
ctx.fillRect(20,20,380,50);
ctx.font = 'normal 30pt Arial';
ctx.fillStyle = 'lime';
ctx.fillText("Math Path",105,60);
ctx.fillStyle = 'skyblue';
ctx.fillRect(105,150,210,25);//105+210=315
ctx.font = 'normal 15pt Arial';
ctx.fillStyle = 'lime';
ctx.fillText("Start",170,170);
}
if(menuSwitch == 1){
ctx.fillStyle = 'blue';
ctx.fillRect(300,20,120,20);
pl.draw();
}
}
However, I'm focusing on the place where menuSwitch == 1 in the if statement. You can see that I'm calling the player. The player shows up, but not the rectangle. Please help? :(
Useful link: Canvas Tutorial
Html code if you need it:
Jsfiddle
It is because you call ctx.fillRect(300,20,120,20); in the player function. Fo fix it, remove that line and add it to your paint function like:
function paint() {
ctx.clearRect(0, 0, w, h); //clears so the player doesn't "drag"
//pl.draw();
if (menuSwitch == 0) {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = 'skyblue';
ctx.fillRect(20, 20, 380, 50);
ctx.font = 'normal 30pt Arial';
ctx.fillStyle = 'lime';
ctx.fillText("Math Path", 105, 60);
ctx.fillStyle = 'skyblue';
ctx.fillRect(105, 150, 210, 25); //105+210=315
ctx.font = 'normal 15pt Arial';
ctx.fillStyle = 'lime';
ctx.fillText("Start", 170, 170);
}
if (menuSwitch == 1) {
ctx.fillStyle = 'blue';
pl.draw();
ctx.fillRect(300, 20, 120, 20);
}
}
Fiddle showing example: https://jsfiddle.net/22w9j3p0/
Related
this is my first time asking a question on StackOverflow. I was wondering on to make an object move based on its x and y coordinates with keyboard inputs. I am making a grid based movement for my game. I apologize for any bad code or formatting. I am making a web game for a school project. Do comment if u need my html code. Here's my code below:
$(function(){
var health = 800;
var fuel = 100;
var tankX = 25;
var tankY = 530;
var c = document.getElementById("gameCanvas");
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "grey";
ctx.fillRect(0,600,1110,100);
ctx.stroke();
for (i = 100; i < 600; i += 100)
{
ctx.moveTo(0, i);
ctx.lineTo(c.width, i);
ctx.stroke();
}
for (i = 100; i < 1110; i += 100)
{
ctx.moveTo(i, 0);
ctx.lineTo(i,600);
ctx.stroke();
}
ctx.fillStyle ="black";
ctx.font = "20px Lucida Sans Typewriter ";
ctx.fillText("Health:",500,630);
ctx.fillText("Fuel:", 100,630);
ctx.fillStyle = "green";
ctx.fillRect(500,640,(health/800)*250,40);
function fuelGauge(){
ctx.fillStyle="yellow";
ctx.fillRect(100,640,(fuel/100)*250,40);
console.log(fuel);
}
function drawTank(){
ctx.fillStyle = "#283618"
ctx.fillRect(tankX,tankY,50,50);
ctx.moveTo(tankX,tankY);
}
drawTank();
fuelGauge();
});
I don't do a lot of jquery, but since nobody answered, here's an example. It uses the keydown event to listen for the arrow keys. I'm sure there's lots of room for improvement, but it should get you started.
var c = document.getElementById("gameCanvas");
var ctx = c.getContext('2d');
var tankX = 25;
var tankY = 530;
var health = 800;
var fuel = 100;
$('html').keydown(function(e){
eraseTank();
if (e.key == "ArrowUp") {
if (tankY > 15) tankY -= 102;
}
else if (e.key == "ArrowDown") {
if (tankY < 530) tankY += 102;
}
else if (e.key == "ArrowLeft") {
if (tankX > 25) tankX -= 100;
}
else if (e.key == "ArrowRight") {
if (tankX < 525) tankX += 100;
}
drawTank();
});
function fuelGauge(){
ctx.fillStyle="yellow";
ctx.fillRect(100,640,(fuel/100)*250,40);
console.log(fuel);
}
function drawTank(){
ctx.fillStyle = "#283618"
ctx.fillRect(tankX,tankY,50,50);
ctx.moveTo(tankX,tankY);
}
function eraseTank(){
ctx.fillStyle = "white"
ctx.fillRect(tankX,tankY,50,50);
ctx.moveTo(tankX,tankY);
}
function drawGame()
{
ctx.beginPath();
ctx.fillStyle = "grey";
ctx.fillRect(0,600,1110,100);
ctx.stroke();
for (i = 100; i < 600; i += 100)
{
ctx.moveTo(0, i);
ctx.lineTo(c.width, i);
ctx.stroke();
}
for (i = 100; i < 1110; i += 100)
{
ctx.moveTo(i, 0);
ctx.lineTo(i,600);
ctx.stroke();
}
ctx.fillStyle ="black";
ctx.font = "20px Lucida Sans Typewriter ";
ctx.fillText("Health:",500,630);
ctx.fillText("Fuel:", 100,630);
ctx.fillStyle = "green";
ctx.fillRect(500,640,(health/800)*250,40);
}
$(function(){
drawGame();
fuelGauge();
drawTank();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="gameCanvas" width="600" height="1100"></canvas>
When you run the snippet, make sure you click on the game board first.
I'm making an isometric map for a game, I can draw it, but I don't know how to implement a sort of 3d collision detection without Threejs or other 3d library.
It is possible? Maybe make the block an Object can help? I have searched, but I found only libraries.
This is my JavaScript code:
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
stop = false;
var tw, th;
var player;
setup();
draw();
function setup(){
ctx.translate(width/2,50);
tw = 60; //tile width
th = 30; // tile height
player = new Player(2,3,3);
};
function draw(){
ctx.clearRect(-width/2,-50,width*1.5,height+50);
for(var i = 0; i < 5; i++){
for(var j = 0; j < 5; j++){
drawBlock(i,j,1,tw,th);
}
}
if(!stop){
requestAnimationFrame(draw);
}
}
function drawBlock(x,y,z,w,h){
var top = "#eeeeee",
right = '#cccccc',
left = '#999999';
ctx.save();
ctx.translate((x-y)*w/2,(x+y)*h/2);
ctx.beginPath();
ctx.moveTo(0,-z*h);
ctx.lineTo(w/2,h/2-z*h);
ctx.lineTo(0,h-z*h);
ctx.lineTo(-w/2,h/2-z*h);
ctx.closePath();
ctx.fillStyle = "black";
ctx.stroke();
ctx.fillStyle = top;
ctx.fill();
ctx.beginPath();
ctx.moveTo(-w/2,h/2-z*h);
ctx.lineTo(0,h-z*h);
ctx.lineTo(0,h);
ctx.lineTo(0,h);
ctx.lineTo(-w/2,h/2);
ctx.closePath();
ctx.fillStyle = "black";
ctx.stroke();
ctx.fillStyle = left;
ctx.fill();
ctx.beginPath();
ctx.moveTo(w/2,h/2-z*h);
ctx.lineTo(0,h-z*h);
ctx.lineTo(0,h);
ctx.lineTo(0,h);
ctx.lineTo(w/2,h/2);
ctx.closePath();
ctx.fillStyle = "black";
ctx.stroke();
ctx.fillStyle = right;
ctx.fill();
ctx.restore();
}
function drawTile(x,y,stroke,col){
ctx.save();
ctx.translate((x-y)*tw/2,(x+y)*th/2);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(tw/2,th/2);
ctx.lineTo(0,th);
ctx.lineTo(-tw/2,th/2);
ctx.closePath();
if(stroke){
ctx.stroke();
}else{
ctx.fillStyle = col;
ctx.fill();
}
ctx.restore();
}
function Player(x,y,z){
this.x = x;
this.y = y;
this.z = z;
this.w = 10; //width
this.h = 10; //height
}
canvas{
width:100%;
height:100%;
}
<canvas id="canvas"></canvas>
What you're after is cube collision. The first result I get for googling that is an article on MDN named 3D collision detection:
Mathematically this would look like so:
f(A,B) = (AminX <= BmaxX ∧ AmaxX >= BminX) ∧ (AminY <= BmaxY ∧ AmaxY >= BminY) ∧ (AminZ <= BmaxZ ∧ AmaxZ >= BminZ)
And in JavaScript, we'd use this:
function intersect(a, b) {
return (a.minX <= b.maxX && a.maxX >= b.minX) &&
(a.minY <= b.maxY && a.maxY >= b.minY) &&
(a.minZ <= b.maxZ && a.maxZ >= b.minZ);
}
I'm trying to make circular chart on html5 canvas el.
(function () {
var ctx = document.getElementById('canvas').getContext('2d');
var counter = 0;
var start = 4.72;
var cW = ctx.canvas.width;
var cH = ctx.canvas.height;
var diff;
var maxVal = 44;
function progressChart(){
diff = ((counter / 100) * Math.PI*2*10).toFixed(2);
ctx.clearRect(0, 0, cW, cH);
ctx.lineWidth = 15;
ctx.fillStyle = '#ff883c';
ctx.strokeStyle = '#ff883c';
ctx.textAlign = 'center';
ctx.font = '25px Arial';
ctx.fillText(counter+'%', cW*.5, cH*.55, cW);
ctx.beginPath();
ctx.arc(70, 70, 60, start, diff/10+start, false);
ctx.stroke();
if(counter >= maxVal){
clearTimeout(drawChart);
}
counter++;
}
var drawChart = setInterval(progressChart, 20);
})();
<canvas id="canvas" width="140" height="140"></canvas>
I want to add doughnut background before browser start drawing fill chart. Unfortunately, I need to use ctx.clearRect() because I've got strange visual effect. Is any way to combine this two rings?
Yes, there is a way and that is, drawing another arc for doughnut background, before drawing fill chart.
Also, you should use requestAnimationFrame() instead of setInterval(), for better efficiency.
var ctx = document.getElementById('canvas').getContext('2d');
var counter = 0;
var start = 4.72;
var cW = ctx.canvas.width;
var cH = ctx.canvas.height;
var diff;
var maxVal = 44;
var rAF;
function progressChart() {
diff = ((counter / 100) * Math.PI * 2 * 10).toFixed(2);
ctx.clearRect(0, 0, cW, cH);
ctx.lineWidth = 15;
ctx.fillStyle = '#ff883c';
ctx.textAlign = 'center';
ctx.font = '25px Arial';
ctx.fillText(counter + '%', cW * .5, cH * .55, cW);
// doughnut background
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
ctx.strokeStyle = '#ddd';
ctx.stroke();
// fill chart
ctx.beginPath();
ctx.arc(70, 70, 60, start, diff / 10 + start, false);
ctx.strokeStyle = '#ff883c';
ctx.stroke();
if (counter >= maxVal) {
cancelAnimationFrame(rAF);
return;
}
counter++;
rAF = requestAnimationFrame(progressChart);
}
progressChart();
<canvas id="canvas" width="140" height="140"></canvas>
I'm trying to learn javascript by creating a few classic arcade games and while testing my game, I received an Uncaught Syntax Error : unexpected token function from Chrome console and can't figure out how to debug it.
Here is the code concerned by the error :
function drawEverything() {
//Fills the screen
colorRect(0, 0, canvas.width, canvas.height, 'black');
if(showingLoseScreen) {
canvasContext.font = '16px Arial';
canvasContext.fillStyle = 'white';
canvasContext.fillText("You lost!", 395, 200);
canvasContext.fillText("Score :" + playerScore, 380, 300);
canvasContext.fillText("Total Score :" + totalScore, 380, 350);
canvasContext.fillText("click to reload game", 380, 400);
}
if(showingWinScreen) {
canvasContext.font = '16px Arial';
canvasContext.fillStyle = 'white';
canvasContext.fillText("You won!", 395, 200);
canvasContext.fillText("Total Score :" + totalScore, 380, 300);
canvasContext.fillText("click to advance to next level", 380, 400);
}
//Score
canvasContext.font = '16px Arial';
canvasContext.fillStyle = 'white';
canvasContext.fillText("Score: "+playerScore, 8, 20);
//Lives
canvasContext.font = "16px Arial";
canvasContext.fillStyle = "white";
canvasContext.fillText("Lives: "+playerLives, canvas.width-65, 20);
collisionDetection();
drawBricks();
//draws the paddle
colorRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight, 'white');
//draws the ball
colorCircle(ballX, ballY, 10, 'white');
}
Here are the functions called within it :
function drawBricks() {
for (c=0; c < brickColumnCount; c++) {
colors = ['yellow', 'red', 'purple', 'maroon', 'green', 'gray', 'blue']
color = colors[Math.floor(Math.random()*colors.length)];
for(r=0; r < brickRowCount; r++) {
if(bricks[c][r].status == 1) {
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
bricks[c][r].x = 0;
bricks[c][r].y = 0;
colorRect(brickX, brickY, brickWidth, brickHeight, color);
}
}
}
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
canvasContext.fill();
}
function colorRect(leftX, topY, width, height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX, topY, width, height);
}
Thanks for taking the time to read my code and providing an answer if you are able.
Louis
The problem is in this block
//Local functions//
//function handleMouseClick(evt) {
if(showingLoseScreen) {
gameReset();
} else if(showingWinScreen) {
playerScore = 0;
//level++
showingWinScreen = false;
} else if(showingFinalScreen) {
gameReset();
//}
You have a missing close bracket there, in the last else if. So you should close that block, no matter if you want to uncomment the function or not.
//Local functions//
//function handleMouseClick(evt) {
if(showingLoseScreen) {
gameReset();
} else if(showingWinScreen) {
playerScore = 0;
//level++
showingWinScreen = false;
} else if(showingFinalScreen) {
gameReset();
}
//}
This is a game i am making. I am getting a very wiered error. When i click on first tile i am calling afunction level3. Which draws few vertical lines. After that even clearing the canvas my level2 is being executed.
Need Help !
You dont have to look entire code. Just the level2 and level 3 function.Check Demo link.When you click on first tile "Trader" level3 is called but remains for a short time and again level2 is executing without even calling.
SOLVED
Fixed Demo :http://stndlkr200.github.io/bugfixed.html
Bug Demo : http://stndlkr200.github.io/testbug.html
<html>
<head>
<style>
*{
background-color: black;
}
canvas{display: block;}
</style>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var w=window.innerWidth;
canvas.width=w;
var h=window.innerHeight;
canvas.height=h;
var ctr=0;
var words=["We Need Swaraj","Play for Change","Aam Aadmi Party","5 saal Kejriwal","AAP for
Change","Vote for Good","Arvind Kejriwal","Kejriwal Fir Se","We Need Swaraj","Play for
Change","Aam Aadmi Party","5 saal Kejriwal","AAP for Change","Vote for Good","Arvind
Kejriwal","Kejriwal Fir Se","We Need Swaraj","Play for Change","Aam Aadmi Party","5 saal
Kejriwal","AAP for Change","Vote for Good","Arvind Kejriwal","Kejriwal Fir Se","We Need
Swaraj","Play for Change","Aam Aadmi Party","5 saal Kejriwal","AAP for Change","Vote for
Good","Arvind Kejriwal","Kejriwal Fir Se"];
var j=0;
function box(x,y){
this.x=x;
this.y=y;
this.xVelo=10+Math.random()*20;
this.yVelo=1;
this.width=500;
this.height=500;
this.r=Math.round(Math.random()*255);
this.g=Math.round(Math.random()*255);
this.b=Math.round(Math.random()*255);
this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
this.message=words[i];
i++;
this.draw = function()
{
ctx.strokeStyle = this.rgba;
ctx.strokeRect(this.x,this.y,this.width,this.height);
ctx.font = 'bold 50px Calibri';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle =this.rgba;
ctx.fillText(this.message, this.x+this.width/2, this.y+this.height/2);
ctr++;
if(ctr>7000){
clearInterval(timer1);
ctx.font = 'bold 50px Calibri';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle ="white";
ctx.fillText("Vote For Honest Leaders", 400, 400);
ctx.fillText("Vote For Kejriwal", 600, 30);
ctx.fillText("Vote For Delhi", 1000, 400);
ctx.strokeStyle="rgba(200,56,78,0.4)";
ctx.strokeRect(550,200,100,60);
ctx.font = 'bold 20px Calibri';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle ="green";
ctx.fillText("Lets Play !", 600, 230);
}
this.update();
}
this.update = function()
{
if(this.x < 0) {
this.x = 0;
this.xVelo *= -1;
}
if(this.x > w - this.width)
{
this.x = w - this.width;
this.xVelo *= -5;
}
if(this.y < 0) {
this.y = 0;
this.yVelo *= -1;
}
if(this.y < h - this.height)
this.yVelo += .25;
if(this.y > h - this.height)
{
//this.xVelo *= .5
this.yVelo *= .5
this.y = h - this.height;
this.yVelo *= -2;
}
this.x += this.xVelo/5;
this.y += this.yVelo/3;
}
}
var boxes = [];
function draw()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.5)"
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation = "lighter"
for(i=0; i < boxes.length; i++)
boxes[i].draw();
update();
}
function update()
{
for(i=0; i < boxes.length; i++)
boxes[i].update();
}
var timer1= setInterval(function(){
boxes.push( new box(0,0))
},1000);
var timer= setInterval(draw,30);
canvas.addEventListener("click",play_function);
function play_function(e){
button_x=e.pageX;
button_y=e.pageY;
if(button_x<650 && button_x>500 && button_y<260 && button_y >200)
start_levels();
}
function start_levels(){
clearInterval(timer);
canvas.removeEventListener('click',play_function);
level1();
}
var level1=function(){
ctx.clearRect(0,0,w,h);
ctx.font = '13px Arial';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle ="white";
ctx.fillText("MufflerMan wants you to sketch something.. Please do",500,10);
var dots=[];
var dotXval=["500","250","150","720","850"];
var dotYval=["100","250","300","250","300"];
function dot(xcod,ycod,radius,value){
this.xcod=xcod;
this.ycod=ycod;
this.radius=radius;
this.val=value;
}
function create_dots(x,y,radius,value){
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI,true);
ctx.fillStyle="white";
ctx.fill();
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle ="white";
ctx.fillText(value,x-10,y-10);
}
function startLevel(){
var dotRadius=10;
var dotsCount=5;
for (var i = 0; i <dotsCount; i++){
dots.push(new dot(dotXval[i],dotYval[i],dotRadius,i+1));
}
for (var j=0; j<dots.length; j++) {
create_dots(dots[j].xcod, dots[j].ycod,5,dots[j].val);
}
}
startLevel();
var mouse={x:0,y:0};
var drag4sketch=function(e){
mouse.x=e.pageX-this.offsetLeft;
mouse.y=e.pageY-this.offsetTop;
}
canvas.addEventListener('mousemove',drag4sketch);
ctx.lineWidth = 6;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
canvas.addEventListener('mousedown',function(e){
ctx.beginPath();
ctx.moveTo(mouse.x,mouse.y);
canvas.addEventListener('mousemove',sketch,false);
},false);
canvas.addEventListener('mouseup',function(){
canvas.removeEventListener('mousemove',sketch,false);
},false);
var sketch=function(){
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
}
var time=0;
var clock=function(){
ctx.clearRect(1000,20,1200,200);
ctx.font = '20px Arial';
ctx.fillStyle ="white";
ctx.fillText(time++ + ' sec',1120,30);
if(time>2){
ctx.clearRect(0,0,w,h);
canvas.removeEventListener('mousemove',sketch);
canvas.removeEventListener('mouseup',level1);
canvas.removeEventListener('mousedown',level1);
canvas.removeEventListener('mousemove',level1);
canvas.removeEventListener('mouseup',sketch);
canvas.removeEventListener('mousedown',sketch);
canvas.removeEventListener('mousemove',sketch);
canvas.removeEventListener('mousemove',drag4sketch);
level2();
}
}
setInterval(clock,1000);
clearInterval(clock);
}
function level2(){
var m={x:0,y:0};
var rect_cordsX=["100","300","500","700","900","1100"];
var rect_cordsY=["50","160","370","480"];
var hints=
["Trader","Businessman","Student","Teacher","Writer","Scientist","Politicion","MufflerMan","Auto
Driver","Police","Doctor","Industrialist","Soldier","Musician","Cobbler","Social
Worker","MufflerMan","Engineer","Advocate","Reporter","Editor","MufflerMan","Poet","Actor"];
ctx.font = 'bold 13px Arial';
ctx.textAlign = 'center';
ctx.textBaseline='middle';
ctx.fillStyle ="white";
ctx.fillText("MufflerMan wants you to find his companions..Your Luck! ",620,10);
var hint_cards=[];
var hint_card=function(x,y,hint){
this.x=x;
this.y=y;
this.hint=hint;
}
for (var i = 0; i< rect_cordsX.length; i++) {
for (var j=0;j<rect_cordsY.length;j++){
hint_cards.push(new hint_card(rect_cordsX[i],rect_cordsY[j],hints[i*j]));
}
}
for (var k=0;k<hint_cards.length;k++){
ctx.strokeStyle="white";
ctx.strokeRect(hint_cards[k].x,hint_cards[k].y,100,80);
ctx.font = 'bold 15px Calibri';
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillStyle="white";
ctx.fillText(hints[k],parseInt(hint_cards[k].x)+50,parseInt(hint_cards[k].y)+40);
}
function click_hint_card(e){
m.x=e.pageX-this.offsetLeft;
m.y=e.pageY-this.offsetTop;
if(m.x>100 && m.y>50 && m.x<200 && m.y<130){
console.log("Trader");
level3();
}
}
canvas.addEventListener('click',click_hint_card);
}
function level3 (){
ctx.clearRect(0,0,w,h);
ctx.beginPath();
for(var x=100;x<1200;x+=100){
ctx.moveTo(x,100);
ctx.lineTo(x,200);
ctx.moveTo(x,300);
ctx.lineTo(x,500);
}
ctx.strokeStyle="white";
ctx.stroke();
}
}
</script>
</body>
</head>
</html>
Your setInterval(clock, 1000); calls a block of code:
var clock=function(){
ctx.clearRect(1000,20,1200,200);
ctx.font = '20px Arial';
ctx.fillStyle ="white";
ctx.fillText(time++ + ' sec',1120,30);
if(time>2){
ctx.clearRect(0,0,w,h);
canvas.removeEventListener('mousemove',sketch);
canvas.removeEventListener('mouseup',level1);
canvas.removeEventListener('mousedown',level1);
canvas.removeEventListener('mousemove',level1);
canvas.removeEventListener('mouseup',sketch);
canvas.removeEventListener('mousedown',sketch);
canvas.removeEventListener('mousemove',sketch);
canvas.removeEventListener('mousemove',drag4sketch);
level2();
}
}
I suspect it is the last line of that clock function that is causing your problem. Remove it and it should go away.