Javascript 响应性设计的问题_Javascript_Html_Css_Responsive Design

Javascript 响应性设计的问题

javascript html css responsive-design

Javascript 响应性设计的问题,javascript,html,css,responsive-design,Javascript,Html,Css,Responsive Design,我最近开始学习响应式网页设计，这是我课程的一部分。作为一个项目，我创建了一个蛇游戏为了使页面具有响应性，我使用了媒体查询。当我调整浏览器页面本身的大小时，这确实起作用。但是，在inspect函数中，页面是不同的。为了解决这个问题，我应该怎么做？请随意编辑代码。我对编码还是相当陌生的非常感谢射线 const grid=document.querySelector（“.grid”）； const startButton=document.getElementById（“开始”）； const

我最近开始学习响应式网页设计，这是我课程的一部分。作为一个项目，我创建了一个蛇游戏

为了使页面具有响应性，我使用了媒体查询。当我调整浏览器页面本身的大小时，这确实起作用。但是，在inspect函数中，页面是不同的。为了解决这个问题，我应该怎么做？请随意编辑代码。我对编码还是相当陌生的

非常感谢

射线

const grid=document.querySelector（“.grid”）；
const startButton=document.getElementById（“开始”）；
const scoreDisplay=document.getElementById（“分数”）；
设平方=[]；
设currentSnake=[2,1,0]；
设方向=1；
常数宽度=10；
设appleIndex=0；
分数=0；
让间隔时间=1000；
让速度=0.9；
设timerId=0；
函数createGrid（）{
//使用for循环创建100个这些元素
for（设i=0；isquares[index].classList.add（“snake”）；
函数startName（）{
//把蛇移走
currentSnake.forEach（index=>squares[index].classList.remove（“snake”）；
//把苹果摘下来
正方形[appleIndex].classList.remove（“苹果”）；
清除间隔（timerId）；
currentSnake=[2,1,0]；
得分=0；
//将新分数重新添加到浏览器
scoreDisplay.textContent=分数；
方向=1；
间隔时间=1000；
generateApple（）；
//把蛇的种类读给我们的新蛇
currentSnake.forEach（index=>squares[index].classList.add（“snake”）；
timerId=设置间隔（移动，间隔时间）；
}
函数move（）{
如果(
（currentSnake[0]+width>=width*width&&direction==width）| |//如果snake已经触底
（currentSnake[0]%width===width-1&&direction==1）| |//如果snake击中了右墙
（currentSnake[0]%宽度===0&&direction==-1）| |//如果snake撞到了左墙
（currentSnake[0]-宽度<0&&direction==-宽度）| |//如果snake已经到达顶部
正方形[currentSnake[0]+方向].classList.contains（“snake”）
)
返回清除间隔（timerId）；
//从currentSnake数组中删除最后一个元素
const tail=currentSnake.pop（）；
//从最后一个元素中删除样式
正方形[tail].classList.remove（“snake”）；
//在我们前进的方向上加上正方形
currentSnake.unshift（currentSnake[0]+方向）；
//添加样式以便我们可以看到它
//对付蛇头得到苹果
if（方块[currentSnake[0]].classList.contains（“苹果”））{
//删除苹果的类别
正方形[currentSnake[0]]。类列表。删除（“苹果”）；
//通过添加蛇类来生长我们的蛇
正方形[tail].classList.add（“snake”）；
控制台日志（尾部）；
//种植我们的蛇阵
推（尾）；
console.log（currentSnake）；
//创造新苹果
generateApple（）；
//加一分
分数++；
//显示我们的分数
scoreDisplay.textContent=分数；
//加速我们的蛇
清除间隔（timerId）；
控制台日志（间隔时间）；
间隔时间=间隔时间*速度；
控制台日志（间隔时间）；
timerId=设置间隔（移动，间隔时间）；
}
正方形[currentSnake[0]].classList.add（“snake”）；
}
函数generateApple（）{
做{
appleIndex=Math.floor（Math.random（）*squares.length）；
}while（squares[appleIndex].classList.contains（“snake”）；
正方形[appleIndex].classList.add（“苹果”）；
}
generateApple（）；
//39是右箭头
//38代表向上箭头
//37代表左箭头
//40代表向下箭头
功能控制（e）{
如果（例如keyCode===39）{
console.log（“右按”）；
方向=1；
}否则如果（e.keyCode===38）{
控制台日志（“向上按下”）；
方向=-宽度；
}否则，如果（e.keyCode===37）{
控制台日志（“左压”）；
方向=-1；
}否则如果（e.keyCode===40）{
控制台日志（“按下”）；
方向=+宽度；
}
}
文件。添加的监听器（“键控”，控制）；
addEventListener（“单击”，startName）；

“但是，在inspect功能中，页面是不同的。”在inspect工具中，“Is not same”是什么意思？当媒体查询开始时，页面将不合适。当我在浏览器中重新调整页面大小时，它会正常工作，这取决于它停靠的位置/方式，“web developer”工具面板可能会导致浏览器的大小发生变化，从而影响媒体查询。如果您使用的是Chrome，请尝试面板。

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
  
<div class='mobile'>
  <h1 id="title">Snake </h1>
  <div class="info">
    <button id="start">Lets go!</button>
    <h2>Score <span id="score"></span></h2>
  </div>
  <div class="grid"></div>
  <div class="nokia"></div>
  
</div>
<div class="controls">
  <h3>Controls</h3>
    <ul><span class="direction">Up</span> - Up arrow key</ul>
    <ul><span class="direction">Right</span> - Right arrow key</ul>
    <ul><span class="direction">Down</span> - Down arrow key</ul>
    <ul><span class="direction">Left</span> - Left arrow key</ul>
  
</div>
<script src="main.js"></script>
</body>

.mobile {
  display: flex;
  justify-content: center;
  background-color: #12c258;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 60%;

}





#title {
  
  color: #fff;
  
}


.nokia {
  position: absolute;
  top: 190px;
  display: block;
  width: 700px;
  height: 983px;
  background-image: url("https://i.imgur.com/3SeVxgS.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.controls {
  
  text-align: center;
    justify-content: space-between;
    padding: 2px;
    height: 125px;
    display: block;
    font-size: 70%;
    background-color: #12c258;
    color: #fff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.direction {
font-weight: bold;
}

@media only screen and (min-width: 768px) {

  
  .controls {
  justify-content: center;
  display: flex;
  background-color: #12c258;
  height: 70px;
  font-size: 100%;


  .mobile {
    font-size: 100%;
  }
  


}

.grid {
  position: absolute;
  top: 420px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: #12c258;
}

.info {
  position: absolute;
  z-index: 9999;
  top: 663px;
  text-align: center;
}


h2 {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 15px;
  position: absolute;
  top: 90px;
  left: -60px;

}

button {
   position: absolute;
  /* top: 663px; */
  left: -92px;
  height: 64px;
  width: 172px;
  border-style: solid;
  border-bottom: 50px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  font-size: 20px;
  outline: none;
}

button:active {
transform: translateY(2px);

}



.square {
  width: 20px;
  height: 20px;
}

.snake {
  background-color: #fff;
  border-radius: 50%;
  
}

.apple {
  background-color; red;
  border-radius: 20%;
  height: 20px;
  width: 20px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.7);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  50% {
    transform: scale(1.2);
/*     box-shadow: 0 0 0 10px #12c258; */
  }

  100% {
    transform: scale(0.7);
/*     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); */
  }
}

const grid = document.querySelector(".grid");
const startButton = document.getElementById("start");
const scoreDisplay = document.getElementById("score");
let squares = [];
let currentSnake = [2, 1, 0];
let direction = 1;
const width = 10;
let appleIndex = 0;
let score = 0;
let intervalTime = 1000;
let speed = 0.9;
let timerId = 0;

function createGrid() {
  //create 100 of these elements with a for loop
  for (let i = 0; i < width * width; i++) {
    //create element
    const square = document.createElement("div");
    //add styling to the element
    square.classList.add("square");
    //put the element into our grid
    grid.appendChild(square);
    //push it into a new squares array
    squares.push(square);
  }
}
createGrid();

currentSnake.forEach(index => squares[index].classList.add("snake"));

function startGame() {
  //remove the snake
  currentSnake.forEach(index => squares[index].classList.remove("snake"));
  //remove the apple
  squares[appleIndex].classList.remove("apple");
  clearInterval(timerId);
  currentSnake = [2, 1, 0];
  score = 0;
  //re add new score to browser
  scoreDisplay.textContent = score;
  direction = 1;
  intervalTime = 1000;
  generateApple();
  //readd the class of snake to our new currentSnake
  currentSnake.forEach(index => squares[index].classList.add("snake"));
  timerId = setInterval(move, intervalTime);
}

function move() {
  if (
    (currentSnake[0] + width >= width * width && direction === width) || //if snake has hit bottom
    (currentSnake[0] % width === width - 1 && direction === 1) || //if snake has hit right wall
    (currentSnake[0] % width === 0 && direction === -1) || //if snake has hit left wall
    (currentSnake[0] - width < 0 && direction === -width) || //if snake has hit top
    squares[currentSnake[0] + direction].classList.contains("snake")
  )
    return clearInterval(timerId);

  //remove last element from our currentSnake array
  const tail = currentSnake.pop();
  //remove styling from last element
  squares[tail].classList.remove("snake");
  //add square in direction we are heading
  currentSnake.unshift(currentSnake[0] + direction);
  //add styling so we can see it

  //deal with snake head gets apple
  if (squares[currentSnake[0]].classList.contains("apple")) {
    //remove the class of apple
    squares[currentSnake[0]].classList.remove("apple");
    //grow our snake by adding class of snake to it
    squares[tail].classList.add("snake");
    console.log(tail);
    //grow our snake array
    currentSnake.push(tail);
    console.log(currentSnake);
    //generate new apple
    generateApple();
    //add one to the score
    score++;
    //display our score
    scoreDisplay.textContent = score;
    //speed up our snake
    clearInterval(timerId);
    console.log(intervalTime);
    intervalTime = intervalTime * speed;
    console.log(intervalTime);
    timerId = setInterval(move, intervalTime);
  }

  squares[currentSnake[0]].classList.add("snake");
}

function generateApple() {
  do {
    appleIndex = Math.floor(Math.random() * squares.length);
  } while (squares[appleIndex].classList.contains("snake"));
  squares[appleIndex].classList.add("apple");
}
generateApple();

// 39 is right arrow
// 38 is for the up arrow
// 37 is for the left arrow
// 40 is for the down arrow

function control(e) {
  if (e.keyCode === 39) {
    console.log("right pressed");
    direction = 1;
  } else if (e.keyCode === 38) {
    console.log("up pressed");
    direction = -width;
  } else if (e.keyCode === 37) {
    console.log("left pressed");
    direction = -1;
  } else if (e.keyCode === 40) {
    console.log("down pressed");
    direction = +width;
  }
}
document.addEventListener("keyup", control);
startButton.addEventListener("click", startGame);