html画布元素问题上的Javascript
因此，我尝试创建一个方法，在该方法中，您可以围绕画布元素移动图像。这与创建多种游戏相关，你需要一个背景图像来正确地在画布和玩家的运动中移动。问题是您总是相对于画布左上角的（0,0）点进行绘制。所以我在概念化中要说的是，按right（例如）将被认为是将画布向右移动，而实际上是将图像向左移动。可以说这是不必要的，但老实说，从另一个角度考虑这件事会让我头疼。我认为，这种将所有事物与更大的绝对场联系起来的方法，将更容易用大量的对象进行编程 问题是，我在Pycharm中弄乱了我的代码，但我不断得到画布未定义和类似的错误。请帮我把这个修好！所以不用再麻烦了，这是我的代码！（我很感激任何其他清理我代码的方法，我对JS还很陌生！）html画布元素问题上的Javascript,javascript,debugging,canvas,Javascript,Debugging,Canvas,因此，我尝试创建一个方法，在该方法中，您可以围绕画布元素移动图像。这与创建多种游戏相关，你需要一个背景图像来正确地在画布和玩家的运动中移动。问题是您总是相对于画布左上角的（0,0）点进行绘制。所以我在概念化中要说的是，按right（例如）将被认为是将画布向右移动，而实际上是将图像向左移动。可以说这是不必要的，但老实说，从另一个角度考虑这件事会让我头疼。我认为，这种将所有事物与更大的绝对场联系起来的方法，将更容易用大量的对象进行编程 问题是，我在Pycharm中弄乱了我的代码，但我不断得到画布未定
//为画布上移动的黑点设置动画。
//参数的变量
配子体；
无功转速=6；
var帆布；
var背景；
var圈；
var-ctx；
//等待文档准备就绪，然后开始
$（文档）.ready（函数（）{
console.log（“文档已准备就绪”）；
init（）；
});
//保持相对坐标。
函数画布（）{
this.x=0；//相对x
this.y=0；//相对y
//计算屏幕高度和宽度
this.width=parseInt（$（“#canvas”）.attr（“width”）；
this.height=parseInt（$（“#canvas”）.attr（“height”）；
}
画布=新画布（）；
//定义一个对象
函数对象（）{
这个参数为.absX=0；
这个。absY=0；
this.x=this.absX canvas.x；
this.y=this.absY canvas.y；
}
//圆形物体
功能圆（半径）{
这个。半径=半径；
}
Circle.prototype=新对象（）//圆是一个物体
函数drawCircle（）{
//创建圆
ctx.strokeStyle=“#000000”；
ctx.fillStyle=“#000000”；
ctx.beginPath（）；
弧（圆.x，圆.y，圆.半径，0，数学PI*2，真）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）；
}
背景=图像（）；
Background.prototype=新对象（）//背景是一个对象
背景=新背景（）
功能缺陷背景（）{
//画背景
ctx.drawImage（background，background.x，background.y）；
}
函数init（）{
log（'function init（）'）；
初始化设置（）；
//插入循环键盘移动的事件处理程序（空格clearInterval）
$（文档）.keydown（函数（e）{
如果（e.keyCode=='37'）{//左键
圆圈。absX+=速度；
canvas.x+=速度；}
如果（e.keyCode=='38'）{//Up key
圆周。absY-=速度；
canvas.y-=速度；}
如果（e.keyCode=='39'）{//右键
圆圈。absX+=速度；
canvas.x+=速度；}
如果（e.keyCode=='40'）{///向下键
圆圈。absX+=速度；
canvas.y+=速度；}
如果（e.keyCode=='32'）{//空格键
console.log（'spacebar'）；
clearInterval（gameloopId）；
初始化设置（）；
gameloopId=setInterval（gameLoop，10）；
}
});
$（文档）.keyup（函数（e）{
如果（e.keyCode=='37'）{
console.log（'left'）；}//左键
如果（e.keyCode=='38'）{
console.log（'up'）；}//up键
如果（e.keyCode=='39'）{
console.log（'right'）；}//右键
如果（e.keyCode=='40'）{
console.log（'down'）；}//down键
});
//初始化“游戏”的循环
gameloopId=setInterval（gameLoop，10）；
}
函数initSettings（）{
log（'initSettings'）；
//设置画布
ctx=document.getElementById（'canvas'）.getContext（'2d'）；
//水平轴上的中心圆
console.log（“设置圆坐标”）；
圆圈=新圆圈（15）；
circle.x=parseInt（canvas.width/2）；
圆y=画布高度-40；
//将背景设置为（0,0）
背景x=0；
背景y=0；
background.src=”http://127.0.0.1:8000/static/back.jpg";
控制台.log（“背景宽度：+background.width”）；
控制台.log（“背景高度：+background.height”）；
}
函数gameLoop（）{
//log（'function gameLoop（）'）；
//它到达最左边了吗？
if（circle.xcanvas.width-circle.radius）
{
circle.x=canvas.width-circle.radius
}
//它达到顶端了吗？
if（circle.ycanvas.height-circle.radius）
{
circle.y=canvas.height-circle.radius
}
//背景到左边了吗？
if（background.x0）
{
背景x=0；
}
//背景达到顶端了吗？
if（background.y0）
{
背景y=0；
}
//清除屏幕（即，绘制一个屏幕大小的清晰矩形）
clearRect（0，0，canvas.width，canvas.height）；
ctx.save（）；
//画背景
牵引杆接地（）；
//画圆圈
画圈（）；
ctx.restore（）；
}
//为画布上移动的黑点设置动画。
//参数的变量
配子体；
无功转速=6；
var帆布；
var背景；
var圈；
var-ctx；
//等待文档准备就绪，然后开始
$（文档）.ready（函数（）{
console.log（“文档已准备就绪”）；
init（）；
});
//保持相对坐标。
函数画布（）{
this.x=0；//相对x
this.y=0；//相对y
//计算屏幕高度和宽度
this.width=parseInt（$（“#canvas”）.attr（“width”）；
this.height=parseInt（$（“#canvas”）.attr（“height”）；
}
//定义一个对象
函数MyObject（）{
这个参数为.absX=0；
这个。absY=0；
this.x=this.absX canvas.x；
这个
//Animates a moving black dot on the canvas.
//Variables for parameters
var gameloopId;
var speed=6;
var canvas;
var background;
var circle;
var ctx;
//Wait for document to be ready then start
$(document).ready(function(){
console.log('document is ready');
init();
});
//Holds the relative coordinates.
function Canvas(){
this.x=0;//relative X
this.y=0;//relative Y
//Calulate screen height and width
this.width = parseInt($("#canvas").attr("width"));
this.height = parseInt($("#canvas").attr("height"));
}
canvas=new Canvas();
//Define an object
function Object(){
this.absX=0;
this.absY=0;
this.x=this.absX-canvas.x;
this.y=this.absY-canvas.y;
}
//Circle Object
function Circle(radius){
this.radius=radius;
}
Circle.prototype= new Object(); //Circle is an Object
function drawCircle(){
// Create the circle
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
Background= Image();
Background.prototype=new Object(); //Background is an Object
background= new Background()
function drawBackground(){
//draw the background
ctx.drawImage(background,background.x,background.y);
}
function init(){
console.log('function init()');
initSettings();
//Insert event handler for keyboard movement of circle (space clearInterval)
$(document).keydown(function(e){
if(e.keyCode=='37'){ //Left key
circle.absX+=speed;
canvas.x+=speed;}
if(e.keyCode=='38'){ //Up key
circle.absY-=speed;
canvas.y-=speed;}
if(e.keyCode=='39'){ //Right key
circle.absX+=speed;
canvas.x+=speed;}
if(e.keyCode=='40'){ //Down key
circle.absX+=speed;
canvas.y+=speed;}
if(e.keyCode=='32'){ //Space Bar
console.log('spacebar');
clearInterval(gameloopId);
initSettings();
gameloopId = setInterval(gameLoop,10);
}
});
$(document).keyup(function(e){
if(e.keyCode=='37'){
console.log('left');}//Left key
if(e.keyCode=='38'){
console.log('up');}//Up key
if(e.keyCode=='39'){
console.log('right');}//Right key
if(e.keyCode=='40'){
console.log('down');}//Down key
});
//Initialize loop of "game"
gameloopId = setInterval(gameLoop,10);
}
function initSettings(){
console.log('initSettings');
//Set up canvas
ctx = document.getElementById('canvas').getContext('2d');
//center circle on the horizontal axis
console.log('setting circle coords');
circle = new Circle(15);
circle.x = parseInt(canvas.width/2);
circle.y = canvas.height - 40;
//Put background at (0,0)
background.x=0;
background.y=0;
background.src="http://127.0.0.1:8000/static/back.jpg";
console.log("background width:"+background.width);
console.log("background height:"+background.height);
}
function gameLoop(){
//console.log('function gameLoop()');
//Has it reached far left side?
if(circle.x<circle.radius)
{
circle.x=circle.radius
}
//Has it reached far right side?
if(circle.x>canvas.width - circle.radius)
{
circle.x=canvas.width - circle.radius
}
//Has it reached top?
if(circle.y<circle.radius)
{
circle.y=circle.radius
}
//has it reached bottom?
if(circle.y>canvas.height - circle.radius)
{
circle.y=canvas.height - circle.radius
}
//has background reached left?
if(background.x < canvas.width-background.width)
{
background.x= canvas.width-background.width;
}
//has background reached right?
if(background.x>0)
{
background.x=0;
}
//has background reached top?
if(background.y < canvas.height-background.height)
{
background.y = canvas.height-background.height;
}
//has background reached bottom?
if(background.y>0)
{
background.y=0;
}
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
//draw background
drawBackground();
// draw the circle
drawCircle();
ctx.restore();
}
//Animates a moving black dot on the canvas.
//Variables for parameters
var gameloopId;
var speed=6;
var canvas;
var background;
var circle;
var ctx;
//Wait for document to be ready then start
$(document).ready(function(){
console.log('document is ready');
init();
});
//Holds the relative coordinates.
function Canvas(){
this.x=0;//relative X
this.y=0;//relative Y
//Calulate screen height and width
this.width = parseInt($("#canvas").attr("width"));
this.height = parseInt($("#canvas").attr("height"));
}
//Define an object
function MyObject(){
this.absX=0;
this.absY=0;
this.x=this.absX-canvas.x;
this.y=this.absY-canvas.y;
}
//Circle MyObject
function Circle(radius){
this.radius=radius;
}
Circle.prototype= new MyObject(); //Circle is an MyObject
function drawCircle(){
// Create the circle
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
function Background(){
this.img= Image();
}
Background.prototype=new MyObject(); //Background is an MyObject
function drawBackground(){
//draw the background
ctx.drawImage(background,background.x,background.y);
}
function init(){
console.log('function init()');
initSettings();
//Insert event handler for keyboard movement of circle (space clearInterval)
$(document).keydown(function(e){
if(e.keyCode=='37'){ //Left key
circle.absX+=speed;
canvas.x+=speed;}
if(e.keyCode=='38'){ //Up key
circle.absY-=speed;
canvas.y-=speed;}
if(e.keyCode=='39'){ //Right key
circle.absX+=speed;
canvas.x+=speed;}
if(e.keyCode=='40'){ //Down key
circle.absX+=speed;
canvas.y+=speed;}
if(e.keyCode=='32'){ //Space Bar
console.log('spacebar');
clearInterval(gameloopId);
initSettings();
gameloopId = setInterval(gameLoop,10);
}
});
$(document).keyup(function(e){
if(e.keyCode=='37'){
console.log('left');}//Left key
if(e.keyCode=='38'){
console.log('up');}//Up key
if(e.keyCode=='39'){
console.log('right');}//Right key
if(e.keyCode=='40'){
console.log('down');}//Down key
});
//Initialize loop of "game"
gameloopId = setInterval(gameLoop,10);
}
function initSettings(){
console.log('initSettings');
//Set up canvas
canvas=new Canvas();
ctx = document.getElementById('canvas').getContext('2d');
//center circle on the horizontal axis
console.log('setting circle coords');
circle = new Circle(15);
circle.x = parseInt(canvas.width/2);
circle.y = canvas.height - 40;
//Put background at (0,0)
background= new Background();
background.x=0;
background.y=0;
background.img.src="http://127.0.0.1:8000/static/back.jpg";
console.log("background width:"+background.width);
console.log("background height:"+background.height);
}
function gameLoop(){
//console.log('function gameLoop()');
//Has it reached far left side?
if(circle.x<circle.radius)
{
circle.x=circle.radius
}
//Has it reached far right side?
if(circle.x>canvas.width - circle.radius)
{
circle.x=canvas.width - circle.radius
}
//Has it reached top?
if(circle.y<circle.radius)
{
circle.y=circle.radius
}
//has it reached bottom?
if(circle.y>canvas.height - circle.radius)
{
circle.y=canvas.height - circle.radius
}
//has background reached left?
if(background.x < canvas.width-background.width)
{
background.x= canvas.width-background.width;
}
//has background reached right?
if(background.x>0)
{
background.x=0;
}
//has background reached top?
if(background.y < canvas.height-background.height)
{
background.y = canvas.height-background.height;
}
//has background reached bottom?
if(background.y>0)
{
background.y=0;
}
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
//draw background
drawBackground();
// draw the circle
drawCircle();
ctx.restore();
}
enter code here
//Define an myObject
function myObject(){
this.absX=0;
this.absY=0;
this.x=this.absX-canvas.x;
this.y=this.absY-canvas.y;
}
Circle.prototype= new myObject(); //Circle is a myObject
Background= Image();
Background.prototype=new Object(); //Background is an Object
background= new Background()
//Animates a moving black dot on the canvas.
//Variables for parameters
var gameloopId;
var speed=6;
//var canvas;
var background;
var circle;
var ctx;
//Wait for document to be ready then start
$(document).ready(function(){
console.log('document is ready');
init();
});
//Holds the relative coordinates.
var canvas = new function Canvas(){
this.x=0;//relative X
this.y=0;//relative Y
//Calulate screen height and width
this.width = parseInt($("#canvas").attr("width"));
this.height = parseInt($("#canvas").attr("height"));
};
//Define an object
function MyObject(){
this.absX=0;
this.absY=0;
this.x=this.absX-canvas.x;
this.y=this.absY-canvas.y;
this.updateplace = function (){
this.x=this.absX-canvas.x;
this.y=this.absY-canvas.y;
};
}
//Circle MyObject
function Circle(radius){
this.radius=radius;
this.draw=function(){
// Create the circle
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
Circle.prototype= new MyObject(); //Circle is an MyObject
function Background(){
this.img= Image();
this.draw=function(){
ctx.drawImage(background.img,background.x,background.y);
}
}
Background.prototype=new MyObject(); //Background is an MyObject
function init(){
console.log('function init()');
initSettings();
//Insert event handler for keyboard movement of circle (space clearInterval)
$(document).keydown(function(e){
if(e.keyCode=='37'){ //Left key
circle.absX-=speed;
canvas.x-=speed;}
if(e.keyCode=='38'){ //Up key
circle.absY-=speed;
canvas.y-=speed;}
if(e.keyCode=='39'){ //Right key
circle.absX+=speed;
canvas.x+=speed;}
if(e.keyCode=='40'){ //Down key
circle.absY+=speed;
canvas.y+=speed;}
if(e.keyCode=='32'){ //Space Bar
console.log('spacebar');
clearInterval(gameloopId);
initSettings();
gameloopId = setInterval(gameLoop,10);
}
});
$(document).keyup(function(e){
if(e.keyCode=='37'){
console.log('left');}//Left key
if(e.keyCode=='38'){
console.log('up');}//Up key
if(e.keyCode=='39'){
console.log('right');}//Right key
if(e.keyCode=='40'){
console.log('down');}//Down key
});
//Initialize loop of "game"
gameloopId = setInterval(gameLoop,10);
}
function initSettings(){
console.log('initSettings');
//Set up canvas
ctx = document.getElementById('canvas').getContext('2d');
canvas.width = parseInt($("#canvas").attr("width"));
canvas.height = parseInt($("#canvas").attr("height"));
//center circle on the horizontal axis
console.log('setting circle coords');
circle = new Circle(15);
circle.absX = parseInt(canvas.width/2);
circle.absY = canvas.height - 40;
//Put background at (0,0)
background= new Background();
background.x=0;
background.y=0;
background.img.src="http://127.0.0.1:8000/static/back.jpg";
console.log("background width:"+background.img.width);
console.log("background height:"+background.img.height);
console.log("Right Bound:"+(background.img.width- canvas.width))
}
function gameLoop(){
//console.log('function gameLoop()');
//Has it reached far left side?
if(circle.absX<circle.radius)
{
circle.absX=circle.radius
}
//Has it reached far right side?
if(circle.absX>background.img.width - circle.radius)
{
circle.absX=background.img.width - circle.radius
}
//Has it reached top?
if(circle.absY<circle.radius)
{
circle.absY=circle.radius
}
//has it reached bottom?
if(circle.absY>background.img.height - circle.radius)
{
circle.absY=background.img.height - circle.radius
}
//has canvas reached right bound?
if(canvas.x > background.img.width- canvas.width)
{
canvas.x= background.img.width- canvas.width;
}
//has canvas reached left bound?
if(canvas.x<0)
{
canvas.x=0;
}
//has background reached bottom bound?
if(canvas.y > background.img.height - canvas.height)
{
canvas.y = background.img.height - canvas.height;
}
//has background reached top bound?
if(canvas.y<0)
{
canvas.y=0;
}
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
//draw background
background.updateplace();
background.draw();
// draw the circle
circle.updateplace();
circle.draw();
ctx.restore();
}