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& ...

随机推荐

python 实现对象去重
利用set()方法实现对象去重,重写__hash__方法和__eq__方法告诉程序什么样的对象是同一个对象 # 写一个类拥有100个对象 # 拥有三个属性 name age sex # 如果两个对象 ...
VSCode 怎么运行代码
VSCode 怎么运行代码,集成终端和资源管理器也有互动.比如我们打开了一个脚本文件,希望直接执行这个脚本文件,就可以打开命令面板,运行 “在活动终端中运行活动文件”(Run Active File ...
【编程开发】opencv实现对Mat中某一列或某一行的元素进行normalization
[编程开发]opencv实现对Mat中某一列或某一行的元素进行normalization 标签: [编程开发] [机器学习] 声明:引用请注明出处http://blog.csdn.net/lg1259 ...
spring中的BeanFactoryPostProcessor
spring中的BeanFactoryPostProcessor和BeanPostProcessor有些像,BeanPostProcessor是在bean的初始化前后进行一些操作, BeanFacto ...
k-近邻(KNN) 算法预测签到位置
分类算法-k近邻算法(KNN): 定义: 如果一个样本在特征空间中的k个最相似 (即特征空间中最邻近) 的样本中的大多数属于某一个类别,则该样本也属于这个类别来源: KNN算法最早是由Cover和H ...
Mancala II
题目描述 Mancala is a family of board games played around the world, sometimes called sowing games, or c ...
php 获取城市ip
/** * 获取ip城市信息 * CreateBy XueSong * @param string $ip * @return array|bool|mixed */ function getCity ...
怎样理解在函数中声明var x = y = 1后调用函数时, x是局部变量, y是全局变量
下面这段代码在执行的时候, 打印的结果是1, Error: undefined; function fn() { var x = y = 1; } fn(); console.log(y); // 1 ...
怎样获取所有style节点
通过 document.styleSheets 获取所有的样式表节点. document.styleSheets instanceof StyleSheetList; // true 注意: 1. 返 ...
SpringBoot使用MongoDB异常问题
一环境介绍 SpringBoot1.5.13.RELEASE(本地) Spring Data MongoDB Java 8 MongoDB(青云) 二问题描述使用Studio3T或者Compas ...

Pc贪吃蛇

Pc贪吃蛇的更多相关文章

随机推荐

热门专题