JS贪吃蛇

最新推荐文章于 2024-01-28 17:49:34 发布
最新推荐文章于 2024-01-28 17:49:34 发布
阅读量123 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Charminglsy/article/details/94350793
版权 
源码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta >
    <title></title>
    <style>
        .map {
            position: relative;
            margin:0 auto;
            width: 900px;
            height: 600px;
            background-color: black;
        }

        .snake {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid white;
            box-sizing: border-box;
        }

        .food {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid white;
            box-sizing: border-box;
            background-color: blue;
        }
    </style>
</head>
<body>
<script>
    var Map;
    function map(){
        this._map=null;
        this.creatMap=function(){
            this._map=document.createElement("div");
            this._map.className="map";
            document.body.appendChild(this._map);
        }
    }
    var Snake;
    function snake(){
        this._snake=[["red", 3, 1, null], ["yellow", 2, 1, null], ["yellow", 1, 1, null]]
        this.direction="right";
        this.createSnake=function(){
            for(var i=0;i<this._snake.length;i++){
                if(this._snake[i][3]==null){
                    this._snake[i][3]=document.createElement("div");
                    this._snake[i][3].className="snake";
                    this._snake[i][3].style.backgroundColor=this._snake[i][0];
                    console.log(this._snake[i][3]);
                    Map._map.appendChild(this._snake[i][3]);
                }

                this._snake[i][3].style.left=this._snake[i][1]*30+"px";
                this._snake[i][3].style.top=this._snake[i][2]*30+"px";
        }
            this.snakemove = function(){
                var len =this._snake.length-1;
                //蛇移动，传递位置
                for(var i = len;i>0;i--){
                    this._snake[i][1]=this._snake[i-1][1];
                    this._snake[i][2]=this._snake[i-1][2];
                }
                //判断移动方向行走
                switch(this.direction){
                    case "right":this._snake[0][1]+=1;break;
                    case "left":this._snake[0][1]-=1;break;
                    case "up":this._snake[0][2]-=1;break;
                    case "down":this._snake[0][2]+=1;break;
                }
                //当蛇穿墙
                if (this._snake[0][1] > 29) {
                    this._snake[0][1] = 0;
                }
                if (this._snake[0][1] < 0) {
                    this._snake[0][1] = 29;
                }
                if (this._snake[0][2] > 19) {
                    this._snake[0][2] = 0;
                }
                if (this._snake[0][2] < 0) {
                    this._snake[0][2] = 19;
                }
                //检测食物
                if(this._snake[0][1] == Food.x&&this._snake[0][2] == Food.y){
                    this._snake.push(["yellow",
                        this._snake[this._snake.length-1][1],
                        this._snake[this._snake.length-1][2],
                    ])
                    Food.createFood();
                }
                this.createSnake();
            }

        }
    }
    var Food;
    function food(){
        this._food = null;
        this.x;
        this.y;
        this.createFood = function(){
            this.x = Math.floor(Math.random()*30);
            this.y = Math.floor(Math.random()*20);
            if(this._food==null){
                this._food = document.createElement("div");
                this._food.className="food";
                Map._map.appendChild(this._food);
            }
            this._food.style.left = this.x *30+"px";
            this._food.style.top = this.y *30+"px";
        }
    }
    window.onload=function(){
        Map=new map();
        Map.creatMap();
        Snake=new snake();
        Snake.createSnake();
        Food=new food();
        Food.createFood();
        document.body.onkeyup = function (e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 87:
                    if (Snake.direction != "down") {
                        Snake.direction = "up";
                    }
                    break;
                case 65:
                    if (Snake.direction != "right") {
                        Snake.direction = "left";
                    }
                    break;
                case 68:
                    if (Snake.direction != "left") {
                        Snake.direction = "right";
                    }
                    break;
                case 83:
                    if (Snake.direction != "up") {
                        Snake.direction = "down";
                    }
                    break;
            }
        }
        setInterval(function () {
            Snake.snakemove();
        }, 100);
    }
</script>
</body>
</html>
Charminglsy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript贪吃蛇
原地起飞
11-24 5479
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
javaScript贪吃蛇
平安喜乐
11-16 4056
javaScript写的贪吃蛇，有注解和图片。
js贪吃蛇学习心得
qq_44710456的博客
08-25 1609
视频学做js贪吃蛇的收获 前言：暑假一个人呆在寝室里面无聊，就在网上找了一段js代码学做贪吃蛇的视频，跟着敲完之后想对这次制作过程进行一次总结。 大体布局：背景图（留有运动空间），开始按钮，蛇头图片，蛇身图片，食物图片，计分图片。 运行原理大致概括：背景图片布满整个网页；开始按钮则位于最顶层（点击之后则自动消失且执行游戏开始的代码）；利用函数绘制蛇（包括头和身体），初始为向右运动，利用定时器函数刷...
javascript 贪吃蛇 源码
lsswear的专栏
11-23 323
js贪吃蛇基本原型：https://www.jb51.net/article/154869.htm 修改内容 可变速、成绩、障碍、多食物 流程解释： 创建三个类 snake、foods、barrier。snake 创建蛇身，管理蛇的运行。foods包含一个食物的分数和食物的显示。barrier创建障碍物。蛇运行时超出边界、碰到障碍物、碰到蛇身时游戏结束重置页面。蛇碰到食物时蛇身加长，可变速度，根据一个食物的分数加成绩。页面先显示障碍物，显示时需判断每条线起始位置和方向不重复。再显示食物和蛇身，蛇身可以
Js贪吃蛇
qq_41043296的博客
03-08 1664
JS贪吃蛇 Js原生贪吃蛇：canvas HTML <canvas id="can"></canvas> #can{ background: #000000; height: 400px; width: 850px; } JS //公共板块 var blockSize = 10; //地图的高宽 var mapW = 300; var mapH = 150; //历史食物var var historyfood = new Array(); //食物数组
js实现贪吃蛇
最新发布
m0_58730471的博客
01-28 1107
贪吃蛇
Js 贪吃蛇
忘川
08-22 267
<!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; ...
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1268
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
js贪吃蛇
shi_jia233的博客
05-18 154
效果展示 1打开Visual Studio Code然后CTRL+n新建然后把文件设置成HTML然后！获取html内容 2先做一个框架来包裹开始按钮和键盘移动得div和随机刷新的食物然后在框架外面做一个分数 3给框架，按钮，食物和蛇属性 4写js样式开始按钮被按下获取蛇，食物和分数，显示蛇和食物隐藏按钮然后食物刷新到25倍数的随机位置,提前声明间隔定时器，然后做防暴力点击 5判断键盘w,a,s,d键和↑↓←→是否被按下 ...
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
js 贪吃蛇完美版
09-06
总之，【JS贪吃蛇完美版】不仅展现了JavaScript的动态特性，还涵盖了基础编程、游戏逻辑、用户交互等多个方面的技术。对于想要学习JavaScript或游戏开发的人来说，这是一个很好的实践项目。通过分析和重构这个游戏的...
javascript贪吃蛇游戏设计与实现
10-14
在本文中，我们将深入探讨如何...通过以上步骤，我们可以构建一个基本的JavaScript贪吃蛇游戏，提供丰富的用户体验和挑战性。对于想要进一步优化游戏的开发者，还可以考虑增加游戏难度、添加音效、实现多人对战等功能。
JS四种计时器
热门推荐
Charminglsy的博客
06-06 2万+
计时器对象：setTiemout、setInterval、setImmediate、requestAnimationFrame。 定时器：JS提供了一些原生方法来实现延时去执行某一段代码 setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段 var timeoutId = window.setTimeout(func[, delay, param1, param2, …]);...
new Option()函数，以及HTML DOM setAttribute() 方法
Charminglsy的博客
06-12 1306
HTML DOM setAttribute() 方法 实例： 设置 input 元素的 type 属性： document.getElementsByTagName(“INPUT”)[0].setAttribute(“type”,“button”); <!DOCTYPE html> <html> <body> <input value="OK"> ...
HTML加入音频
Charminglsy的博客
06-12 743
可以通过使用 getElementById() 来访问 元素： var x = document.getElementById(“myAudio”); 也可以通过使用 document.createElement() 方法来创建 元素： var x = document.createElement(“AUDIO”); ...
react基础1（导入组件，绑定属性，引入图片，react双向绑定）注明：vue中使用ref调用时写法为this.$refs，而react中调用时为this.refs
Charminglsy的博客
08-01 616
1、组件的写法 组件的写法 1.import React from ‘react’; 2.声明当前组件的类 class Rindex extends React.Component{ } 3.暴露出去 export default name; 4.写类里面render 渲染方法 render(){ return (标签) 多个标签？？？ 单个标签 } 5.在组件里面声明constructor ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值