Текущая версия |
Ваш текст |
Строка 1: |
Строка 1: |
− | ==Описание==
| |
− |
| |
− | Реализация компьютерной игры на языке программирования JavaScript<br />
| |
− |
| |
− |
| |
− | Разработчики:
| |
− | [[Косолапов Егор | Косолапов Егор]],
| |
− | [[Высочина Александра | Высочина Александра]] и
| |
− | [[Целоусова Полина| Целоусова Полина]]<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>
| |