Play the Game!
Теперь попробуем совместить интерактивность и анимацию. Напишем небольшую, но бодрящую игру (с мячиком!), дабы пояснить основные приемы создания canvas-игрушек.
Прежде всего создадим площадку для игры:
<html>
<head>
<title>Canvas</title>
<script src="../j query-1.4.4.min. js"></script> <script> var canvas;
$(function(){
Var canvas = document. getElementById("myCanvas"); var context = canvas. getContext("2d"); var xstep =1; var ystep =1; var ball = {x:140,y: 130} context. strokeRect(0, 0,500,300); context. fillStyle = "green"; context. shadowColor = ‘green’; context. shadowBlur = 10; context. shadowOffsetX = 5; context. shadowOffsetY = 5;
});
</script>
</head>
<body>
<canvas id=”myCanvas” width=”500” height=”300”> Your browser does not support HTML5 Canvas. </canvas>
</body>
</html>
Тут мы сразу определили переменные — сам объект-мячик (ball), характеризуемый координатами, горизонтальную и вертикальную скорость перемещения.
Теперь сам мячик. Поскольку он у нас будет летать и прыгать, отрисовывать мы его будем посредством конструкции setInterval:
Context. fillStyle = ”green”; context. shadowColor = ‘green’; context. shadowBlur = 10; context. shadowOffsetX = 5; context. shadowOffsetY = 5;
Var play = function(){
Context. clearRect(0, 0,500,300): context. strokeRect(0, 0,500,300): context. arc(ball. x,ball. y,10,0, 7, 0): context. fill():
}
SetInterval(play, 10):
});
Теперь заставим мячик двигаться. Это совсем просто:
Var play = function(){
Context. clearRect(0, 0,500,300):
Context. strokeRect(0, 0,500,300):
Ball. x += xstep;
Ball. y += ystep;
Context. beginPath():
Context. arc(ball. x,ball. y,10,0,7,0):
Context. fill():
}
Вот и все! Я надеюсь, из предыдущих частей статьи ясно, зачем нужен context. beginPath().
В самом таком движении ничего интересного нет — как вы можете убедиться, запустив код, мячик начинает двигаться вправо вниз и бодро исчезает, покинув область холста. Заставим его отталкиваться от стенок:
Context. fill();
If((ball. y >= 290) || (ball. y <= 10)){ ystep = — ystep;
}
If((ball. x >= 490) || (ball. x <= 10)){ xstep = — xstep;
}
}
Теперь все в порядке, но где, собственно, интерактивность? Давайте введем возможность управлять мячиком (менять направление движения) с помощью клавиш — стрелочек.
Context. strokeRect(0, 0,500,300);
Document. addEventListener("keydown", function(e){
If(e. keyCode == 37){ xstep = -1;
}
If(e. keyCode == 39){ xstep = 1;
}
If(e. keyCode == 38){ ystep = -1;
}
If(e. keyCode == 40){ ystep = 1;
}
Понятно, что «magic numbers» 37-40 — это коды клавиш «влево», «вверх», «вправо», «вниз». Теперь можно, нажимая эти кнопки, не допускать столкновения мячика со стенками.
Собственно, все — движок игры у нас уже есть. Осталось только сделать что-нибу дь вроде:
If((ball. y >= 290) || (ball. y <= 10)){ alert("bams!"); ystep = — ystep;
}
Ну или озаботиться системой начисления штрафных очков за каждое соприкосновение со стенкой. И учитывать время в качестве персонального достижения. А можно со временем увеличивать скорость. Вводить дополнительные препятствия. И дополнительные мячи, от которых следует уклоняться. И это только то, что мне пришло в голову за полминуты! В общем, дерзайте. А я дождусь и поиграю.
(То, что пока получилось у нас, — на рис. 52.)
Рис. 52. Игра на Canvas API
Добавить комментарий