Pc贪吃蛇

<!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贪吃蛇的更多相关文章

HTML 5 背离贪吃蛇写成了类似于屏幕校准
中间写了改改了写还是没做出自己满意的效果 ,看来自己的确不是一个走前端的料子.当然h5还是学一点好一点具体说来就是在canvas 的画布中鼠标点击后画上一个圆形然后就有随机的在画布上面出 ...
[原创]html5游戏_贪吃蛇
代码随便写写,尚有许多不足,PC与手机端皆可运行手机端滑屏操作,PC端方向键操作疑问: 生成食物,与判断是否可以移动方面有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...
H5实现的可自定义贪吃蛇游戏
原创游戏,使用lufylegend.js开发用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...
Linux Curses编程实现贪吃蛇
curses库简单而言,提供UNIX中多种终端操作光标和显示字符的接口.我们常见的vi就是使用curses实现的.现在一般都用ncurses库. Linux下curses函数库 Linux ...
前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
贪吃蛇小游戏-----C语言实现
1.分析众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
用C++实现的贪吃蛇游戏
我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...

随机推荐

LomBok插件--模型类注解
Data注解,ToString注解都是Lombok提供的注解. Lombok是一个实用的java工具,使用它可以消除java代码的臃肿,Lombok提供一系列的注解,使用这些注解可以不用定义gett ...
实例节点的NTP服务器地址配置正确，而且能够ping通，但是在chronyc sources指令中显示NTP服务器状态为“？”
问题:如果实例节点的NTP服务器地址配置正确,而且能够ping通, 但是在chronyc sources指令中显示NTP服务器状态为“?”, 该如何检查并操作. 1)在chrony配置文件中,检查 ...
Bilateral Multi-Perspective Matching for Natural Language Sentences---读书笔记
自然语言句子的双向.多角度匹配,是来自IBM 2017 年的一篇文章.代码github地址:https://github.com/zhiguowang/BiMPM 摘要这篇论文主要 ...
JQuery Validate - 自定义js验证
(function (window, $) { var validResult = {}; var checkObjs = { /** * 检查输入的一串字符是否全部是数字 * 输入:str Stri ...
Hackergame2019 web
前几天跟着几个大佬一起看了看中科大的Hackergame2019,这个比赛主要针对的是新手,激发新生对CTF比赛的兴趣,虽然我已经大三了,但实在是因为我过于five,也只能帮大佬打打杂,这里把自己做的 ...
php display_errors
// 检测开发环境 public function setReporting() { if (APP_DEBUG === true) { error_reporting(E_ALL); ini_set ...
ffmpeg学习笔记-初识ffmpeg
ffmpeg用来对音视频进行处理,那么在使用ffmpeg前就需要ffmpeg有一个大概的了解,这里使用雷神的ppt素材进行整理,以便于复习音视频基础知识视频播放器的原理播放视频的流程大致如下: ...
segi日期计算笔记
计算月末最后一天 /* * 输入年月格式YM(如:201911),输入该月最后一天 */ int monthEndDay(int YM) { int endDay; ; ; == M) { == Y ...
[转帖]Cookie与Passport安全
Cookie与Passport安全 https://www.cnblogs.com/xinzhao/p/6395153.html 感觉自己对网络安全性的理解还是不深入不透彻. 对于web系统而言,由 ...
Thinkphp自定义生成缩略图尺寸的方法
Thinkphp自定义生成缩略图尺寸的方法,本实例中生成两张不同尺寸的图片:第一张是大图350*350,第二张 50*50的缩略图 Image类是Thinkphp系统自带的,可以研究下,这个缩略图类很 ...

Pc贪吃蛇

Pc贪吃蛇的更多相关文章

随机推荐

热门专题