| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| | ==Описание== | | ==Описание== |
| − | | + | Исполнители:<br /> |
| − | Реализация компьютерной игры на языке программирования JavaScript<br />
| + | [[Косолапов Егор | Косолапов Егор]]<br /> |
| − | | + | [[Высочина Александра | Высочина Александра]]<br /> |
| − | | |
| − | Разработчики:
| |
| − | [[Косолапов Егор | Косолапов Егор]], | |
| − | [[Высочина Александра | Высочина Александра]] и | |
| | [[Целоусова Полина| Целоусова Полина]]<br /> | | [[Целоусова Полина| Целоусова Полина]]<br /> |
| − |
| |
| | Группа №3630103/90001<br /> | | Группа №3630103/90001<br /> |
| − |
| |
| | ==Визуализация== | | ==Визуализация== |
| | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Kosolapov/Coursework.html | width =1300 | height = 800 | border = 0}} | | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Kosolapov/Coursework.html | width =1300 | height = 800 | border = 0}} |
| − |
| |
| − | ==Код программы==
| |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | var img = new Image()
| |
| − | var isMoved = false
| |
| − | var isDrag = false
| |
| − | var isGo = false
| |
| − | var offset = {x:0, y:0}
| |
| − | var timer
| |
| − | var coordinate
| |
| − | var schet = 0
| |
| − | var time = 0
| |
| − | var m = {}
| |
| − | var v0 = 0.0003
| |
| − | var vx
| |
| − | var vy
| |
| − | var g = 0.01
| |
| − | var canvas = document.getElementById("canvas")
| |
| − | var ctx = canvas.getContext('2d')
| |
| − | var end_flag = true
| |
| − | var flag_time = false
| |
| − | var flag_clear = false
| |
| − | var flag_border = false
| |
| − | var seconds = 0
| |
| − | var k = 0
| |
| − |
| |
| − |
| |
| − | start()
| |
| − | var y0 = y
| |
| − | var x0 = x
| |
| − | setInterval(count, 1)
| |
| − | setInterval(function(){
| |
| − | draw(x,y,ring_time)
| |
| − | }, 1)
| |
| − |
| |
| − | function start(){
| |
| − | if(end_flag){
| |
| − | ctx.clearRect(0, 0, canvas.width, canvas.height)
| |
| − | x = 250 + Math.random() * 100
| |
| − | y = 400 + Math.random() * 100
| |
| − | r = 35 + Math.random() * 5
| |
| − | end_flag = false
| |
| − | draw(x,y)
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function count(){
| |
| − | seconds += 1
| |
| − | if (flag_time){
| |
| − | time += 1
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function getMouseCoords(e) {
| |
| − | var rect = canvas.getBoundingClientRect()
| |
| − | m.x = e.clientX - rect.left
| |
| − | m.y = e.clientY - rect.top
| |
| − | return m
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | canvas.onmousedown = function(e){
| |
| − | var m = getMouseCoords(e)
| |
| − | if (!isGo && Math.pow(m.x - x,2) + Math.pow((m.y - y),2) <= r * r) {
| |
| − | offset.x = m.x-x
| |
| − | offset.y = m.y - y
| |
| − | isDrag = true
| |
| − | flag_time = true
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | canvas.onmousemove = function(e) {
| |
| − | var m = getMouseCoords(e)
| |
| − | if (isDrag) {
| |
| − | isMoved = true
| |
| − | x = m.x - offset.x
| |
| − | y = m.y - offset.y
| |
| − | d = Math.sqrt(Math.pow((x0 - x), 2) + Math.pow(y0 - y), 2)
| |
| − | draw(x,y,ring_time)
| |
| − | }
| |
| − | if ((x >= canvas.width - 150) && (!isGo)){
| |
| − | clearInterval(timer)
| |
| − | end_flag = true
| |
| − | start()
| |
| − | isDrag = false
| |
| − | isGo = false
| |
| − | flag_time = false
| |
| − | flag_clear = false
| |
| − | flag_border = false
| |
| − | isMoved = false
| |
| − | v0 = 0.0003
| |
| − | vx = 0
| |
| − | vy = 0
| |
| − | y0 = y
| |
| − | x0 = x
| |
| − | time = 0
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | canvas.onmouseup = function(e) {
| |
| − | if(isDrag && isMoved){
| |
| − | flag_clear = true
| |
| − | flag_time = false
| |
| − | isGo = true
| |
| − | var m = getMouseCoords(e)
| |
| − | isDrag = false
| |
| − | draw(x,y,ring_time)
| |
| − | if (((y0 - y) < 0) && (x0 - x > 0)){
| |
| − | var fi = Math.atan((y0 - y) / (x0 - x))
| |
| − | }
| |
| − | if (((y0 - y) > 0) && (x0 - x <= 0)){
| |
| − | var fi = Math.PI/2 - Math.atan((x0 - x) / (y0 - y))
| |
| − | }
| |
| − | if (((y0 - y) >= 0) && (x0 - x > 0)){
| |
| − | var fi = Math.atan((y0 - y) / (x0 - x))
| |
| − | console.log(fi)
| |
| − | }
| |
| − | if (((y0 - y) < 0) && (x0 - x < 0)){
| |
| − | var fi = Math.PI + Math.atan((y0 - y) / (x0 - x))
| |
| − | }
| |
| − | if (fi == undefined){
| |
| − | fi = 4
| |
| − | }
| |
| − | vx = Math.abs(Math.sin(1/2 * Math.PI * time / 500)) * v0 * Math.cos(fi) * 60000 / (0.1 * r)
| |
| − | vy = Math.abs(Math.sin(1/2 * Math.PI * time / 500)) * v0 * Math.sin(fi) * 60000 / (0.1 * r)
| |
| − | timer = setInterval(move, 1)
| |
| − |
| |
| − | }
| |
| − | if (!isMoved){
| |
| − | time = 0
| |
| − | isDrag = false
| |
| − | flag_time = false
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function move() {
| |
| − | draw(x,y,ring_time)
| |
| − | x += vx
| |
| − | y += vy
| |
| − | vy += g
| |
| − |
| |
| − | if(y >= canvas.height - r) {
| |
| − | clearInterval(timer)
| |
| − | end_flag = true
| |
| − | start()
| |
| − | isDrag = false
| |
| − | isGo = false
| |
| − | flag_time = false
| |
| − | flag_clear = false
| |
| − | flag_border = false
| |
| − | isMoved = false
| |
| − | v0 = 0.0003
| |
| − | vx = 0
| |
| − | vy = 0
| |
| − | y0 = y
| |
| − | x0 = x
| |
| − | time = 0
| |
| − | schet = 0
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if(x >= canvas.width-r) {
| |
| − | x = canvas.width-r
| |
| − | vx = -vx * 0.5
| |
| − | }
| |
| − |
| |
| − | if(x <= r) {
| |
| − | x = r;
| |
| − | vx = -vx*0.5
| |
| − | }
| |
| − |
| |
| − | if(y >= canvas.height - r) {
| |
| − | y = canvas.height - r
| |
| − | vy = -vy * 0.5
| |
| − | vx *= 0.5
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if((x >= 1200 - 150 - r) && (y >= coordinate) && (y <= coordinate + 115) && (x <= 1200 - 150 - 1)){
| |
| − | vx = -vx
| |
| − | x = 1200 - 150 - 1.01*r
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if((x >= 1200 - 150 - r) && (y <= coordinate + 50) && (y >= coordinate) && (vy > 0)){
| |
| − | clearInterval(timer)
| |
| − | end_flag = true
| |
| − | start()
| |
| − | flag_clear = false
| |
| − | isDrag = false
| |
| − | isGo = false
| |
| − | v0 = 0.0003
| |
| − | vx = 0
| |
| − | vy = 0
| |
| − | y0 = y
| |
| − | x0 = x
| |
| − | time = 0
| |
| − | schet += 1
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function draw(x,y) {
| |
| − | ctx.clearRect(0, 0, canvas.width, canvas.height)
| |
| − | ctx.beginPath()
| |
| − | var Back = new Image();
| |
| − | Back.src = "Back.png";
| |
| − | ctx.drawImage(Back, 0, 0);
| |
| − | ctx.strokeStyle = '#ff99ff';
| |
| − | ctx.lineWidth=3;
| |
| − | ctx.font = '50px Arial Black'
| |
| − | ctx.strokeText('Score:', 30, 60)
| |
| − | ctx.strokeText(schet, 215, 60)
| |
| − | ctx.strokeText('Pull Force:', 30, 120)
| |
| − | if (Math.floor(time/500) % 2 == 0){
| |
| − | ctx.strokeText(Math.floor((time % 500) / 5), 330, 120)
| |
| − | }
| |
| − | if(Math.floor(time/500) % 2 == 1){
| |
| − | ctx.strokeText(100 - Math.floor((time % 500) / 5), 330, 120)
| |
| − | }
| |
| − | ctx.strokeText('%', 395, 120)
| |
| − | ring_time = seconds
| |
| − | if ((ring_time) * (schet + 1)/400 % 2 == 1){
| |
| − | img.src = 'Ring.png'
| |
| − | ctx.drawImage(img, 1200 - 135, 400, 135, 135)
| |
| − | ring_time = 699
| |
| − | }
| |
| − | else{
| |
| − | if (Math.floor((ring_time) * (schet + 1)/400) % 2 == 1){
| |
| − | img.src = 'Ring.png'
| |
| − | ctx.drawImage(img, 1200 - 135, ((400 - (ring_time % 400)) * (schet + 1)) % 400, 135, 135)
| |
| − | coordinate = ((400 - (ring_time % 400)) * (schet + 1)) % 400
| |
| − | }
| |
| − |
| |
| − | if (Math.floor(ring_time * (schet + 1)/400) % 2 == 0){
| |
| − | img.src = 'Ring.png'
| |
| − | ctx.drawImage(img, 1200 - 135, ((ring_time % 400) * (schet + 1)) % 400, 135, 135)
| |
| − | coordinate = ((ring_time % 400) * (schet + 1)) % 400
| |
| − | }
| |
| − | }
| |
| − | var Ball = new Image()
| |
| − | Ball.src = 'Ball.png'
| |
| − | ctx.drawImage(Ball, x - r, y - r, 2 * r, 2 * r)
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
