<!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. 【AMAD】django-crispy-forms -- 不要再重复编写Django Form了！

    动机 简介 个人评分 动机 这个APP提供了一个template tag和一个template filter,让你可以在模版中快速渲染表单. 简介 django-crispy-forms1可以看作是d ...

  2. TMS320C6455小介绍

    TMS320C6455是TI公司推出的的一款新型高性能单核定点DSP．它是TI公司基于第三代先进VeloviTI VLIW(超长指令字)结构开发出来的新产品,在通信,医疗图像,无线传输方面都可以大有作 ...

  3. docker安装mongodb和redis

    一.安装mongodb docker pull mongo docker run -p 27017:27017 -d --name mongodb01 mongo docker run -p 2701 ...

  4. There are no packages available

    { "bootstrapped": true, "channels": [ "https://raw.githubusercontent.com/Ja ...

  5. 【51nod】2564 格子染色

    [51nod]2564 格子染色 这道题原来是网络流-- 感觉我网络流水平不行-- 这种只有两种选择的可以源点向该点连一条容量为b的边,该点向汇点连一条容量为w的边,如果割掉了b证明选w,如果割掉了w ...

  6. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  7. CF1032B Personalized Cup

    一个多月前写的题,既然没人写题解,那蒟蒻就写一篇吧 基本思路 既然是输出任意一个解,那么号的位置在那里是没有关系的.我的思路是默认*号在最后面,然后对输入的字符串输出的行数进行分类. 代码 #incl ...

  8. 【第一季】CH04_FPGA设计Verilog基础（一）Enter a post title

    [第一季]CH04_FPGA设计Verilog基础(一) 4.1 Verilog HDL 代码规范 u 项目构架设计 项目的构架用于团队的沟通,以及项目设计的全局把控 u 接口时序设计规范 模块和模块 ...

  9. memcached基本操作指令

    item执行命令: 第一行:Key Flags ExpirationTime BytesKey:Key 用于查找缓存值Flags:一个32位的标志值,客户机使用它存储关于键值对的额外信息Expirat ...

  10. Codeforces 1097F. Alex and a TV Show

    传送门 由于只要考虑 $\mod 2$ 意义下的答案,所以我们只要维护一堆的 $01$ 容易想到用 $bitset$ 瞎搞...,发现当复杂度 $qv/32$ 是可以过的... 一开始容易想到对每个集 ...