Basically, I'm trying to create a game in which circles will spawn on a canvas and the user has to click them as fast as possible. The circles should spawn randomly on the canvas and have a certain radius. Once the user clicks a circle, they are awarded points based on the time it took them to click the circle (less time = more points). After the user clicks the circle, it disappears, and another circle randomly spawns somewhere on the canvas, and the user keeps doing this until 100 circles are clicked overall.
The whole point of this game is to help improve accuracy and reflex for FPS games. I decided I would create a game like this to help myself mainly, and for anyone else because I couldn't find a game like this online that fit my needs.
Anyway, here's the code for the game I have so far. If anyone could help me in the direction of further developing this game or even completing it, it would be much appreciated.
HTML:
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function spawnTarget() {
}
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(0, 0, 255);
text-align: center;
}
#header {
display: inline-block;
background-color: rgb(255, 255, 255);
margin: 64px auto;
border-radius: 16px;
}
h1 {
font-family: Arial;
font-size: 128px;
color: rgb(0, 0, 0);
}
#myCanvas {
width: 1800px;
height: 900px;
border: 4px solid rgb(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>Aim Practice</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>Aim Practice</h1>
</div>
<div id="container">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>
because the circles won't be actual DOM elements, you will have to listen for click events on the canvas, and compare the screenX and screenY on the click event to the canvas coordinates of he circle in question. Remember to add in the offset of the canvas relative to the screen. You will also have to manually calculate whether the click is inside the circle or not.
Related
I have a p5.js canvas on my website, contained within a canvasDiv class, and I have a script that goes to the website and clicks the canvas, which downloads it etc. How do I scale down the canvas so that it doesn't take up most of the screen, while still keeping the 1000x1000px resolution? Thanks and have a good day!
HTML
<div id="canvasDiv">
<script src="sketch.js" id="astrum"></script>
<script src="functions.js"></script>
<script src="shapes.js"></script>
</div>
CSS
#canvasDiv {
display: block;
width: 1000px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'Source Code Pro', monospace;
}
JS
function setup() {
const myCanvas = createCanvas(1000, 1000);
myCanvas.parent('canvasDiv');
background(40);
angleMode(DEGREES);
rectMode(CENTER);
noStroke();
}
function mousePressed(){
if(mouseX > 0 && mouseX < width){
if(mouseY > 0 && mouseY < height){
save("AM.png");
}
}
}
Use create graphics and draw to the graphics buffer with image() on the canvas.
when you want someone to download make the download from the graphics buffer and not from the canvas.
saveCanvas(selectedCanvas, [filename], [extension])
You could also have a hidden canvas behind, i think css has a property:
#real-Canvas {
hidden: true
}
Afterwards you could have the image or whatever you have scaled down on the first canvas that users see, as like a preview type thing, you could also do this with createGraphics i guess.
this is basically the same answer as DavidWeiss'.
This is my first time working with TweenMax in JavaScript. I'm trying to make a function that will create a "Card" with rounded edges that will eventually hold images and text. For now I just want to make one with an image inside (clipping is irrelevant at this point), at a certain size and location inside one of my tags.
Right now, all that this does is display the image at (0, 0) no matter the x/y value, there's no scaling or clipping from the parent block, and there's no rounded edges or shadow. So pretty much I'm thinking either my TweenMax is not working, or I'm not doing something right.
cards.js
mainView = document.getElementById('mainView');
create_card(25, 25, "image.png");
function create_card(theX, theY, img){
//CARD VARS
cardElement = document.createElement('div');
cardElement.setAttribute('class', 'card');
cardImage = document.createElement('img');
cardImage.setAttribute('src', img);
cardImage.setAttribute('class', 'image');
//LAYOUTS
TweenMax.set(".card", {
position:'absolute',
display: 'block',
x: theX,
y: theY,
width:140,
height:140,
backgroundColor:'#ff0000',
borderRadius:2,
overflow:'hidden',
scale:1,
boxShadow:'5px 5px 5px #ff7f00'
});
//APPEND CARD TO STAGE
cardElement.appendChild(cardImage);
mainView.appendChild(cardElement);
}
In the body of the HTML:
<div id="wrapper">
<div id="mainView" class="mainView"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="javascript/cards.js"></script>
The CSS stylesheet (I think this might be irrelevant but to be thorough):
body{
background-color: #888888;
margin: 0 0 0 0;
}
#wrapper {
margin-left: 100px;
}
#mainView {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 100%;
background-color: #444444;
box-shadow: 0px 0px 10px #222222;
}
So, to compile this into a single question: Why isn't my TweenMax working?
I up-vote/mark answer to all who make valid answers and contribution :)
What worked for me was changing https to http in:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Like so:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Such a simple solution hahaha. I found this out quite a while ago, but maybe someone will find this useful :)
I was trying to put a canvas in a container. I wanted the canvas to have the same size as the container. To do this I used JQuery, however, this turned out to scale my canvas. This was not my intention, especially because I draw after resizing. Doing seemingly the same thing in good old fashion JavaScript gives me the expected result.
I personally did not expect the JQuery result and it took some time before I figured out the problem. Does anybody know why they opted for this implementation and why it gives a different result? I hope by sharing this I can save some people a lot of time!
Thanks for anybody willing to research this further of fix this!
Here is some example code:
<html>
<head>
<title>Canvas resizing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
#container1{
background-color: green;
width: 100px;
height: 100px;
margin: 50px auto;
}
#container2{
background-color: red;
width: 100px;
height: 100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="container1">
<canvas></canvas>
</div>
<div id="container2">
<canvas></canvas>
</div>
<script type="text/javascript">
function draw (canvas) {
var context=canvas.getContext("2d");
context.lineWidth = 5;
context.rect(25,25,50,50);
context.stroke();
}
$(document).ready(function () {
//javascript
var container = document.getElementById('container1');
var canvas = container.childNodes[1];
canvas.width = 100;
canvas.height = 100;
draw(canvas);
//jquery
var container = $('#container2');
var canvas = container.children()[0];
$(canvas).width(100);
$(canvas).height(100);
draw(canvas);
});
</script>
</body>
</html>
The jQuery width and height methods are shorthand aliases for setting the CSS width and height properties. Sizing a canvas using CSS causes the scaled, distorted look you're seeing. Your pure javascript version of the code is setting the width and height attributes of the canvas element. To achieve the same in jQuery you can use:
$(canvas).prop('width', 100)
$(canvas).prop('height', 100)
JSFiddle
I am having an issue trying to get these 3 divs to line up on the same horizontal pane.
I will also like to know if it is possible to have the color of my circle change based on a value of a variable. I would greatly appreciate an example function.
<html>
<body>
<style type="text/css">
.circle
{
width:115px;
height:115px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:115px;
text-align:center;
background:#000
}
</style>
<div id="container" style=" border: 2px coral solid; width:100%; height:120px;">
<div class="circle">Hello</div>
<div id="leadInfo" style="width:37%; height:115px; float:left; background-color:yellow;"> </div>
<div id="leadInfo2" style="width:37.5%; height:115px; float:right; background-color:blue;"> </div>
</div>
</body>
</html>
First you wrote
float: leftt;
Instead of
float: left;
Also, try adjusting one of the yellow circles to be less then 37.5%, it somehow goes over 100% in total and jumps down. So 37% will be enough.
<div id="container" style=" border: 3px coral solid; width:100%; height:auto;">
<div id="colorwheel" style="width:25%; float:left; border: 3px coral solid;">
<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle="red";
context.fill()
</script>
</div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div style="clear:both"></div>
</div>
And about changing the color of a circle on canvas...
No, you can't change anything you've drawn on the canvas (including your circle).
That's because canvas doesn't "remember" where it drew your circle. Your circle becomes an un-remembered group of pixels on the canvas.
Therefore, if you want to change anything on the canvas, you must erase the canvas and redraw your circle using the fillStyle in your variable.
// create a variable to hold your desired fill color
var myFillColor="gold";
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set the context.fillStyle to your variable
context.fillStyle=myFillColor;
// redraw your circle
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fill();
Important note: context.arc is a path command and every group of path commands must be preceeded by context.beginPath. beginPath tells the browser you are finished drawing the previous path and are now drawing a new path. Failing to start new paths with beginPath will cause your next context.fill (or context.stroke) command to redraw all previous path commands.
I have two canvases that overlap intentionally, to draw a ball falling on top of the other canvas. I want to put a third canvas below those two overlapping ones on the page, without any overlap. When the div element that holds the overlapping canvases has a relative position, it does not prevent other elements from overlapping it. As I understand it, that div must be positioned relatively so that the canvases inside it can be positioned absolutely and overlap.
Here is my HTML:
<div id="box" style="position: relative;"></div>
<div id="countdiv"></div>
Here is the JavaScript:
boxCanvas = document.createElement("canvas");
// the margins on the page are 3%
boxCanvas.width = window.innerWidth - (window.innerWidth * .06);
boxCanvas.height = document.getElementById("height").value;
boxCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 0";
document.getElementById("box").appendChild(boxCanvas);
// second canvas for drawing balls falling
ballCanvas = document.createElement("canvas");
ballCanvas.width = boxCanvas.width;
ballCanvas.height = boxCanvas.height;
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1";
document.getElementById("box").appendChild(ballCanvas);
And here is the JavaScript for the third canvas:
countCanvas = document.createElement("canvas");
countCanvas.width = window.innerWidth - (window.innerWidth * .06);
countCanvas.height = 100;
countCanvas.style = "border: 1px solid #808080;";
document.getElementById("box").appendChild(countCanvas);
countctx = countCanvas.getContext("2d");
ballCanvas.height = boxCanvas.height;
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1";
document.getElementById("countdiv").appendChild(ballCanvas);
The problem can be seen here when you click drawbox() and then "show hitcounts". Thanks for the help! Let me know if I could provide any more information.
I must admit I’m not exactly sure what you’re asking.
I think you want to have 2 overlapping canvases on top followed by a separate canvas on the bottom.
And you want to do the styling in javascript instead of CSS.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/hgHBw/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#box{
border:1px solid blue;
}
.subcanvs{
border: 1px solid green;
}
#countCanvas{
border: 1px solid gold;
}
</style>
<script>
$(function(){
var w=300;
var h=200;
var boxDiv=document.getElementById("box");
boxDiv.style.width=w+"px";
boxDiv.style.height=h+"px";
boxDiv.style.position="relative";
var box=document.getElementById("boxCanvas");
var boxCtx=box.getContext("2d");
box.width=w;
box.height=h;
box.style.position="absolute";
box.style.left=0;
box.style.top=0;
var ball=document.getElementById("ballCanvas");
var ballCtx=ball.getContext("2d");
ball.width=w;
ball.height=h;
ball.style.position="absolute";
ball.style.left=0;
ball.style.top=0;
var counter=document.getElementById("countCanvas");
var countCtx=counter.getContext("2d");
counter.width=w;
counter.height=100;
test(boxCtx,20,30,"red");
test(ballCtx,100,30,"green");
test(countCtx,30,30,"blue");
function test(ctx,x,y,color){
ctx.beginPath();
ctx.fillStyle=color;
ctx.rect(x,y,50,50);
ctx.fill();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="box">
<canvas id="boxCanvas" class="subcanvs"></canvas>
<canvas id="ballCanvas" class="subcanvs"></canvas>
</div>
<canvas id="countCanvas"></canvas>
</body>
</html>
One thing to note:
// this sets the canvas drawing area to 100px wide
myCanvas.width=100;
// this styles the canvas element to be 100px wide on the page
// if this isn't == myCanvas.width then the image will be horizontally distorted
myCanvas.style.width="100px";