| Текущая версия |
Ваш текст |
| Строка 6: |
Строка 6: |
| | | | |
| | == Игра == | | == Игра == |
| − | {{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/GravityGuy/GravityGuy.html | width=800 | height=400 | border=0 }} | + | {{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/GravityGuy/GravityGuy.html | width=800 | height=650 | border=0 }} |
| − | | |
| − | == Код программы ==
| |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''HTML:''' <div class="mw-collapsible-content">
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | | |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title>Gravity guy!</title>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <script src="Курсач.js"></script>
| |
| − | <canvas id="cnvs" width="760" height="363"></canvas>
| |
| − | | |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''JavaScript:''' <div class="mw-collapsible-content">
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | window.addEventListener('load', main, false);
| |
| − |
| |
| − | function createImage(imagePath) {
| |
| − | let img = new Image();
| |
| − | img.src = imagePath;
| |
| − | return img;
| |
| − | }
| |
| − |
| |
| − | var bgImage = createImage('bg_760.jpg'); // Фон
| |
| − | var UpImage = createImage('Up.png'); // Блок вверхний
| |
| − | var BottomImage = createImage('Bottom.png'); // Блок нижний
| |
| − | var playerImage = createImage('pl.png'); // Игрок
| |
| − | var coinImage = createImage('coin.png'); // Монетка
| |
| − |
| |
| − | function main() {
| |
| − |
| |
| − | function drawImage(obj) {
| |
| − | ctx.drawImage(obj.image, obj.x-obj.w/2, obj.y-obj.h/2, obj.w, obj.h);
| |
| − | }
| |
| − |
| |
| − | var ctx = cnvs.getContext('2d');
| |
| − | var w = cnvs.width;
| |
| − | var h = cnvs.height;
| |
| − |
| |
| − | var defaultUp = 60;
| |
| − | var defaultBottom = 300;
| |
| − | var gap = 150; // Отступ между блоками
| |
| − | var lastBlock = false;
| |
| − |
| |
| − | var dt = 0.1;
| |
| − | var score = 0;
| |
| − |
| |
| − | // Создание блоков
| |
| − | function createBlockUp(x, y) {
| |
| − | return {
| |
| − | x: x,
| |
| − | y: y,
| |
| − | w: 150,
| |
| − | h: 40,
| |
| − | image: UpImage,
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function createBlockBottom(x, y) {
| |
| − | return {
| |
| − | x: x,
| |
| − | y: y,
| |
| − | w: 150,
| |
| − | h: 40,
| |
| − | image: BottomImage,
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var blocksUp = [
| |
| − | createBlockUp(90+gap, defaultUp),
| |
| − | createBlockUp(90+3*gap, defaultUp),
| |
| − | ];
| |
| − |
| |
| − | var blocksBottom = [
| |
| − | createBlockBottom(90, defaultBottom),
| |
| − | createBlockBottom(90+2*gap, defaultBottom),
| |
| − | createBlockBottom(90+4*gap, defaultBottom),
| |
| − | ];
| |
| − |
| |
| − |
| |
| − | // Создание монеток
| |
| − | function createCoin(x, y) {
| |
| − | return {
| |
| − | x: x,
| |
| − | y: y,
| |
| − | w: 30,
| |
| − | h: 30,
| |
| − | image: coinImage,
| |
| − | }
| |
| − | }
| |
| − | | |
| − | var coins = [];
| |
| − |
| |
| − | // Игрок
| |
| − | var player = {
| |
| − | x: 90,
| |
| − | y: 200,
| |
| − | grav: 30,
| |
| − | vx: 10,
| |
| − | vy: 0,
| |
| − | w: 36,
| |
| − | h: 36,
| |
| − | image: playerImage,
| |
| − | inAir: true,
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // При нажатии на кнопку
| |
| − | document.addEventListener('keydown', (event) => {
| |
| − | const keyName = event.key;
| |
| − | if (!player.inAir) {
| |
| − | player.grav *= -1;
| |
| − | player.vy *= -10;
| |
| − | }
| |
| − | })
| |
| − |
| |
| − |
| |
| − | function draw() {
| |
| − |
| |
| − | // Рисует фон
| |
| − | ctx.clearRect(0,0,w,h)
| |
| − | ctx.drawImage(bgImage, 0, 0);
| |
| − |
| |
| − | // Счёт монеток
| |
| − | ctx.fillStyle = '#000';
| |
| − | ctx.font = '24px Verdana';
| |
| − | ctx.fillText('Монеток: ' + score, w - 180, 40);
| |
| − |
| |
| − | // Рисует игрока
| |
| − | drawImage(player);
| |
| − | | |
| − | // Рисует платформы и монетки
| |
| − | for (var i=0; i < blocksBottom.length; i++) {
| |
| − | drawImage(blocksBottom[i]);
| |
| − | }
| |
| − | for (var i=0; i < blocksUp.length; i++) {
| |
| − | drawImage(blocksUp[i]);
| |
| − | }
| |
| − | for (var i=0; i < coins.length; i++) {
| |
| − | drawImage(coins[i]);
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function physics() {
| |
| − |
| |
| − | // Движение игрока
| |
| − | player.y += player.grav * dt;
| |
| − | player.inAir = true;
| |
| − |
| |
| − | // Столкновение с платформой
| |
| − | for (var i=0; i < blocksBottom.length; i++) {
| |
| − | var block = blocksBottom[i]
| |
| − | if (player.x > block.x-block.w/2
| |
| − | && player.x < block.x+block.w/2
| |
| − | && player.y + player.h/2 > block.y-block.h/2 - 20) {
| |
| − | player.y = block.y - block.h/2 - 5;
| |
| − | player.vy = 1;
| |
| − | player.inAir = false;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | for (var i=0; i < blocksUp.length; i++) {
| |
| − | var block = blocksUp[i];
| |
| − | if (player.x > block.x - block.w/2
| |
| − | && player.x < block.x + block.w/2
| |
| − | && player.y - player.h/2 - 10 < block.y + block.h/2 - 20) {
| |
| − | player.y = block.y + block.h/2 - 5;
| |
| − | player.vy = -1;
| |
| − | player.inAir = false;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Движение платформ и монеток
| |
| − | for (var i=0; i < blocksBottom.length; i++) {
| |
| − | blocksBottom[i].x -= player.vx * dt;
| |
| − | }
| |
| − | for (var i=0; i < blocksUp.length; i++) {
| |
| − | blocksUp[i].x -= player.vx * dt;
| |
| − | }
| |
| − | for (var i=0; i < coins.length; i++) {
| |
| − | coins[i].x -= player.vx * dt;
| |
| − | }
| |
| − |
| |
| − | // Создание новых платформ с монетками
| |
| − | if (blocksBottom[blocksBottom.length-1].x < 800 - gap && !lastBlock) {
| |
| − |
| |
| − | var x = 800 - Math.floor(Math.random()*50);
| |
| − | var y = Math.floor(defaultUp + Math.random()*60)
| |
| − |
| |
| − | blocksUp.push(createBlockUp(x, y))
| |
| − | coins.push(createCoin(x-40, y+25));
| |
| − | coins.push(createCoin(x, y+25));
| |
| − | coins.push(createCoin(x+40, y+25));
| |
| − |
| |
| − | lastBlock = true;
| |
| − | dt += 0.01;
| |
| − | }
| |
| − |
| |
| − | if (blocksUp[blocksUp.length-1].x < 800 - gap && lastBlock) {
| |
| − |
| |
| − | var x = 800 - Math.floor(Math.random()*20);
| |
| − | var y = Math.floor(defaultBottom - Math.random()*50)
| |
| − |
| |
| − | blocksBottom.push(createBlockBottom(x, y))
| |
| − | coins.push(createCoin(x-40, y-25));
| |
| − | coins.push(createCoin(x, y-25));
| |
| − | coins.push(createCoin(x+40, y-25));
| |
| − |
| |
| − | lastBlock = false;
| |
| − | }
| |
| − |
| |
| − | // Перезапуск игры
| |
| − | if(player.y + player.h <= 0 || player.y - player.h >= defaultBottom) {
| |
| − | location.reload();
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function collectingCoins() {
| |
| − | // Сбор монеток
| |
| − | for (var i=0; i < coins.length; i++) {
| |
| − |
| |
| − | var penny = coins[i];
| |
| − |
| |
| − | if (player.w/2 + penny.w/2 > penny.x - player.x
| |
| − | && player.h/2 + player.h/2 > player.y - penny.y
| |
| − | && player.h/2 + player.h/2 > penny.y - player.y ) {
| |
| − | coins.splice(0, 1);
| |
| − | score++;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function control() {
| |
| − | draw();
| |
| − | physics();
| |
| − | collectingCoins();
| |
| − | requestAnimationFrame(control);
| |
| − | }
| |
| − |
| |
| − | control();
| |
| − |
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
