Текущая версия |
Ваш текст |
Строка 1: |
Строка 1: |
− | == Описание ==
| + | {{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/GravityGuy/GravityGuy.html | width=800 | height=650 | border=0 }} |
− | | |
− | * Реализация компьютерной игры Gravity Guy на языке программирования JavaScript
| |
− | * Автор: [[Павлова Екатерина|Павлова Екатерина]]
| |
− | * Группа 3630103/90003
| |
− | | |
− | == Игра ==
| |
− | {{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/GravityGuy/GravityGuy.html | width=800 | height=400 | 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>
| |