If you increase or reduce the screen move elements how to fix them?

0 like 0 dislike
Just starting to examine these topics below program code
<!DOCTYPE html>Course work

*{ margin: 0px; padding: 0px; box-sizing: border-box; color: #000; font-size: 30px; font-weight: bold; text-align: center; } .clear{ clear: both; } /*Background*/ body{ background-image: url(bg.jpg); -webkit-background-size: cover; background-size: cover; } /*The part where the game takes place*/ #canvas{ width: 650px; height: 650px; display: block; margin: 30px auto; border: 1px solid #000; border-radius: 5px; background-image: url(1.jpg); -webkit-background-size: cover; background-size: cover; } /*Up arrow*/ #keyUp{ width: 70px; height: 70px; background-image: url(u.png); -webkit-background-size: cover; background-size: cover; right: 335px; top: 267px; } /*Down arrow*/ #keyDown{ width: 70px; height: 70px; background-image: url(d.png); -webkit-background-size: cover; background-size: cover; right: 335px; top: 367px; } /*Left arrow*/ #keyLeft{ width: 70px; height: 70px; background-image: url(l.png); -webkit-background-size: cover; background-size: cover; right: -1350px; top: -430px; } /*Right arrow*/ #keyRight{ width: 70px; height: 70px; background-image: url(r.png); -webkit-background-size: cover; background-size: cover; right: -1450px; top: -430px; } /*Restart game*/ #keyCenter{ width: 100px; height: 100px; background-image: url(restart.png); -webkit-background-size: cover; background-size: cover; right: 40px; bottom: 40px; } /*Position of button*/ #keyLeft, #keyRight{ float: left; position: absolute; } #keyUp, #middle, #keyDown{ margin: 20px auto; position: absolute; } #middle{ width: 170px; } #keyCenter{ background-image: url(restart.png); -webkit-background-size: cover; background-size: cover; position: absolute; } .image{ position: relative; bottom: 700px; right: 500px; } #score{ position: absolute; top: 50px; left: 873px; font-weight: normal; font-family: comic sans ms,sans-serif; } /*Class settings*/ } .settings{ position: absolute; display: inline-block; width: 650px; } /*Prohozhdenie through walls*/ #through_walls{ position: relative; transform:scale(2.5); opacity:0.9; top: -7px; right: 10px; cursor:pointer; } /*Defines the style element when you hover over it the mouse cursor*/ label:hover{ cursor: pointer; } /*Modal window*/ .modal{ display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,1,0,0.8); } .modal-content{ position: relative; background-image: url(bg.jpg); margin: 15% auto; padding: 5px; border: 1px solid #888; width: 80%; border-radius: 10px; } /*Class closing*/ .close{ transform:scale(2.5); color: #aaa; position: absolute; right: 15px; top: 10px; float: right; font-size: 30px; font-weight: bold; } .close:hover{ cursor: pointer; } /*End the game*/ .game-over{ font-family:Palatino Linotype,sans-serif; z-index: 2; font-size: 50px; color: #000; }

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var keyUp =document.getElementById('keyUp'); var keyLeft =document.getElementById('keyLeft'); var keyRight =document.getElementById('keyRight'); var keyDown =document.getElementById('keyDown'); var modal = document.getElementById('myModal'); var btn = document.getElementById('myBtn'); var span = document.getElementsByClassName("close")[0]; through_walls.checked = "checked"; var snake = [{x:10, y:10}]; var fruit = {}; var score = 0; var dir = "; var accessKeyboard=true; var timer = 300; createFruit(); game(); function game(){ accessKeyboard=true; ctx.clearRect(0, 0, 650, 650); testCollision() // clash with the fruit drawFruit(); drawSnake(); aboutCollision(); // biting drawScore(); setTimeout('game()', timer); } //Restart game function restartGame(){ dir="; snake = [{x:10, y:10}]; createFruit(); score=0; } //If bites itself aboutCollision function(){ if(snake.length>4){ var x=snake[0].x; var y=snake[0].y; for(var i=4; i20) val=0; } else{ if(val<0 || val>20){ openModal(); restartGame(); } } return val; } //Direction of snake movement when you press on the keyboard document.onkeydown = function(event){ if(accessKeyboard){ if(event.keyCode==65 && dir!='right') dir='left'; if(event.keyCode==87 && dir!='down') dir='up'; if(event.keyCode==68 && dir!='left') dir='right'; if(event.keyCode==83 && dir!='up') dir='down'; if(event.keyCode==82) restartGame(); accessKeyboard=false; } } //Drawing of fruit drawFruit function(){ var blockSize = 10; var x = fruit.x*30 +2; var y = fruit.y*30 +2; ctx.fillStyle = '#0dee19'; ctx.fillRect(x, y, 28, 28); } //Create fruit function createFruit(){ var x = Math.floor(Math.random()*21); var y = Math.floor(Math.random()*21); for(var i=0; i
asked by | 55 views

1 Answer

0 like 0 dislike
To write a percentage, or to do media queries. If you want more info, Google "responsive design for beginners." There are all
answered by

Related questions

0 like 0 dislike
2 answers
0 like 0 dislike
3 answers
asked Sep 29, 2018 by Berkutman
0 like 0 dislike
1 answer
asked Sep 29, 2018 by Maxwiwi
24,509 questions
45,932 answers
346 users