粗糙的贪吃蛇JS脚本（原创）

最新推荐文章于 2024-04-07 14:01:44 发布
最新推荐文章于 2024-04-07 14:01:44 发布
阅读量597 收藏
点赞数
文章标签： 脚本 function timer 游戏 div xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linbiao523/article/details/4453921
版权

完全面向过程的脚本代码（原创） 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
贪吃蛇
</title>
    <style type="text/css">
    .ConnerDiv
    {
     width:600px;
     height:500px;
     background-color:LightBlue;
     border:inset 1px Blue;
     vertical-align:middle;
    }
    .FoodDiv
    {
     width:20px;
     height:20px;
     position:absolute;
     background-color:Black;
     }
    </style>
</head>
<body οnkeydοwn="keyDown(event)" style="margin-left:100px; margin-top:40px;">
    <form name="form1" method="post" action="MoveSnake.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRScAPV38TjLN/BaakeS8v9X2hlVg==" />
</div>
    <div  style=" width:100%" align="center">
    <div id="ConnverDiv" class="ConnerDiv" >
       <div id="FoodDiv" class="FoodDiv">      
       </div>
    </div>
    <input type="button" id="btnStart" value="开始" οnclick="SpaceOrBtn();" />
  
    </div>
    </form>
</body>
<script language="javascript">
var btnStart=document.getElementById("btnStart");//开始按纽
var SnakeBody=new Array();//用于保存蛇的每一节
var ConnverDiv=document.getElementById("ConnverDiv");
var FoodDiv=document.getElementById("FoodDiv");
var lastBody;//最后一个
var fristBody;//第一个
var secondBody;//第二个
var direction="right";//移动方向
var Speed=200;//速度
var IsStart=false;//游戏是否开始
var IsStop=true;//是否暂停
var LastMovePosition="";//上次移动方向
var EatCount=0;//吃到食物个数
var timer;//定时器
//开始游戏
function Satrtgame(Speed)
{
    SetFoodPosition();
    IsStart=true;
    IsStop=false;
    ConnverDiv.appendChild(CreateBody());
    ConnverDiv.appendChild(CreateBody());
    ConnverDiv.appendChild(CreateBody());
    ConnverDiv.appendChild(CreateBody());
    ConnverDiv.appendChild(CreateBody());
    lastBody=SnakeBody[SnakeBody.length-1];
    lastBody.style.backgroundColor="Red";
    StartMove();  
}
//设置食物位置
function SetFoodPosition()
{
  var X=parseInt(Math.random()*30)*20;
  var Y=parseInt(Math.random()*25)*20;
  FoodDiv.style.left=(245+X)+"px";
  FoodDiv.style.top=(40+Y)+"px";  
}

//启动蛇
function StartMove()
{
   timer=setTimeout("StartMove()",200);
    var last=SnakeBody[SnakeBody.length-1];
    //把最后一个元素移到第一个
    for(var i=SnakeBody.length-1;i>0;i--)
    {
    SnakeBody=SnakeBody;
    SnakeBody.style.backgroundColor="#400040";
    SnakeBody.style.border="white solid 1px";
    }
    SnakeBody[0]=last;
    
    fristBody= SnakeBody[0];
    secondBody=SnakeBody[1];
    
    //记录第二节位置
    var _left=secondBody.style.left.replace("px","")-0;
    var _top=secondBody.style.top.replace("px","")-0;
    
    switch(direction)
    {
        case "right":
            //判断是否出界、或碰上自己
            if(_left+20+20>860||IsMeetSelfBody(_left,_top))
            {
                 secondBody.style.backgroundColor="Red";
                 clearTimeout(timer);
                 IsStart=false;
                 alert("结束");
            }
            else
            {
                LastMovePosition="right";//记录当前生效的移动方向
                fristBody.style.left=_left+20+"px";
                fristBody.style.top=_top+"px";
                fristBody.style.backgroundColor="Red";
            }
        break;
        case "left":
            //判断是否出界、或碰上自己
            if(_left-20-20<220||IsMeetSelfBody(_left,_top))
            {
                 secondBody.style.backgroundColor="Red";
                 clearTimeout(timer);
                  IsStart=false;
                 alert("结束");
            }
            else
            {
                LastMovePosition="left";//记录当前生效的移动方向
                fristBody.style.left=_left-20+"px";
                fristBody.style.top=_top+"px";
                fristBody.style.backgroundColor="Red";
            }
        break;
        case "up":
            //判断是否出界、或碰上自己
            if(_top-20-20<20||IsMeetSelfBody(_left,_top))
            {
                
                 secondBody.style.backgroundColor="Red";
                 clearTimeout(timer);
                  IsStart=false;
                 alert("结束");
            }
            else
            {
                 LastMovePosition="up";//记录当前生效的移动方向
                fristBody.style.left=_left+"px";
                fristBody.style.top=_top-20+"px";
                fristBody.style.backgroundColor="Red";
            }
        break;
         case "down":
            //判断是否出界、或碰上自己
            if(_top+20+20>540||IsMeetSelfBody(_left,_top))
            {
                 secondBody.style.backgroundColor="Red";
                 clearTimeout(timer);
                 IsStart=false;
                 alert("结束");
            }
            else
            {
                LastMovePosition="down";//记录当前生效的移动方向
                fristBody.style.left=_left+"px";
                fristBody.style.top=_top+20+"px";
                fristBody.style.backgroundColor="Red";
            }
        break;
    }  
    
   IsMeetFoodDiv();
   // IsTouchConnerDiv();
}

//是否吃到实物
function IsMeetFoodDiv()
{
  //蛇头位置
  var Snakeleft=fristBody.style.left.replace("px","")-0;
  var Snaketop=fristBody.style.top.replace("px","")-0;
  
  //食物位置
  var Foodleft= FoodDiv.style.left.replace("px","")-0;
  var Foodtop=FoodDiv.style.top.replace("px","")-0;
  
   if(Snakeleft==Foodleft&&Snaketop==Foodtop)
    {
        EatCount++;  //计数        
        SetFoodPosition();//重新设定实物位置
        ConnverDiv.appendChild(CreateBody());//蛇身加长
        if(EatCount==2)
        {
         window.status="Speed="+Speed;
         Speed=Speed-50;
         clearTimeout(timer);
         StartMove(Speed);
         EatCount=0;
        }
    }
}
//是否碰上自己的身体(返回：碰上ture、否则false)
function IsMeetSelfBody(_left,_top)
{
     switch(direction)
     {
         case "right":
            _left=_left+20;
         break;
         case "left":
            _left=_left-20;
         break;
         case "up":
            _top=_top-20;
         break;
          case "down":
            _top=_top+20;
         break;
        
     }
      //蛇头位置
      var Snakeleft=_left;
      var Snaketop=_top;
      //当前判断的身体位置
      var Foodleft;
      var Foodtop;
     for(var i=3;i<SnakeBody.length;i++)//只需从第四个开始判断
     {
         Foodleft= SnakeBody.style.left.replace("px","")-0;
         Foodtop=SnakeBody.style.top.replace("px","")-0;
          if(Snakeleft==Foodleft&&Snaketop==Foodtop)
          {
              return true;
          }
     }
     return false;
}

//创建蛇身节点
function CreateBody()
{
var Body=document.createElement("div");
Body.style.position="absolute";
Body.style.top="240px";
Body.style.left="245px";
Body.style.width="20px";
Body.style.height="20px";
Body.style.backgroundColor="#400040";
if(lastBody!=null)
{
   Body.style.top=lastBody.style.top;
   Body.style.left=lastBody.style.left;
}
SnakeBody[SnakeBody.length]=Body;
return Body
}

//获取方向，空格键
function keyDown(e)
{
   if(e.keyCode==37)  //向左
    {
        if(LastMovePosition!=="right") //不能相反于上次实际移动的方向
        direction="left";
    }
    else if(e.keyCode==38)  //向上
    {
        if(LastMovePosition!=="down") //不能相反于上次实际移动的方向
        direction="up";
    }
    else if(e.keyCode==39) //向右
    {
        if(LastMovePosition!=="left") //不能相反于上次实际移动的方向
        direction="right";
    }
    else if(e.keyCode==40)  //向下
    {
        if(LastMovePosition!=="up") //不能相反于上次实际移动的方向
        direction="down";
    }
    else if(e.keyCode==32)
    {  
        
        SpaceOrBtn();
      
    }
}
//响应按纽事件或键盘空格事件
function SpaceOrBtn()
{
        if(IsStart)//游戏已经开始，空格暂停/继续
        {
             if(!IsStop)//暂停
             {
                 btnStart.value="继续";                
                 IsStop=true;
                 clearTimeout(timer);//清除定时器
             }
             else//继续
             {
              btnStart.value="暂停";      
              IsStop=false;
              StartMove();
             }
        }
        else//开始/重新开始
        {
            if(SnakeBody.length>0)//重新开始游戏
            {
                for(var i=0;i<SnakeBody.length;i++)
                 {
                    ConnverDiv.removeChild(SnakeBody);
                 }
                  SnakeBody.splice(0,SnakeBody.length);
                  lastBody=null;
                  direction="right";
                  Satrtgame();
                  
            }
            else//开始游戏
            {
                Satrtgame();
            }
            btnStart.value="暂停";
        }
}
</script>
</html>

linbiao523
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java如何防止JS脚本注入代码实例
10-14
下面详细阐述了如何使用Java来防止JS脚本注入，并提供了一个示例工具类XssUtil，以及如何检测并阻止emoji表情的输入。 1. Java中防止JS脚本注入的工具类XssUtil XssUtil是一个工具类，它的主要作用是通过定义一系列...
简单脚本分享--贪吃蛇
Cai_hh的博客
06-28 411
使用pygame实现的贪吃蛇,有BUG或意见欢迎留言。
【源码直送】Python会自己动的贪吃蛇脚本❤
xff123456_的博客
03-25 659
好东西大家一起分享❤
实验二 代码 + 贪吃蛇大作战（360°寻路+AI自动蛇）
qq_55969651的博客
01-09 2507
1.实现基本的贪吃蛇的运动操作2.实现AI蛇的自动运动3.实现360°全方位运动4.实现积分，死亡，加速等操作3.1 初始化蛇体操作初始化操作主要分为游戏全局初始化和蛇体初始化。本游戏设置1条玩家操作蛇和6条AI自动蛇。首先我们定义Snake类，其中包括游戏开发时需要的所有组件，蛇头、身体、方向、猎捕点集、是否存活等。代码如下：正在上传…重新上传取消接下来我们定义全局的饼位置初始化，以及蛇的长度，颜色初始化。这里主要是针对AI蛇的初始化，代码如下：正在上传…重新上传取消蛇体组件初始化，这里主要是将蛇头的坐标
python贪吃蛇游戏代码详解,python贪吃蛇最简单代码
Bxwfjdjdbdgj的博客
12-21 1025
是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，Python语言具有非常简洁且清晰的语法特点，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。Random是产生随机数的库，即随机数发生器，random产生的是伪随机数或者说是用一种复杂的方法计算得到的序列值，因此每次运算时需要一个不同的种子值。种子值不同，得到的序列值也不同。可穿墙模式的主循环函数，通过该函数进行可穿墙模式下贪吃蛇和食物的初始化、玩家控制贪吃蛇运动、蛇头和蛇身的判断更新和得分统计实现。
用javascript制作网页贪吃蛇游戏
2301_78098294的博客
06-02 587
【代码】用javascript制作网页贪吃蛇游戏。
c++ 运行js脚本
07-13
在IT领域，C++是一种强大的、高效的编程语言，而JavaScript则是一种广泛用于Web开发的脚本语言。有时候，我们可能需要在C++程序中运行JavaScript代码，以实现某些功能或者利用JavaScript的灵活性。这种需求主要出现...
JavaScript脚本库编写的方法
10-23
JavaScript是一种广泛应用于网页开发中的客户端脚本语言。它的代码可以直接嵌入在HTML页面中，由浏览器解析执行。JavaScript脚本主要负责实现页面的动态交互效果，与用户进行交云，并与Web服务器端进行数据交换。 ...
WebBrowser执行JS脚本示例
08-24
涵盖了几种常用的 webBrowser执行javascript的方法， execScript方式: NavigateScript方式: 其中需要作如下设置 由于visual studio2005 中WebBrowser控件已经实现了IDocHostUIHandler,所以 只要把应用程序属性类的...
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1440
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
AD工程 贪吃蛇脚本.rar
06-27
拉线工作做久了可以玩玩，感谢Tonge的分享，下载后打开说明按照上面写的步骤来。
【plang 1.4.4】编写贪吃蛇脚本
qq_39729362的博客
01-08 1299
最近打算用plang编程语言编写一些小游戏demo，顺便测测语言工具的健壮性。贪吃蛇是我小时候喜欢玩的，就决定是它了。 先设计Snake类： package snake; import gui::GUI; import std::collection::ArrayList; public class Snake : GameObject { public Snake() { super(); i->int = 0; while(i < s.length) {
Processing 自动贪吃蛇脚本
dhj_tsukuba的博客
06-12 2111
スマートインフォメディアシステム特論 期末课题 用Processing写贪吃蛇脚本，有手动和自动两种模式，程序开始直接手动控制，GG一次后可以选择RESTART重新开始，或者AI MODE进入自动模式。其中AI MODE模式有两种报酬计算方法，或者两种距离算法，distance_type=1 表示曼哈顿距离， distance_type=2 表示欧拉距离。具体代码直接贴出来，放到Processing 2.XX 里应该是可以直接运行的。 int game_pause = -1; int snake_le
Python实现贪吃蛇【内附源码】
m0_55927959的博客
04-07 1152
Python实现贪吃蛇【内附源码】
linux 贪吃蛇终极脚本,用shell编写的贪吃蛇游戏（升级版）
weixin_32666923的博客
05-01 1948
#!/bin/bashfunction DetectInput //判断输入的数据，控制方向{while ` 1 `doc=""read -n 1 c //读取输入的字母echo -ne "\r \r" //清除输入的字母if [[ $c == "a" || $c == "j" || $c == "A" || $c == "J" ]]thenkill -36 $pidShowSnake ...
Python贪吃蛇 (完整代码+详细注释+粘贴即食）
热门推荐
weixin_45662804的博客
01-24 10万+
代码 #!/usr/bin/env python # -*- coding: utf-8 -*- # author：Wangdali time:2021年1月24日16:08:44 #python实现：贪吃蛇 ''' 游戏玩法：回车开始游戏；空格暂停游戏/继续游戏；方向键/wsad控制小蛇走向 ''' ''' 思路：用列表存储蛇的身体；用浅色表示身体，深色背景将身体凸显出来； 蛇的移动：仔细观察，是：身体除头和尾不动、尾部消失，头部增加，所以，新添加的元素放在列表头部、删除尾部元素； 游戏结束判定策略：超出
贪吃蛇python实现
zhuiyunzhugang的博客
09-19 608
#!/usr/bin/env python import pygame,sys,time,random from pygame.locals import * # 定义颜色变量 redColour = pygame.Color(255,0,0) blackColour = pygame.Color(0,0,0) whiteColour = pygame.Color(255,255,255) greyColour = pygame.Color(150,150,150) # 定义gameOver函数 def.
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3180
JS 超详细 贪吃蛇 案例 速速围观
【Python】 Python小游戏-贪吃蛇大冒险
Up_Long的博客
04-17 9万+
一、前言 距上次更新博客，又过去很长时间了，感觉再不更新一下，自己写博客的习惯就要废了，哈哈。从去年九月份开学之后，疫情学期期末考试开学考、实验室项目软著申请和新项目设计、课程集训等事情较多，没有很多时间；然后这个学期我到大三下学期，实验室工作交接完就准备考研，之后也没有很多时间来写博客，所以赶紧来更新一下，和大家分享一些知识和心得，希望喜欢的小伙伴可以点赞、收藏和关注，哈哈。 二、贪吃蛇大冒险小游戏 一、游戏简介 1.1游戏操作及游戏规则 （1）游戏开始后，通过键盘上下左右键控制贪吃蛇移动寻找食物； （2
贪吃蛇shell脚本
最新发布
06-24
贪吃蛇（Snake）是一款经典的单人益智游戏，它的基础是控制一条蛇吃食物并避免撞到自己。在编写贪吃蛇的Shell脚本时，我们通常会使用文本终端和基本的命令操作来模拟游戏界面。以下是一个简化的贪吃蛇Shell脚本的基本概念： 1. **环境设置**：游戏在一个命令行环境中进行，玩家通过方向键移动蛇。 2. **游戏状态**：用变量存储蛇的位置、长度、食物位置等信息。 3. **用户输入处理**：接收并解析用户的键盘输入，如上、下、左、右键。 4. **更新规则**：根据用户输入改变蛇的位置，并检查是否吃到食物（增加长度）或撞墙（游戏结束）。 5. **绘制界面**：用简单的字符（如'@'代表蛇头，'O'代表食物）在屏幕上显示当前的游戏状态。 6. **循环执行**：游戏主循环不断接收输入、更新状态并重绘屏幕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值