【无标题】

最新推荐文章于 2024-07-09 19:50:17 发布
最新推荐文章于 2024-07-09 19:50:17 发布
阅读量375 收藏
点赞数
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53587164/article/details/124648173
版权

<div id="content">

<div id="snake">

<div class="box head"></div>

<div class="box"></div>

</div>

</div>

其中，content为整个布局的大盒子，snake就是蛇，里面的box就是他的身体，为了区分头部我们给第一个box加了个head名字用于区分，下面我们再把css加上。

<style>

.box{

width: 60px;

height: 60px;

background-color: red;

position:absolute;

left: 0;

top: 0;

line-height: 60px;

}

.head{

background-color: yellowgreen;

}

</style>

我们给蛇的每一节的宽高设置为60像素，并给了一个定位，因为如果不加定位的话无法让他脱离文档流（在页面中飘起来），而且后续也无法通过left和top来判断他的坐标。

 

好的这样我们就得到了一条可爱的小蛇（然而并没有看出来哪里可爱 - -）。

什么？你问我他的头哪去了，很简单，在给元素加了定位以后，后面的元素会覆盖掉前面的元素，所以只是头部和身体重叠了你看不到而已。

随后咱们得让这条蛇动起来是吧，那么我们怎么让他动起来呢？

原理很简单，我们可以设置一个定时器，每过一个时间就让他动一下。而怎么让他动呢，只需要设置一个数值，让这个值每动一下就+=60，然后通过判断是上下动还是左右动，来给元素的left与top赋值。

我们把逻辑写成代码，就出来了如下的代码：

<script>

var boxs = document.querySelectorAll(".box");

var snake_x = 0;

var snake_y = 0;

var turn = "right";

setInterval(function(){

snakeMove();

},100)

function snakeMove(){

switch( turn ){

case "right": snake_x += 60;break;

case "left" : snake_x -= 60;break;

case "top" : snake_y -= 60;break;

case "bottom": snake_y += 60;break;

}

for(var i = boxs.length - 1; i > 0 ; i --){

boxs[i].style.left = boxs[i - 1].style.left;

boxs[i].style.top = boxs[i - 1].style.top;

}

boxs[i].style.left = snake_x + "px";

boxs[i].style.top = snake_y + "px";

}

document.onkeydown = function(evt){

var e = evt || event;

var keyCode = e.keyCode || e.which;

switch( keyCode ){

case 37 : turn = "left";break;

case 38 : turn = "top";break;

case 39 : turn = "right";break;

case 40 : turn = "bottom";break;

}

}

</script>

上述代码中，我们给小蛇的初始位置的x和y的坐标都设置为0，并且默认初始向右走，通过键盘上方向键的输入，来改变他的方向。

其中，难点在于

for(var i = boxs.length - 1; i > 0 ; i --){

boxs[i].style.left = boxs[i - 1].style.left;

boxs[i].style.top = boxs[i - 1].style.top;

}

boxs[i].style.left = snake_x + "px";

boxs[i].style.top = snake_y + "px";

这一块代码，这块代码的目的是让后面的元素跟着前面的走，也就是让蛇的每一块身体都跟着上一块去运动，然后最后再给头部设置为snake_x和snake_y当前的值即可，这样就形成了第一块(头部)坐标为snake_x,snake_y实时变化的值，第二块为第一块之前的值，第三块为第二块之前的值。

以此类推就得到了一个身体跟着头部走的效果：

 

但是当你把代码输进去以后一运行会发现，这条小蛇过于顽皮，以至于走到边界以后还会无限的向前走，那这不行啊，总不能让蛇跑了不是，所以得给小蛇加上一个边界：

var snake_x_max = document.documentElement.clientWidth ;

var snake_y_max = document.documentElement.clientHeight;

if(snake_x > snake_x_max){

snake_x = 0;

}

if(snake_x < 0){

snake_x = snake_x_max;

}

if(snake_y > snake_y_max){

snake_y = 0;

}

if(snake_y < 0){

snake_y = snake_y_max;

}

这里我们设置x和y的最大值为当前窗口的宽高，然后通过if语句进行判断，如果当前坐标大于了最大值，就讲当前坐标归0，如果小于0的话(也就是跑到了左边的边界)，就将当前坐标设置为最大值，这样就可以得到一个边界啦。

 

你以为这样就完事啦？nonono,没有食物吃的蛇怎么能叫做贪吃蛇呢，那是没有灵魂哒。

下面我们开始制作食物。

<div id="food">

</div>

然后给他加个css

#food{

width: 60px;

height: 60px;

position: absolute;

background: greenyellow;

}

然后再绑定一下元素并将他的left和top值设为范围内随机数，这样可以做到随机位置生成：

var fd=document.getElementById("food");

fd.style.left=Math.random()*snake_x_max+"px";

fd.style.top=Math.random()*snake_y_max+"px";

这样我们就得到了一个随机生成的食物：

 

不过我们的小蛇好像对食物并没有什么兴趣呢，路过以后并不会吃掉，所以我们得给他加一个碰撞检测吧。

碰撞检测的逻辑很简单，只需要让食物的left值与头部的left值相减的绝对值<=食物的大小，并且食物的top值与头部的top值相减的绝对值<=食物的大小，设置小于等于是因为如果直接用相等来判断的话，必须两个元素完全重合才行，我们需要的是碰到边缘就算迟到，所以用两个数值相减小于等于来做。

然后判断当头部与食物发生碰撞时，将蛇的身体部分克隆一块出来放到蛇的身体里面，并让食物的位置重新刷新。适用克隆为偷懒方法，此偷懒方法仅适用于当小蛇开局自带一个身体的时候，如果小蛇开局不自带身体的话，我们无法克隆已有身体，只能通过createElement去新创建一个身体块出来并添加className后再添加到父元素中去才行。

下面我们把逻辑转换为代码：

var dl=snake_x;

var dt=snake_y;

var fl=fd.style.left;

var ft=fd.style.top;

var dv=document.querySelectorAll("#snake div");

var sk=document.getElementById("snake");

var a2=Number(fl.substring(0,fl.indexOf("px")));

var b2=Number(ft.substring(0,ft.indexOf("px")));

if(Math.abs(dl-a2)<=60&&Math.abs(dt-b2)<=60){

fd.style.left=Math.random()*1000+"px";

fd.style.top=Math.random()*800+"px";

sk.appendChild(dv[1].cloneNode());

boxs = document.querySelectorAll(".box");

}

其中那一大长串的substring的方法是因为获取到的left与top的值的格式是例如”200px”这样的数组，无法进行数学运算，所以要把px给截掉，并将剩下的字符串”200”转换成number类型才可以进行数学运算。

 

第2种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>贪恰蛇</title>

    <style>

        #scence{

            width: 800px;

            height: 600px;

            border: 1px solid #000;

            margin: 50px auto;

            background-color: aliceblue;

            position: relative;

            overflow: hidden;

        }

       .head{

           position: absolute;

           width: 20px;

           height: 20px;

           background-color: #000;

       }

       .tail{

        position: absolute;

           width: 20px;

           height: 20px;

           background-color: grey;      

       }

    </style>

</head>

<body>

    <div id="scence">

 

    </div>

</body>

</html>

<script src="tools.js"></script>

<script src="../贪吃蛇/snake.js"></script>

<script src="food.js"></script>

<script src="game.js"></script>

js部分

tools.js

1

2

3

4

5

6

7

8

function getStyle(ele, styleObj) {

    for (const key in styleObj) {

        ele.style[key] = styleObj[key];

    }  

}

function getRandom(a, b) {

    return Math.floor(Math.random() * (b - a) + a +1)

}

snake.js

function Snake() {

    this.scence = document.querySelector('#scence');

    this.body = [

        [0, 0, 'grey', null],

        [0, 1, 'grey', null],

        [0, 2, '#000', null]

    ];

    this.dir = 'right';

    this.lastdir = 'right';

    this.width = 20;

    this.height = 20;

    this.scence_w = scence.offsetWidth;

    this.scence_h = scence.offsetHeight;

}

Snake.prototype.found = function () {

    for (let i = 0; i < this.body.length; i++) {

        if (this.body[i][3] == null) {

            this.body[i][3] = document.createElement('div');

        }

        getStyle(this.body[i][3], {

            width: this.width + 'px',

            height: this.height + 'px',

            position: 'absolute',

            top: this.height * (this.body[i][0]) + 'px',

            left: this.width * (this.body[i][1]) + 'px',

            backgroundColor: this.body[i][2]

        });

        this.scence.appendChild(this.body[i][3]);

    }

}

//运动函数

Snake.prototype.move = function () {

    var length = this.body.length;

    for (let i = 0; i < length - 1; i++) {

        this.body[i][0] = this.body[i + 1][0];

        this.body[i][1] = this.body[i + 1][1];

    }

    let snakehead = this.body[length - 1]

    switch (this.dir) {

        case 'right':

            snakehead[1] += 1;

            break;

        case 'left':

            snakehead[1] -= 1

            break;

        case 'up':

            snakehead[0] -= 1

            break;

        case 'down':

            snakehead[0] += 1

            break;

    }

    this.lastdir = this.dir;

    snake.found();

}

//计时运动

Snake.prototype.shift = function () {

    document.onkeydown = (e) => {

        e = e || window.event;

        let key = e.keyCode;

        switch (key) {

            case 39:

                if (this.lastdir == 'left') {

                    this.dir = 'left'

                } else {

                    this.dir = 'right'

                };

                break;

            case 37:

                if (this.lastdir == 'right') {

                    this.dir = 'right'

                } else {

                    this.dir = 'left'

                };

                break;

            case 38:

                if (this.lastdir == 'down') {

                    this.dir = 'down'

                } else {

                    this.dir = 'up'

                };

                break;

            case 40:

                if (this.lastdir == 'up') {

                    this.dir = 'up'

                } else {

                    this.dir = 'down'

                };

                break;

        }

    }

}

 

//游戏结束

Snake.prototype.over = function () {

    let top = this.body[this.body.length - 1][0];

    let left = this.body[this.body.length - 1][1];

    let width = this.scence_w / this.width - 1;

    let height = this.scence_w / this.height - 1;

    if (top < 0 || left < 0 || top > width || left > height) {

        clearInterval(timeid)

        alert('game over');

    }

    for (let i = 0; i < this.body.length - 1; i++) {

        if (top == this.body[i][0] && left == this.body[i][1]) {

            clearInterval(timeid)

            alert('game over');

        }

    }

}

 

 

let snake = new Snake();

snake.found();

snake.shift();

timeid = setInterval(function () {

    snake.move();

    food.eat();

    snake.over()

}, 100)

food.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

2

function Food() {

  this.scence = document.querySelector('#scence');

  this.width = 20;

  this.height = 20;

  this.body = [-1, -1, 'red', null];

  this.scence_w = scence.offsetWidth;

  this.scence_h = scence.offsetHeight;

   

}

//食物生成

Food.prototype.crteate = function () {

  this.body[1] = getRandom(0, this.scence_w / this.width-1);

  this.body[0] = getRandom(0, this.scence_h / this.height-1);

  this.body[3] = document.createElement('div');

  getStyle(this.body[3], {

    width: this.width + 'px',

    height: this.height + 'px',

    position: 'absolute',

    top: this.height * (this.body[0] ) + 'px',

    left: this.width * (this.body[1] ) + 'px',

    backgroundColor: this.body[2],

    borderRadius: ' 50%',

  });

  this.scence.appendChild(this.body[3]);

 

 

}

//蛇吃到食物

Food.prototype.eat=function(){

  // const new=[0, 0, 'grey', null]

if(snake.body[snake.body.length-1][0]==this.body[0] && snake.body[snake.body.length-1][1]==this.body[1]){

  this.scence.removeChild(this.body[3]);

  this.crteate();

  snake.body.unshift([-1,-1,"grey",null])

}

}

let food = new Food();

food.crteate();

food.eat();

qq_53587164
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt-无标题窗口
学而思
05-21 7339
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
android设置无标题栏 、 状态栏
z1web的博客
11-22 6637
设置无标题栏，状态栏的方式有三种 第一种：在java文件中修改(注意：如果改成隐藏标题栏，那么MainActivity必须继承Activity) public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { ...
C#中实现无标题栏窗体拖动的代码
热门推荐
sixpp的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2249
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 3162
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
precy_wm的博客
01-03 1023
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
Chrome 无标题 哭脸 已崩溃
wkj52719的博客
05-24 4336
谷歌浏览器chrome突然打开后任何页面均显示为无标题，哭脸。鼠标选中sheet页面时，提示已崩溃。 无法打开设置、开发工具箱 经过检查，是chrome的Userdata数据出错，导致页面加载无法正常展示页面。 修复办法： 打开文件夹C:\Users\{privateUserId}\AppData\Local\Google\Chrome，删除User data文件夹，如果需要备份UserData,请备份User Data到其他地方。 ...
qt无标题栏设置
xiatiankuaizou的专栏
01-25 3950
1.设置没有标题栏 this-&gt;setWindowFlags(Qt::FramelessWindowHint); 2.鼠标移动大小 void Dialog::resizeEvent(QResizeEvent *event) { ui-&gt;Button-&gt;setGeometry(0, 0, (82*this-&gt;width())/1366, (48*this-&...
pb powerbuiler 无标题栏窗口的移动
xiaox的专栏
07-23 1364
在使用 response! 或 popup! 窗口 的时候，经常会希望关闭标题栏（例图1），但关闭了标题栏，这个窗口就无法移动了。  （图1） 让无标题栏窗口的移动的设置方法： 1、在窗口中新建一个自定义事件(例图2，事件名 ue_cnhit)，event id 选择pbm_cnhittest 2、添加脚本： return 2  3、鼠标点击窗口没有控件的位置，长按左键，就可以移动窗...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
HTML(27)——渐变
m0_74386799的博客
07-08 309
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
【前端从入门到精通：第二课：HTML头部标签常用标签】
weixin_50556117的博客
07-06 680
可参考百度百科。
HTML(30)——动画
最新发布
m0_74386799的博客
07-09 445
实现步骤@keyframes 动画名称{from{}to{}@keyframes 动画名称{0%{}10%{}....100%{}2.使用动画示例：盒子的宽度从200变到400px，两个状态一般用from to的形式。
HTML CSS 基础复习笔记 - 列表使用
forevercui的博客
07-03 365
web前端基础复习
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值