Я пытаюсь создать точечную игру, используя 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>