<!DOCTYPE html>
<html>
<head>
<title>Snake!!</title>
<link rel="stylesheet" href ="snake.css">
</head>
<body scroll="no" style="overflow: hidden">
<div class="canvas-container">
<img src="Apple.png" width="0" height="0" id="Apple"><!--Image-->
<canvas id="myCanvas"></canvas> <!-- canvas for the game-->
<button type="button" onclick="restartGame()"class="Restartbutton" id="myButton">Restart</button>
<textarea class="score"id="score" ></textarea>
<script src="snake.js"></script>
</div>
</body>
</html>
const Canvas = document.getElementById("myCanvas");<!-- start of JS-->
const ctx = Canvas.getContext("2d");
const imgApple = document.getElementById("Apple");
function draw(){
ctx.drawImage(imgApple,200,200,50,50);<!-- just random numbers to place the Apple at-->
ctx.fill();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
I wanted to make an Snake game. I drew all the canvas and buttons for the game and now I just want to have a player or an Apple in the game as Images. I need help.
Thx already!
The problem is that you didn't specify initial dimensions for your canvas - thus it's using the defaults of width=300 and height=150. Of course this wouldn't be much of a problem if there wouldn't be this line:
ctx.drawImage(imgApple,200,200,50,50);
This means it tries to draw the apple at screen position x=200 and y=200 - outside of the visible area of the canvas.
Try it with
ctx.drawImage(imgApple,200,100,50,50);
Related
I have a 3 kiddie games . All of them is tracing/sketching. The game is to sketch lines, letters and numbers.
I already started the sketching the lines and I used sketch.js from http://intridea.github.io/sketch.js/ , which is not really 100% working.
Now my question is, how to do it through letters and numbers.
I have created a sample but it's not really working. So the game is like this. there's a letter 'A', then the user(kid) will trace that A. But in my sample, the letter will gone. So if the user had already traced/sketch it, the "next" button will appear.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://intridea.github.com/sketch.js/lib/sketch.min.js"></script>
<canvas id="myCanvas" width="200" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "150px Arial";
ctx.strokeText("A",20,200);
$('#myCanvas').sketch({
defaultColor: "#ff0000",
defaultSize: 10
});
</script>
</body>
</html>
I have been working on a interactive floorplan, that when you press a button, it would draw on the Canvas element. The more I have been working with this, the more I've grown aware that it might not even be possible - any ideas? Here's how much of the code I have done ( it does not work as intended, obviously)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul id="nav">
<div id="buttons">
<input type="button" id="clear" value="118">
</div>
</ul>
<div id="main">
<canvas id="118" width="1200" height="630" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("canvas118");
var context = canvas.getContext("2d");
document.getElementById('clear').addEventListener('click', function() {
context.moveTo(87,354);
context.lineTo(169,426);
context.lineTo(277,397);
context.lineTo(198,324);
context.lineTo(87,354);
context.fillstyle = "#ff0000";
context.fill();
context.strokeStyle = "#ff0000";
context.stroke();
});
</script>
</div>
</body>
</html>
Here's your code working / changed:
https://jsfiddle.net/dxhytwf4/2/
created a funcion and added the click event directly on the input:
<input type="button" id="clear" value="118" onclick="draw()" />
Javascript:
function draw() {
var canvas = document.getElementById("118");
var context = canvas.getContext("2d");
...
Also you were getting element canvas118 not 118
Seems to me like you are missing the call to beginPath()...Try it like this:
var c=document.getElementById("canvas118");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Taken from here.
I have created an HTML5 canvas game which involves dragging and selecting objects(words) from two canvases. The screen also has two buttons. But unfortunately my program is hard coded in terms of selecting words as I have entered the co-ordinates where the words are drawn on canvas. My screen resolution is 1366 x768. Now whenever the resolution is changed, the buttons move somewhere else and the mouse never selects the dragged words rather some words else above it. I am in a big trouble now, please help !!
<html>
<head>
<title>Word Search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = text/css href="style.css">
<script type="text/javascript" src="keywords.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript" src="grid.js"></script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1 id="heading">Find Keywords</h1>
<h3 id="results">Drag through the lettered Squares..!</h3>
<canvas id ='canvas1' height = 450 width="450" style= "border :1px solid black"> </canvas>
<canvas id ='canvas2' height = 450 width="250" style= "border :1px solid black"></canvas>
<input type='button' value="HIGHLIGHT ALL" id="button1" onclick="highlight();" />
<input type='button' value="NEXT" id="button2" onclick="next();"/>
<script>
var words =[];
window.onload = function(){
begin();
};
function begin()
{
wordSearchPuzzle();
}
function wordSearchPuzzle()
{
words.length=0;
words = getwords(8);
var puz =wordfind(words);
game(words,puz);
}
function next()
{
var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx1.clearRect(0, 0, canvas.width, canvas.height);
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
wordSearchPuzzle();
}
</script>
</body>
</html>
This is possible, I have done it int he past with a canvas that would be dynamically sized based on the screen size.
If I remember correctly i did something like this.
I placed the canvas in a div, and gave the div a dynamic width, something like style="width: 30%"
I placed the canvas inside this div and tied css to give the canvas a style="width: 100%"
<div style="width:30%">
<canvas id="can" style="width:100%"></canvas>
</div>
I tied into the window resized event and read the client size to determine the element width and height to change the canvas
window.resize = function(){
var canvas = document.getElementById("can");
canvas.width = canvas.clientWidth;
canvas.height = //some value based on width
}
You then need to redraw your canvas as resizing will clear the canvas of all content
I have a simple animation made in Flash which is colour changing wheel wheel, and GIF ready too. When somebody goes to my site, the wheel keeps animating.
But what I need is that when someone presses the "Stop Animation" button near the animation, a message to be displayed on the screen. It would be better if it can be popped out and can be sent to the user's email id he inputs.
A great thanks from my side to someone who can help me.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from Anime</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="Untitled-1.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.Untitled1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(2);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"> </canvas>
After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Let's Draw!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="drawShape();">
<canvas id="my_canvas" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>
Javascript:
function drawShape(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // ctx = context
ctx.fillStyle = "red";
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?