<!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. python之selenium多窗口切换

    前提: 在页面操作过程中有时候点击某个链接会弹出新的窗口,这就需要主机切换到新打开的窗口上.WebDriver提供了switch_to.window()方法,可以实现在不同的窗口之间切换. 内容: 以 ...

  2. 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...

  3. Windows 7通过VirtualBox配置镜像加速

    配置Docker镜像加速: 1.双击,开启default 2.开启后执行下面的命令修改profile文件: sudo vi /var/lib/boot2docker/profile 打开文件之后,敲下 ...

  4. 攻防世界MISC新手练习

    0x01 this_is_flag 对!!!这就是flag 0x02 ext3 题目提示是Linux光盘,附件下载下来 在linux中挂载mount linux /mnt 找一下flagtrings ...

  5. 【编程开发】 C与C++中的关于函数指针的强制类型转换与指针函数的关系

    [编程开发] C与C++中的关于函数指针的强制类型转换与指针函数的关系 标签: [编程开发] [VS开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 以 ...

  6. PHP根据IP判断地区名信息的示例代码

    <?php header("Content-type: text/html; charset=utf-8"); function getIP(){ if (isset($_S ...

  7. 最新 东方明珠java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方明珠等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方明珠.6.7月主要是做系统复习.项目复盘.Leet ...

  8. Mybatis插件之Mybatis-Plus（SpringBoot）

    这边只在SpringBoot下进行简单查询的测试,接下来会博客会介绍增删改的操作. 数据库表结构如下: 开始测试: 1.新建工程(trymp_springboot)并把项目结构建立好 2.导入pom. ...

  9. HTML5页面如何在手机端浏览器调用相机、相册功能

    最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/& ...

  10. sysbench配置使用

    unzip sysbench-0.5.zipcd sysbench-0.5 #####sysbench下载:https://codeload.github.com/akopytov/sysbench/ ...