简易版贪吃蛇

最新推荐文章于 2022-10-27 18:22:46 发布
最新推荐文章于 2022-10-27 18:22:46 发布
阅读量266 收藏 1
点赞数 1
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinqing623/article/details/86645242
版权

上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    table{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    table td{
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        width: 10px;
        height: 10px;
    }
    .red{
        background: #ff0000;
    }
    .food{
        background: chartreuse;
    }
</style>
<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script>

    $(function(){
        initBounds();
        initSnake();
        initFood();
        autoMove();
    })

    /**
     * 监听键盘的上下左右事件
     * @param event
     */
    document.onkeydown=function(event){
        let e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==38 && dire != DOWN){
            dire = UP;
        }
        if(e && e.keyCode==37 && dire != RIGHT){
            dire = LEFT;
        }
        if(e && e.keyCode==40 && dire != UP){
            dire = DOWN;
        }
        if(e && e.keyCode==39 && dire != LEFT){
           dire = RIGHT;
        }
    };

    let square = 20;   //图的格数
    let initLen = 3;   //蛇的初始长度
    let speed = 500;   //每隔多少毫秒移动一次

    let snakeCss = "red";
    let foodCss = "food";

    let LEFT = 0;
    let RIGHT = 1;
    let UP = 2;
    let DOWN = 3;

    let directions = [LEFT, RIGHT, UP, DOWN];
    let snakeSquares = [];
    let dire;    //移动方向

    let foodSquare;


    function isEat(first){
        if(dire == LEFT && first[0] == foodSquare[0] && first[1] - 1 == foodSquare[1]){
            return true;
        }
        if(dire == RIGHT && first[0] == foodSquare[0] && first[1] + 1 == foodSquare[1]){
            return true;
        }
        if(dire == UP && first[0] -1 == foodSquare[0] && first[1] == foodSquare[1]){
            return true;
        }
        if(dire == DOWN && first[0] + 1 == foodSquare[0] && first[1] == foodSquare[1]){
            return true;
        }
        return false;
    }

    function initBounds(){
        let txt = "<table border='0' cellpadding='0' cellspacing='0'>";
        for(let i=0; i< square; i++){
            txt += "<tr>";
            for(let j=0; j < square; j++){
                txt += "<td id='block_" + i + "_" + j +"'></td>";
            }
            txt += "</tr>";
        }
        $("#panContent").html(txt);
    }

    function initSnake(){
        let x = parseInt(Math.random() * square);
        let y = parseInt(Math.random() * square);
        dire = randomDirection();
        if(dire == LEFT){
            if(y + initLen >= square){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x, y + i]);
                }
            }
        }else if(dire == RIGHT){
            if(y - initLen < 0){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x, y - i]);
                }
            }
        }else if(dire == UP){
            if(x + initLen >= square){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x + i, y]);
                }
            }
        }else if(dire == DOWN){
            if(x - initLen < 0){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x - i, y]);
                }
            }
        }
        drawSnake();
    }

    function drawSnake(){
        for(let i = 0; i< initLen; i++){
            let blockId = getBlockId(snakeSquares[i][0], snakeSquares[i][1]);
            $(blockId).addClass(snakeCss);
        }
    }

    function move(){
        let first = snakeSquares[0];
        if(isEat(first)){
            snakeSquares.unshift(foodSquare);
            removeFoodAndReDrawFood();
        }else {
            changeDirection(first);
            if (dire == LEFT) {
                snakeSquares.unshift([first[0], first[1] - 1]);
            } else if (dire == RIGHT) {
                snakeSquares.unshift([first[0], first[1] + 1]);
            } else if (dire == UP) {
                snakeSquares.unshift([first[0] - 1, first[1]]);
            } else if (dire == DOWN) {
                snakeSquares.unshift([first[0] + 1, first[1]]);
            }
            let last = snakeSquares.pop();
            let lastBlockId = getBlockId(last[0], last[1]);
            $(lastBlockId).removeClass(snakeCss);
        }
        drawSnake();
    }

    function removeFoodAndReDrawFood(){
        let foodBlockId = getBlockId(foodSquare[0], foodSquare[1]);
        $(foodBlockId).removeClass(foodCss);
        initFood();
    }

    function changeDirection(firstBlockPosition){
        if(dire == LEFT && firstBlockPosition[1] == 0){
            dire = DOWN;
        }else if(dire == DOWN && firstBlockPosition[0] == square - 1){
            dire = RIGHT;
        }else if(dire == RIGHT && firstBlockPosition[1] == square -1){
            dire = UP;
        }else if(dire == UP && firstBlockPosition[0] == 0){
            dire = LEFT;
        }
    }

    function autoMove(){
        setInterval("move()", speed);
    }

    function isInSnake(blockId){
        if($(blockId).hasClass(snakeCss)){
            return true;
        }
        return false;
    }

    function initFood(){
        let x = parseInt(Math.random() * square);
        let y = parseInt(Math.random() * square);
        let blockId = getBlockId(x, y);
        if(isInSnake(blockId)){
            initFood();
        }else {
            foodSquare = [x, y];
            $(blockId).addClass(foodCss);
        }
    }

    function randomDirection(){
        let i = parseInt(Math.random() * directions.length);
        return directions[i];
    }

    function getBlockId(x, y){
        return "#block_" + x + "_" + y;
    }

</script>
<body>
<div id="panContent"></div>
</body>
</html>

 

心晴623
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你制作贪吃蛇
12-03
手把手教会你做贪吃蛇，当你发现它是一个很简单的一个方法时，你就开始形成了自己的思维
HTML简易版贪吃蛇
09-14
用JavaScript和 HTML写了一个简易版扫雷游戏，大神勿喷，
c++简易贪吃蛇程序（主打一个入手快，易懂，有成就感嘿嘿）
SWU_ly的博客
11-02 8418
#include <iostream> #include <conio.h> #include <windows.h> #include <cstdio>//C using namespace std; bool gameOver;//布尔判断游戏是否结束 const int width = 40;//画板40*20 const int height = 20; int x, y, fruitx, fruity, score; int tailX[100].
贪吃蛇小游戏（C语言实现简易版）
weixin_42098648的博客
10-27 3074
大一作品，贪吃蛇小游戏具有菜单功能，难度选择功能，记录功能，暂停功能，缺陷在于不能将游戏分数存入文件中，游戏记录只在当次游戏时有效。
贪吃蛇（简易版）
程序猿进化梯
04-22 735
一、引言 为了提高自己的代码能力和复习C语言语法规则。cv学习了贪吃蛇简易版的实现，有一定的收获，记录一下学习过程和待改善点。 贪吃蛇简易版一、引言二、学习过程1、基本原理2、操作说明3、待改善点4、可执行代码5、参考6、学习计划 二、学习过程 首先思考几个问题 蛇身用什么数据结构存储？ 这儿采用数组 大致的逻辑是怎么样的？ （1） 初始化，界面，蛇，随机块 （2） 判断蛇头是否与食物坐标重合，从而产生食物 （3） 获取移动速度，同时调整 （4） 改变蛇的方向 （5） 蛇死亡的判断 蛇是如
C语言实现简易版贪吃蛇
06-18
1、C语言完全实现。 2、文档详细描述与代码分析
简易版贪吃蛇代码
12-12
简易版贪吃蛇代码，重思想
基于win的简易版贪吃蛇程序
01-12
基于win的简易版贪吃蛇程序
C/C++EASYX图形库贪吃蛇图片代码资源
04-06
easyx制作贪吃蛇，小白必备素材 音效，图片，代码资源齐全，编译环境VS2017
简易贪吃蛇
04-01
基于C++的简易贪吃蛇。新手入门
贪吃蛇超级简单版，一看就懂的那种
06-25
贪吃蛇，一看就懂，超级简单的代码，java项目，就4个类，无聊可以看看（因为我感觉这技术没啥用）
贪吃蛇（简单版）欢迎指正
yyk219的博客
04-18 346
#include&lt;stdio.h&gt; #include&lt;conio.h&gt; #include&lt;windows.h&gt; #define high 40 //定义游戏界面大小 #define wide 50 char str[11] = { '0' };//变量 str[8]=i str[9]=j str[3]food_x str[4]food_y str[5] ...
基于easyx的c++贪吃蛇
haohulala的博客
09-16 2722
本代码来自于easyx讨论群的分享 先上效果图，其实也只是画了简单的圈圈代表蛇和食物，背景就是黑色的。 #include "stdafx.h" #include &lt;iostream&gt; #include &lt;stdlib.h&gt; #include &lt;time.h&gt; #include &lt;conio.h&gt; #include &lt;graphics....
简易贪吃蛇游戏设计（字符化）
big_teacher的博客
12-25 1741
emmm……这篇主要是介绍一个小小的用代码做出来的贪吃蛇，这对于一个新手的我来说可是费了好大一股劲，其实对于贪吃蛇来说，它本身的特性就决定了它适合用链表来做，emmm……但我不会，所以对于新手的我，我用了一种相似的方法，通过记录蛇的每一个身体点的坐标来操作蛇的移动。以下，我会用源代码的形式简单介绍。 首先，我们需要构造整个图形的边框架构，所以我们要构造如下的二维数组char map[12][12]
C语言简易贪吃蛇（附完整代码）
热门推荐
Snowzhao的博客
06-26 4万+
贪吃蛇小游戏 这是楼主刚学完C语言写的第一个小游戏，代码主要参考： https://blog.csdn.net/qq_37074040/article/details/54766680 我在模仿代码的过程中发现了原作者程序中的一些bug，以下f附有我加以改进后的代码。 1.游戏界面 楼主认为这个小游戏游戏界面的核心在于光标的控制。只要我们能让光标到达...
JS实现简单的贪吃蛇小游戏
qq_27905183的博客
04-10 4278
网页布局框架搭建:<!Doctype html> <html> <head> <title>贪吃蛇小游戏</title> <meta http-equiv="content-Type" content="text/html;charset=gbk" /> <meta http-equiv="Window-target" content="_to
贪吃蛇编程代码简易版
最新发布
12-31
以下是一个简易版贪吃蛇的代码示例： ```python import pygame import time pygame.init() white = (255, 255, 255) black = (0, 0, 0) red = (255, 0, 0) display_width = 800 display_height = 600 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值