javascript实现贪吃蛇

最新推荐文章于 2023-06-09 20:35:51 发布
最新推荐文章于 2023-06-09 20:35:51 发布
阅读量692 收藏
点赞数
分类专栏： javascript 文章标签： js 贪吃蛇 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body{
            font-size:9pt;
        }
        table{
            border-collapse: collapse;
            border:solid #333 1px;
        }
        td{
            height: 15px;
            width: 15px;
            font-size: 0px;
        }
        .filled{
            background-color:blue;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        var Snake = {
            table1: null,
            snakeBody:[],
            //当前移动的方向,取值0,1,2,3, 分别表示向左,上,右,下
            direction: 0,
            timer: null,
            speed: 250,
            paused: true,
            rowCount: 30,
            colCount: 30,
            colors:['red','orange','yellow','green','grey','blue','purple'],
            init: function(){
                //var colors = ['red','orange','yellow','green','grey','blue','purple'];
                this.table1 = $('main');
                var x = 0;
                var y = 0;
                var colorIndex = 0;
                this.direction = Math.floor(Math.random()*4);
                //构造表格
                for(var row = 0; row < this.rowCount; row++ ){
                    var tr = this.table1.insertRow(-1);
                    for(var col = 0; col < this.colCount; col++){
                        var td = tr.insertCell(-1);
                    }
                }
                //产生10个点
                for(var i = 0; i < 10; i++){
                    x = Math.floor(Math.random()*this.colCount);
                    y = Math.floor(Math.random()*this.rowCount);
                    colorIndex = Math.floor(Math.random()*7);
                    if(!this.isCellFilled(x, y)){
                        this.table1.rows[y].cells[x].style.backgroundColor = Snake.colors[colorIndex];
                    }
                }
                //产生蛇头
                while(true){
                    x = Math.floor(Math.random()*this.colCount);
                    y = Math.floor(Math.random()*this.rowCount);
                    if(!this.isCellFilled(x,y)){
                        this.table1.rows[y].cells[x].style.backgroundColor = 'black';
                        this.snakeBody.push({x: x, y: y,color:'black'});
                        break;
                       }
               }
                this.paused = true;
                //添加键盘事件
                document.onkeydown = function(e){
                    if(!e) e = windown.event;
                    switch(e.keyCode| e.which | e.charCode){
                        case 13:{//enter
                            if(Snake.paused){
                                Snake.move();
                                Snake.paused = false;
                                break;
                            }
                            else{
                                Snake.pause();
                                Snake.paused = true;
                                break;
                            }
                        }
                        case 37:{//left
                            if(Snake.direction == 2){
                                break;
                            }
                            Snake.direction = 0;
                            break;
                        }
                        case 38:{//up
                            if(event.ctrlKey){
                                Snake.speedUp(-20);
                                break;
                            }
                            if(Snake.direction == 3){
                                break;
                            }
                            Snake.direction = 1;
                            break;
                        }
                        case 39:{//right
                            if(Snake.direction == 0){
                                break;
                            }
                            Snake.direction = 2;
                            break;
                        }
                        case 40:{//down
                            if(event.ctrlKey){
                                Snake.speedUp(20);
                                break;
                            }
                            if(Snake.direction == 1){
                                break;
                            }
                            Snake.direction = 3;
                            break;
                        }
                    }
                }
            },
            move: function(){
                this.timer = setInterval(function(){
                    Snake.erase();
                    Snake.moveOneStep();
                    Snake.paint();
                },  this.speed);
            },
            moveOneStep: function(){
                if(this.checkNextStep() == -1){
                    clearInterval(this.timer);//this
                    alert("Game Over!");
                    return;
                }
                var point = this.getNextPos();
                if(this.checkNextStep() == 1){
                    var _point = this.getNextPos();
                    var _x = _point.x;
                    var _y = _point.y;
                    this.snakeBody.unshift({x:_x, y:_y, color:'black'});
                    this.generateFood();
                    return;
                }
                this.snakeBody.pop();
                this.snakeBody.unshift({x:point.x, y: point.y, color:'black' });

            },
            pause: function(){
                clearInterval(this.timer);//this
                this.paint();
            },
            getNextPos: function(){
                var x = this.snakeBody[0].x;
                var y = this.snakeBody[0].y;
                var color = this.snakeBody[0].color;
                if(this.direction == 0){
                    x--;
                }
                else if( this.direction == 1){
                    y--;
                }
                else if(this.direction == 2){
                    x++;
                }
                else{
                    y++;
                }
                return {x:x, y:y};
            },
            checkNextStep: function(){
                var point = this.getNextPos();
                var x = point.x;
                var y = point.y;
                if(x < 0 ||  x >= this.colCount || y < 0 || y >= this.rowCount){
                    return -1;//game over
                }
                for(var i = 0; i < this.snakeBody.length; i++){
                    if(this.snakeBody[i].x == x && this.snakeBody[i].y == y){
                        return -1;
                    }
                }
                if(this.isCellFilled(x, y)){//因为如果没有因为-1返回且又有颜色，则只可能是食物
                    return 1;
                }
                return 0;
            },

            erase: function(){
                for(var i = 0; i < this.snakeBody.length; i++){
                    this.eraseDot(this.snakeBody[i].x,this.snakeBody[i].y);
                }
            },
            paint: function(){
                for(var i = 0; i < this.snakeBody.length; i++){
                    this.paintDot(this.snakeBody[i].x, this.snakeBody[i].y, this.snakeBody[i].color);
                }
            },
            eraseDot:function(x, y){
                this.table1.rows[y].cells[x].style.backgroundColor = "";
            },
            paintDot: function(x, y, color){
                this.table1.rows[y].cells[x].style.backgroundColor = color;
            },
            getColor: function(x,y){
                    return this.snakeBody.rows[y].cells[x].style.backgroundColor;
            },
            isCellFilled: function(x,y){
                if(this.table1.rows[y].cells[x].style.backgroundColor == ""){
                    return false;
                }
                return true;
            },
            generateFood: function(){
                while(true){
                    var x = Math.floor(Math.random()*this.colCount);
                    var y = Math.floor(Math.random()*this.rowCount);
                    var colorIndex = Math.floor(Math.random()*7);
                    if(!this.isCellFilled(x, y)){
                        this.table1.rows[y].cells[x].style.backgroundColor = this.colors[colorIndex];
                        break;
                    }
                }
            },
            restart: function(){
                if(this.timer){
                    clearInterval(this.timer);
                }
                for(var i = 0; i < this.rowCount; i++){
                    this.table1.deleteRow(0);
                }
                this.snakeBody = [];
                this.init();
                this.speed = 250;

               // this.move();
            },
            speedUp: function(time){
                if(!this.paused){
                    if(this.speed + time < 10 || this.speed + time > 2000){
                        return;
                    }
                    this.speed += time;
                    this.pause();//
                    this.move();
                }
            }
        }
    </script>
</head>
<body οnlοad="Snake.init();">
<table id="main" border="1"></table>
<input type="button" id="btn" value="start/pause"/>
<input type="button" id="reset" value="restart"/>
<input type="button" id="speedup" value="speedup"/>
<input type="button" id="slowdown" value="slowdown"/>
<script>
    document.getElementById('btn').onclick = function(){
        if(Snake.paused){
            Snake.move();
            Snake.paused = false;
        }
        else{
            Snake.pause();
            Snake.paused = true;
        };
    };
    $('reset').onclick = function(){
        Snake.restart();

    };
    $('speedup').onclick = function(){
        Snake.speedUp(-20);
    };
    $('slowdown').onclick = function(){
        Snake.speedUp(20);
    };
</script>
</body>
</html>
总结一句话，想一天速成js还是不可能的。完全被this虐了~
一顾永安
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现贪吃蛇
08-07
简单定时器实现游戏，附有代码注释....................
记录：初次面向对象编写贪吃蛇案列
05-21 327
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .ma...
JavaScript原生实现《贪吃蛇》
findhappy117的博客
02-21 544
JavaScript原生实现《贪吃蛇》，每吃掉一个食物，蛇的身体会变长，食物会重新换位置。
javascript实现贪吃蛇效果
最新发布
weixin_63590089的博客
06-09 962
JavaScript，面向对象，前端
JavaScript实现贪吃蛇（两种方法）
blankmanp的专栏
04-03 1110
前阵子无聊，试着用原生态JavaScript写了写贪吃蛇。一开始写的时候因为以前写的是C，所以想的就是面对过程，于是写了一坨翔出来。。。不过还是把代码贴上来吧：HTML CODE： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Zombie Snake</title> <script
基于JavaScript实现贪吃蛇游戏
12-28
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1.结构 创建一个盒子box作为蛇的身体，当前盒子中只有一个子元素，代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...
用JavaScript实现贪吃蛇游戏
10-14
总的来说，用JavaScript实现贪吃蛇游戏涉及HTML、CSS和JavaScript的结合应用，通过DOM操作动态更新游戏状态，以及利用JavaScript的面向对象编程来构建游戏的各个组件。这是一个很好的练习项目，可以帮助开发者提升对...
JavaScript实现贪吃蛇.zip
04-10
JavaScript实现贪吃蛇是一款经典的基于Web的休闲游戏，利用了HTML、CSS和JavaScript技术来创建。这个项目展示了JavaScript在交互式网页开发中的强大能力。在这个游戏中，玩家通过控制蛇的方向来捕捉食物，每次吃到...
利用JS实现贪吃蛇的游戏(具体分析)之二蛇模块的分析
weixin_42839080的博客
08-06 2173
一.需求分析: 1. 在页面上初始化一条蛇长3个食物宽度,并且初始化移动方向是向右 2. 让蛇可以在页面上移动 3. 让蛇吃掉食物后,身体变长 二.思路分析: 1.同样利用构造函数完成对蛇的初始化,但是除了构造蛇的宽度,高度,颜色外,还需要将蛇分成三个单元(红色,黄色,绿色),这三个单元对应不同的地图x,y坐标....
实战——JavaScript贪吃蛇
进击的程序猿
04-29 1208
JavaScript贪吃蛇 // 思路分析 // 三个对象 map snake Food // map 宽800px和高500px 可以整除 snake每节的宽度 // food 宽10px 高10px 相当于每一节蛇的宽度 同样有（x，y) // snake 不是一个整体，分为三节 头 身 尾 每节都有自己的坐标（x,y)，但是三节又是连着的 // 功能介绍 /* 通过蛇头吃...
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3188
JS 超详细 贪吃蛇 案例 速速围观
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
利用JS实现贪吃蛇
weixin_63489869的博客
06-23 3795
利用js实现贪吃蛇的相关功能
js实现贪吃蛇蛇蛇蛇
qq_41985171的博客
06-02 990
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt;
js实现贪吃蛇小游戏代码（源码）
qq_34222743的博客
01-13 1万+
贪吃蛇游戏     //定义一个点对象     function Point(x,y){         this.x=x;         this.y=y;         this.getX=function(){             return x;         }         this.getY=function(){             re
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
【前端笔记】js简单代码实现贪吃蛇~~~
supercolorpower的博客
08-05 1万+
贪吃蛇是前端人入门且必须的技能。今天闲下来整理介绍一下~~~ 首先，先要确定贪吃蛇小游戏的需求： 背景墙   确定行列 创建蛇头 蛇头移动 蛇头变相 创建实物 碰撞检测 增加身体 食物消失 随机创建新的 身体蛇头一起移动 我们首先通过创建一些div元素来生成网格轨道背景： 然后创建蛇头（我们让蛇头位置是固定的，食物是随机产生的） 接下来是蛇头的自动移动（我们设置一个...
原生js实现贪吃蛇
yuki-li的博客
07-25 8519
写这个小例子时在学习构造函数创建对象，所以元素都是以构造函数形式创建的。 1.创建地图 function map(){ //相关属性 this.className='map'; //构造地图对象 this._map=null; this.createMap= function () {
使用JavaScript实现贪吃蛇游戏
"js实现贪吃蛇游戏的代码实例" 在本文中，我们将探讨如何使用JavaScript（js）语言来实现一个简单的贪吃蛇游戏。贪吃蛇游戏是一个经典的电子游戏，玩家控制一条蛇在屏幕上移动，吃到食物后蛇会变长，碰到边界或自身...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值