<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>贪吃块</title>

        <script crossorigin="anonymous" integrity="sha384-mlceH9HlqLp7GMKHrj5Ara1+LvdTZVMx4S1U43/NxCvAkzIo8WJ0FE7duLel3wVo" src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>

    </head>

    <style>

        body{

            background: #ECAD9E;

            width: 100%;

            height: 100%;

        }

        #title{

            position: absolute;

            width: 98%;

            height: 17%;

            line-height:100%;

            font-size:150%;

            top: calc(0);

            left: calc(1%);

            text-align:center;

            background: #BEEDC7;

            border: 3px solid #19CAAD;

            border-radius: 5px;

        }

        #ppp{

            width: 40px;

            height: 40px;

            background: red;

            position: absolute;

            left: 100px;

            top: 100px;

        }

        #stage{

            position: absolute;

            width: 98%;

            height: 66%;

            top: calc(17%);

            left: calc(1%);

            background: #BEE7E9;

            border: 3px solid #F4606C;

            border-radius: 5px;

        }

        #food{

            position: absolute;

            width: 10px;

            height: 10px;

            top:calc(50%);

            left: calc(50%);

            background: green;

            visibility: visible;

        }

    </style>

    <script type="text/javascript">

        var setInter;

        var times = 100;

        var grade = 0;

        var isContinue = true;

        var speed = 0;//控制小方块速度

        $(function() {

            var stage = $("#stage");

            var food =$("#food");

            var snake = $("#ppp");

            $(document).keyup(function(event) {//键盘监听

                //var real = String.fromCharCode(event.keyCode);

                clearInterval(setInter);

                var t = event.keyCode;

                var p = $("#ppp");

                var ptxt = p.val();

                p.val(ptxt + t);

                speed = 150-grade*5;

                if(50>=speed){//速度最快是50毫秒

                    speed = 50;

                }

                setInter = setInterval(function(){move(t);},speed);

            });

            function move(t){//移动

                var go = "<span style='color:green;'>go</span>";

                var ready = "<span style='color:red;'>ready</span>";

                switch (t){

                    case 37:

                        $("#content").html(go);

                        moveLeft();

                        break;

                    case 38:

                        $("#content").html(go);

                        moveTop();

                        break;

                    case 39:

                        $("#content").html(go);

                        moveRight();

                        break;

                    case 40:

                        $("#content").html(go);

                        moveBottom();

                        break;

                    default:

                        $("#content").html(ready);

                        break;

                }

                showFood();

                eatFood();

            }

            function eatFood(){//判断是否吃到食物

                var ft = parseInt(food.css("top"))+10;

                var fl = parseInt(food.css("left"))+10;

                var fb = parseInt(food.css("top"));

                var fr = parseInt(food.css("left"));

                var st = parseInt(snake.css("top"));

                var sl = parseInt(snake.css("left"));

                var sb = parseInt(snake.css("top"))+parseInt(snake.css("height"));

                var sr = parseInt(snake.css("left"))+parseInt(snake.css("width"));

                if(ft>st&&fl>sl&&fb<sb&&fr<sr){

                    food.css("visibility","hidden");

                    var co = food.css("background-color");

                    snake.css({"width":parseInt(snake.css("width"))+10+"px","height":parseInt(snake.css("width"))+10+"px","background-color":co});

                    grade++;

                    return;

                }

            }

            function showFood(){//生成食物

                isSucceed();

                if(!isContinue){

                    return true;

                }

                if(food.css("visibility")=="visible")return;

                var r = Math.random()*255;

                var g = Math.random()*255;

                var b = Math.random()*255;

                var s ="rgb("+r+","+g+","+b+")";

                food.css({"top":Math.random()*490,"left":Math.random()*690,"background":s});

                var ft = parseInt(food.css("top"))+10;

                var fl = parseInt(food.css("left"))+10;

                var fb = parseInt(food.css("top"));

                var fr = parseInt(food.css("left"));

                var st = parseInt(snake.css("top"));

                var sl = parseInt(snake.css("left"));

                var sb = parseInt(snake.css("top"))+parseInt(snake.css("height"));

                var sr = parseInt(snake.css("left"))+parseInt(snake.css("width"));

                if(ft>st&&fl>sl&&fb<sb&&fr<sr){

                    showFood();

                    return;

                }

                food.css("visibility","visible");

            }

            function moveLeft(){//左移

                var snake = $("#ppp");

                var odlLeft = snake.css("left");

                gameOver(0,parseInt(odlLeft));

                snake.css("left",parseInt(odlLeft)-10+"px");

            }

            function moveTop(){//上移

                var snake = $("#ppp");

                var odTop = snake.css("top");

                gameOver(0,parseInt(odTop));

                snake.css("top",parseInt(odTop)-10+"px");

            }

            function moveRight(){//右移

                var snake = $("#ppp");

                var odlLeft = snake.css("left");

                var max = stage.width()-snake.width();

                gameOver(parseInt(odlLeft),max);

                snake.css("left",parseInt(odlLeft)+10+"px");

            }

            function moveBottom(){//下移

                var snake = $("#ppp");

                var odBottom = snake.css("top");

                var bottomMax = stage.outerHeight()-snake.height();

                gameOver(parseInt(odBottom),bottomMax);

                snake.css("top",parseInt(odBottom)+10+"px");

            }

            function gameOver(pos,max){//游戏结束

                if(!isContinue){

                    return true;

                }

                if(pos >= max){

                    alert("游戏结束！！你的得分"+grade);

                    window.location.reload();

                }

            }

            function isSucceed(){

                if(!isContinue){

                    return true;

                }

                if(49<grade){

                    isContinue = false;

                    alert("恭喜你,通关了!你的得分"+grade);

                    window.location.reload();

                }

            }

        });

    </script>

    <body>

        <div id="title">

            <h5 style="color:orangered;">消遣娱乐</h5>

            <h4 id="content">ready</h4>

        </div>

        <div id="stage">

            <div id="ppp"></div>

            <div id="food"></div>

        </div>

    </body>

</html>

Pc贪吃蛇的更多相关文章

  1. HTML 5 背离贪吃蛇 写成了类似于屏幕校准

    中间写了改 改了写 还是没做出自己满意的效果 ,看来自己的确不是一个走前端的料子.当然h5还是学一点好一点 具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出 ...

  2. [原创]html5游戏_贪吃蛇

    代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...

  3. H5实现的可自定义贪吃蛇游戏

    原创游戏,使用lufylegend.js开发 用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...

  4. Linux Curses编程实现贪吃蛇

    curses库 简单而言,提供UNIX中多种终端 操作光标和显示字符 的接口.我们常见的vi就是使用curses实现的.现在一般都用ncurses库. Linux下curses函数库    Linux ...

  5. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  6. 贪吃蛇小游戏-----C语言实现

    1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...

  7. HTML5+CSS+JS 贪吃蛇demo

    我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...

  8. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  9. 用C++实现的贪吃蛇游戏

    我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...

随机推荐

  1. 当微信小程序遇到AR（四）

    当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...

  2. jq append添加的元素click获取不到的解决方法

    移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...

  3. MyBatis使用技巧、总结、注意事项

    目录 1.mybatis的官方文档地址 2.其他技巧: 2.1 如何在代码中拼接 like %% 2.2 数据库比较时日期的错误操作 2.2.1 异常情况: 2.2.2 为什么会在后面指定jdbcTy ...

  4. *#【Python】【基础知识】【运算符】【Python的几类运算符】

    Python的运算符分为以下几类: 算术运算符比较(关系)运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符 以及需要考虑的:运算符优先级 一.算术运算符: 需要注意的,上图是Python 2.0 ...

  5. （五）Spring 中的 aop

    目录 文章目录 AOP概念 AOP原理 AOP术语 **`Spring`** 中的 **`aop`** 的操作 使用 `AspectJ` 实现 `aop` 的两种方式 AOP概念 浅理解 aop :面 ...

  6. C++版 归并排序

    在原作者基础上加入注释 原作者:https://www.cnblogs.com/agui521/p/6918229.html 归并排序:归并排序(英语:Merge sort,或mergesort),是 ...

  7. git 使用中报错：LF will be replaced by CRLF in app.json

    git config --global core.autocrlf false //禁用自动转换

  8. PHP内存管理-zendMM

    ZendMM 是zend memory manager zendMM可以分为三层: 1.存储层 维护者不同体量内存的hash表,已提供堆层使用,负责向os申请和释放内存 2.堆层 PHP内存管理的核心 ...

  9. 字典的setdefault()

    setdefault(key, default) 函数 ---有key获取值.没key设置 key:default dict.setdefault(key, default=None) 如果 key ...

  10. 【记忆化搜索】Happy Happy Prime Prime

    题目描述 RILEY VASHTEE: [reading from display] Find the next number in the sequence:313 331 367 ...? Wha ...