慕课网——JS实现贪吃蛇游戏——01（蛇出洞喽~）

最近在学习PHP基本语法知识，可是也担心自己会把之前学习的忘了，就拿JS来实现以下，也是听课，自己写代码，感觉不算原创，所以，还是翻译吧。今天的部分代码是实现蛇要怎么动起来；代码编辑工具：SublimeText3。

有一个点需要说明一下：在这里的div里，下标为0的是150px，下标为1的是100px；下标为2的是50px；下标为3的是0px…所以，for循环中i是小于下标的长度的。所以在左浮动中，(oDiv.length-1-i)*50+"px",，这样便算出了左浮动的像素。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #container  div{
       	 position: absolute;
       	 left: 0px;
       	 top: 0px;
       	 width:50px;
       	 height: 50px;
       	 background: blue;
       	 opacity: 0.5px;
       	 text-align: center;
       	 line-height: 50px;
       	 font-size: 24px;
       	 color: #fff;
       }
	</style>
</head>
<body>
    <div id="container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
    </div>

    <script type="text/javascript">
     var container = document.getElementById("container"),
         oDiv = container.getElementsByTagName("div"),
         width = oDiv[0].offsetWidth;
      /*for(var i = 0;i<oDiv.length;i++){
          //console.log(i);
          oDiv[i].style.left = (oDiv.length-1-i)*50+"px";

      }*/

      for(var i = oDiv.length-1;i>=0;i--){
         //console.log(i);
        oDiv[i].style.left = (oDiv.length-1-i)*50+"px";
      }
      document.onkeydown = function(e){
      	for(var i=oDiv.length-1;i>0;i--){
      		//console.log(i);
      		oDiv[i].style.left = oDiv[i-1].offsetLeft+"px";
      		oDiv[i].style.top = oDiv[i-1].offsetTop+"px";
      	}

      	var e = window.event || e;
         switch(e.keyCode){
         	case 37:  //左
         	oDiv[0].style.left = oDiv[0].offsetLeft-width+"px";
         	break;
         	case 38:   //上
         	oDiv[0].style.top = oDiv[0].offsetTop-width+"px";
         	break;
         	case 39:   //右
         	    oDiv[0].style.left = oDiv[0].offsetLeft+width+"px";
         	break;
         	case 40:   //下
         	    oDiv[0].style.top = oDiv[0].offsetTop+width+"px";
         	break;
         }

      }
    </script>

	
</body>
</html>

最终实现的效果图如下（具体可实现上下左右来回动）：

慕课网——JS实现贪吃蛇游戏——01（蛇出洞喽~）

猜你喜欢