HTML制作游戏机模型（简易）

Yee_mo

已于 2022-01-25 15:58:00 修改

阅读量1.6k

点赞数 6

文章标签： html 前端

于 2022-01-20 03:39:15 首次发布

本文链接：https://blog.youkuaiyun.com/Yee_mo/article/details/122593468

版权

学校移动创新应用协会的一个小任务，用HTML制作虚拟游戏手柄。

瞧着挺新鲜，而且我对前端不是很熟，就试试。

来，先看概念图：

看着挺麻烦的，红蓝红蓝的，确实高端的样子，但是吧，这么做得加多少个功能，左右两边就四个按钮起步，新手毕竟是新手，什么思路也没有，脑袋空空，所以我果断地选择躺着刷手机。

就在我安逸地躺着时，我发现手柄不过就是加几个带功能的button，然后美化一下界面不久成了，加button我会呀，接着就有了我的草图：

看着草图就简单很多，大概分为下面几个步骤：

搭建框架
加入button
加入功能
美化布局

目测两个小时，从爬开始学跑（结果花了半天才做得差不多😭）

上代码

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手柄</title>
<link rel="stylesheet" href="./css/style.css">
</head>

<body>

<div style="width: 80%; font-family:verdana;padding:20px;border-radius:70px;border:10px solid #000000;margin: auto;">

  <div class="scr" id="times" style="width:100%;height:265px;">
  </div>
  <div class="p1"></div>
  <div class="p2"></div>
    <button class="button1"id="but1">UP</button>
    <button class="button2"id="but2">LEFT</button><br>
    <button class="button3"id="but3">RIGHT</button>
    <button class="button4"id="but4">DOWN</button>
    <button class="button5"onclick="getLocation()"></button>
    <button class="button7"id="btn2"> </button>
    <button class="button8"onclick="history.go(0)"></button>
    <button class="button6"id="btn1">HIT</button>
    <div style="width: 95%; font-family:verdana;padding:20px;border-radius:5px;border:5px solid #000000;margin: auto;">
      <div class="logo">Ye~mo<br>GAMES</div>
      <br><br><br><br><br><br>
      <div class="deo"id="demo"><br><br></div>
      <br><br><br><br><br><br>
  <div id="box" class="box" style="left: 200px; top: 200px;">
    <img src="图片\xi.png" height="30" width="30"  ></div>
</body>

<script>
  var xSpeed=2; //x轴的速度
  var ySpeed=2; //y轴的速度
  var timer;
  // up
	var btn = document.getElementById("but1");
	var body = document.body;
	btn.onclick = function () {
      clearInterval(timer);
      timer=setInterval(function(){
      ySpeed=-2;
      xSpeed=0;
      var y=parseInt(box.style.top)+ySpeed;
      box.style.top=y+'px';
      if(y<=36) clearInterval(timer);
      },1000/60)
  };
  // down
	var btn = document.getElementById("but4");
	btn.onclick = function () {
      clearInterval(timer);
      timer=setInterval(function(){
      ySpeed=2;
      xSpeed=0;
      var y=parseInt(box.style.top)+ySpeed;
      box.style.top=y+'px';
      if(y>=273) clearInterval(timer);
      },1000/60)  
  };
  // left
	var btn = document.getElementById("but2");
	btn.onclick = function () {
      clearInterval(timer);
      timer=setInterval(function(){
      xSpeed=-2;
      ySpeed=0;
      var x=parseInt(box.style.left)+xSpeed;
      box.style.left=x+'px';
      if(x<=156) clearInterval(timer);
      },1000/60)  
  };
  //right
	var btn = document.getElementById("but3");
	btn.onclick = function () {
      clearInterval(timer);
      timer=setInterval(function(){
      xSpeed=2;
      ySpeed=0;
      var x=parseInt(box.style.left)+xSpeed;
      box.style.left=x+'px';
      if(x>=1330) clearInterval(timer);
      },1000/60)  
  };  
</script>
<script>
	var btn = document.getElementById("btn2");
	var body = document.body;
	btn.onclick = function () {
		body.style.backgroundColor  = "rgb(255, 223, 233)";
	}
</script>
<script>
	var btn = document.getElementById("btn1");
	var body = document.body;
	let array = ["red", "blue", "yellow", "white", "hsl(170, 91%, 66%)", "green", "orange","#FFF"];
	let index = 0;
	btn.onclick = function () {
		body.style.backgroundColor = array[index];
		index = (index + 1) % array.length;
	}
</script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
  else
  {
    x.innerHTML="该浏览器不支持定位。";
  }
}
function showPosition(position)
{
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
}
function showError(error)
{
  switch(error.code) 
  {
    
    case error.PERMISSION_DENIED:
      x.innerHTML="di~~<br>你拒绝了获取地理位置的请求"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="di~~<br>位置信息不可用"
      break;
    case error.TIMEOUT:
      x.innerHTML="di~~<br>请求地理位置超时"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="di~~<br>未知错误"
      break;
  }
}
</script>
<script>
  var myVar=setInterval(function(){myTimer()},1000);
  function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("times").innerHTML=t;
  }
  </script>
</html>

CSS部分

body{
    background-color: rgb(255, 223, 233);
}
.box{
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: rgb(145, 130, 130);
    position: absolute;
}
.button1{
    
    width: 120px;
    height: 120px;
    border-radius: 40px;
    background-color: #378aff;
    color: white;
    font-weight: 400;
    font-size: 20px;
    font-stretch:ultra-expanded;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease;
    position:absolute;
    left:380px;
    top:360px;
    cursor: pointer;
}
.button2{
    width: 120px;
    height: 120px;
    border-radius: 40px;
    background-color: #07af12;
    color: white;
    font-weight: 400;
    font-size: 20px;
    outline: none;
    font-stretch:ultra-expanded;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease;
    position:absolute;
    left:245px;
    top:460px;
    cursor: pointer;
}
.button3{
    width: 120px;
    height: 120px;
    border-radius: 40px;
    background-color: #e5ff00;
    color: white;
    font-weight: 400;
    font-size: 20px;
    outline: none;
    font-stretch:ultra-expanded;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease;
    position:absolute;
    left:515px;
    top:460px;
    cursor: pointer;
}
.button4{
    width: 120px;
    height: 120px;
    border-radius: 40px;
    background-color: #808080;
    color: white;
    font-weight: 400;
    font-size: 20px;
    outline: none;
    font-stretch:ultra-expanded;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease;
    position:absolute;
    left:380px;
    top:540px;
    cursor: pointer;
}
.button5{
    width: 15px;
    height: 15px;
    border-radius: 40px;
    background-color: #ff0000;
    outline: none;
    transition: all 0.5s ease;
    position:absolute;
    left:50%;
    top:580px;
    cursor: pointer;
}
.button6{
    width: 220px;
    height: 220px;
    border-radius: 40px;
    background-color: #ff9900;
    color: white;
    font-weight: 400;
    font-size: 40px;
    outline: none;
    font-stretch:ultra-expanded;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease;
    position:absolute;
    right:290px;
    top:400px;
    cursor: pointer;
}
.button7{
    width: 15px;
    height: 15px;
    border-radius: 40px;
    background-color: #ffe8fd;
    outline: none;
    transition: all 0.5s ease;
    position:absolute;
    left:50%;
    top:395px;
    cursor: pointer;
}
.button8{
    width: 15px;
    height: 15px;
    border-radius: 40px;
    background-color: #ffffff;
    outline: none;
    transition: all 0.5s ease;
    position:absolute;
    left:50%;
    top:415px;
    cursor: pointer;
}
.deo{
    margin: auto;
    text-align: center;
}
.logo{
    font-style: italic;
    font-size: large;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: auto;
    text-align: center;
}
.scr{
    width:500px;
    height:200px;
    border-radius: 50;
    background: #fff;
    background-image:linear-gradient(45deg,#ffd2d2 26%,transparent 0,transparent 75%,#ffd2d2  0),
    linear-gradient(45deg,#ffd2d2 26%,transparent 0,transparent 75%,#ffd2d2 0);
    background-size:30px 30px;
    background-position:0 0,15px 15px;
    background-attachment: fixed;
}
.p1{
    background: #ffd2d2 ;
    opacity:0.9;
    width:130px;
    height:310px;
    border-radius: 60;
    outline-style: ridge;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position:absolute;
    left:375px;
    top:355px;
}
.p2{
    background: #ffd2d2 ;
    opacity:0.9;
    width:400px;
    height:130px;
    border-radius: 60;
    outline-style: ridge;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position:absolute;
    left:240px;
    top:455px;
}

然后就是效果图：

本来说做几个小按钮就好了，但是后面发现还是挺有意思的，就多加了几个功能。作为连框架都不怎么记得住的新手确实看到啥都觉得很好玩儿。

游戏机外壳就是两个方框，我也不知道其他方法了。找图片当背景也不错，但是我懒，所以只能凭借我的设计天赋让它看起来-更像游戏机、更舒服。
粉白条纹背景当做屏幕，找了蛮久才知道咋弄出条纹的。
屏幕左上角是北京时间，在菜鸟教程上看到了就加进来了。
先说左边四个button的功能，分别控制屏幕里的emoji在粉白色屏幕里上下左右移动。找这个功能找了好久好久，找到后又改了好久好久才看起来稍稍满意些，一半时间都在研究这个东西，不过还是有bug（emoji到边界地时候看似不动了，但要是连续点击按钮，它还是会两个点两个点动😔）。每个按钮都有一个不同的函数（因为要调整方向嘛，所以不同就在于变量x或y的值为+-2这样）。
右边的“HIT”按键，点一下就会更换网页背景颜色，在函数里设置了八种颜色。
中间的粉色按键点击就会恢复网页背景颜色（粉色，因为是为了和我的浏览器颜色比较搭）。
白色按键点击刷新页面。
红色按键点击定位，结果（经纬度）会出现在红色按键上方。

以上就是我用HTML做的游戏机模型，总的来说，用到的知识并不是很深，就是在玩儿。没有系统地学习过前端的这些东西，短时间要出东西只能靠网上搜还有速成视频。学习效果也是非常好的，也让我对前端增加了许多兴趣。要是有机会，试试用前端做几个小游戏玩玩儿（但得把前端学得差不多了再说，不然真像上面这么做起来，不得累死）。