慕课网——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>
    最终实现的效果图如下(具体可实现上下左右来回动):




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值