Question

我正在尝试使用HTML和JavaScript创建一个点游戏。我的要求是在画布上显示两个按钮：第一个是开始，它在画布上显示点，并通过笔触将每个点连接在一起。我已经创建了一个基本的动画，但是当我创建一个按钮来检查代码时，我的点没有出现在画布上。

我必须用HTML和JS来做。

显示动画动物模仿连接点游戏   JavaScript。

绘制所有笔划后（画布显示完全绘制的   动物），一次将绘制的动物向右移动4个像素   直到动物的最右边接触到动物的最右边   画布。

高级功能：-加载页面时，画布为空白，   显示两个按钮：•开始动画（一旦更改为“停止”   点击）•清除屏幕

当按下“开始动画”按钮时，点应为   屏幕上显示的具有以下特征：


移动所有点的位置，以便完全绘制动物   现在在画布中间。

根据基本知识绘制动物   动画。

绘制动物后，将动物移向   右，左，上或下（每次按   单击），直到用户按下“停止”为止   按钮，否则动物到达边缘。


如果单击“停止动画”按钮，则所有图形/动画   停止，按钮标签恢复为“开始动画”。   再次单击开始将重新开始绘图。

<!DOCTYPE html>
<html>
<head>
	<script src="http//code.jquery/jquery-latest.js"></script>
	<title>Gaming world</title>
	<meta charset="utf-8">

	<meta name"viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="file:///C:/Users/sana7/OneDrive/Documents/cv_drawing/css/cv.css">
</head>
<body>
<canvas id="myCanvas"  style= " position: absolute; border:2px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
	var ourgame={
	dots:[{x:7,y:10},{x:80,y:9},{x:80,y:30},{x:80,y:50},{x:83,y:70},{x:90,y:90},{x:110,y:100},{x:130,y:100},{x:150,y:100},{x:170,y:100},{x:190,y:105},{x:210,y:120},{x:230,y:130},{x:255,y:130},{x:255,y:160}]
	};

		console.log(ourgame.dots[0].x);
		console.log(ourgame.dots.length);

var c =document.getElementById("myCanvas");
c.width=window.innerWidth;
c.height=window.innerHeight;
var ctx = c.getContext("2d");
 
 function draw_dots(){
	for (var i = 0; i<20;i++) {
	 ctx.beginPath();
	 ctx.arc(ourgame.dots[i].x,ourgame.dots[i].y,7,0,2*Math.PI);
	  ctx.stroke();
	  ctx.fillStyle ="pink";
	  ctx.fill();
	 console.log(ourgame.dots[i].y);
	}}
  var j=0;
		function update() {
			var s=ourgame.dots[j];
			var d;
			if (j==ourgame.dots.length-1) 
				{var d=ourgame.dots[0];
				}
				else{d= ourgame.dots[j+1]
				}
		j=j+1;	
		if(j>ourgame.dots.length-1){
			clearInterval();
			console.log('game stop');
		}
			ctx.moveTo(s.x,s.y);
			ctx.lineTo(d.x,d.y);
			ctx.linewidth=15;
			var grd = ctx.createLinearGradient(0,0,170,0);
			grd.addColorStop(0,"yellow");
			grd.addColorStop(0.3,"blue");
			grd.addColorStop(0.8,"red");
		    ctx.fillstyle=grd;
		    ctx.strokeStyle =grd;
			ctx.stroke();	
		}
		interval=setInterval(update,3000);
		draw_dots();
</script> 

</body>

</html>

点击按钮后在画布上绘制一个点

0 个答案: