<html>

<head>

<meta charset="UTF-8"/>

<title>贪吃蛇</title>

</head>



<body>

    <canvas id="canvas" width="1000" height="700"></canvas>

    <div>

        <input id="switch" type="button" value="開始" onclick="clickSwitch()"></input><br/>

        <input id="content" type="text" value="0"></input>

    </div>

</body>



<script type="text/javascript">

    const WIDTH = 1000;

    const HEIGHT = 700;

    const SNACK_WIDTH = 20;

    const SNACK_HEIGHT = 20;

    //移动时间间隔

    const TIME_MOVE = 300;

    //食物刷新时间

    const TIME_FOOD = 5000;

    //食物总量

    const TOTAL_FOOD = 200;

    //石头刷新时间

    const TIME_STONE = 8000;

    //石头总量

    const TOTAL_STONE = 300;

    

    var switchStatus = 0;

    var changeMove = "right";

    var currentMove = "right";

    //全部被用的位置

    var points = new Array();

    var snacks = new Array();

    var foods = new Array();

    var stones = new Array();

    var moveing = false;

    var timeMoveId, timeFoodId, timeStoneId;

    

    window.onload = function () {

        createGround();

    };

    

    //捕获按的哪个键

    function keyDown(event) {

        if (event.keyCode == "87") {

            //按下W键

            changeMove = "up";

        } else if (event.keyCode == "68") {

            //按下D键

            changeMove = "right";

        } else if (event.keyCode == "83") {

            //按下S键

            changeMove = "down";

        } else if (event.keyCode == "65") {

            //按下A键

            changeMove = "left";

        }

    }



    function handlePoints(x, y, type) {

        if (0 == type) {

            points.push(x+y*WIDTH);

        } else {

            var index = points.indexOf(x+y*WIDTH);

            if (index != -1) {

                points.splice(index, 1);

            }

        }

    }

    

    //贪吃蛇

    function snack(x, y) {

        this.x = x;

        this.y = y;

    }

    

    //食物

    function food(x, y) {

        this.x = x;

        this.y = y;

    }

    

    //石头

    function stone(x, y) {

        this.x = x;

        this.y = y;

    }

    

    //开关操作

    function clickSwitch() {

        if (switchStatus == 0 || switchStatus == 2) {

            document.getElementById("switch").value = "暂停";

            if (switchStatus == 0) {

                //開始

                play();

            }

            switchStatus = 1;

        } else if (switchStatus == 1) {

            document.getElementById("switch").value = "继续";

            switchStatus = 2;

        }

    }

    

    //碰撞判定并操作

    function judge(x, y) {

        /*** 推断是否撞上边界  ***/

        if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {

            end();

            return;

        }

        

        var i;

        /*** 推断是否撞上自己  ***/

        for (i = 1; i < snacks.length; i++) {

            if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {

                end();

                return;

            }

        }

        

        /*** 推断是否撞上石头  ***/

        for (i = 0; i < stones.length; i++) {

            if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {

                end();

                return;

            }

        }

        

        /*** 推断是否撞上食物  ***/

         var flag = false;

        for (i = 0; i < foods.length; i++) {

            if (x == foods[i].x && y == foods[i].y) {

                flag = true;

                foods.splice(i, 1);

            }

        }

        var newSnack = new snack(x, y);

        snacks.unshift(newSnack);

        if (!flag) {

            var p = snacks.pop();

            handlePoints(p.x, p.y, 1);

        }

        document.getElementById("content").value = "x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;

        

        refresh();

    }

    

    //移动贪吃蛇

    function move() {

        if(moveing == false && switchStatus == 1) {

            moveing = true;

            if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {

                currentMove = "left";

                judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);

            } else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {

                currentMove = "up";

                judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);

            } else if ((currentMove != "left" && changeMove == "right")  || (currentMove == "right" && changeMove == "left")) {

                currentMove = "right";

                judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);

            } else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){

                currentMove = "down";

                judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);

            }

            changMove = currentMove;

        }

        moveing = false;

    }

    

    //创建地图

    function createGround() {

        var canvas = document.getElementById("canvas");

        var draw = canvas.getContext('2d');

        //清除原图形

        draw.clearRect(0, 0, WIDTH, HEIGHT);

        draw.strokeStyle = "red";

        draw.strokeRect(0, 0, WIDTH, HEIGHT);

    }

    

    //创建食物

    function createFood() {

        if (foods.length < TOTAL_FOOD) {

            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;

            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;

            if (points.indexOf(x+y*WIDTH) == -1) {

                var newFood = new food(x, y);

                //alert(newFood.x + "****" + newFood.y);

                var canvas = document.getElementById("canvas");

                var draw = canvas.getContext('2d');

                draw.fillStyle = "green";

                draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);

                foods.push(newFood);

                handlePoints(x, y, 0);

            }

        }

    }

    

    //创建石头

    function createStone() {

        if (stones.length < TOTAL_STONE) {

            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;

            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;

            if (points.indexOf(x+y*WIDTH) == -1) {

                var newStone = new stone(x, y);

                var canvas = document.getElementById("canvas");

                var draw = canvas.getContext('2d');

                draw.fillStyle = "#663300";

                draw.beginPath();   

                draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     

                draw.closePath();                        

                draw.fill();

                stones.push(newStone);

                handlePoints(x, y, 0);

            }

        }

    }

    

    //刷新场景

    function refresh() {

        var canvas = document.getElementById("canvas");

        var draw = canvas.getContext('2d');

        //清除原图形

        draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);

        

        /*** 边界  ***/

        draw.strokeStyle = "red";

        draw.strokeRect(0, 0, WIDTH, HEIGHT);

        

        var i;

        /*** 食物   ***/

        draw.fillStyle = "green";

        for (i = 0; i < foods.length; i++) {

            draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);

        }

        

        /*** 石头  ***/

        draw.fillStyle = "#663300";

        for (i = 0; i < stones.length; i++) {

            draw.beginPath();   

            draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     

            draw.closePath();                        

            draw.fill();

        }

        

        /***  贪吃蛇    ***/

        draw.fillStyle = "blue";                   

        draw.beginPath();   

        //圆心x坐标|圆心y坐标|半径|始|PI为圆周率。Math.PI*2为画圆|true为时针方向:逆时针,0为顺时针

        draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     

        draw.closePath();                        

        draw.fill();

        for (i = 1; i < snacks.length; i++) {

            draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);

        }

    }



    //游戏開始

    function play() {

        createGround();

        

        for (var i = 2; i > 0; i--) {

            var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);

            snacks.push(newSnack);

            handlePoints(newSnack.x, newSnack.y, 0);

        }

        refresh();

        

        document.onkeydown = keyDown;

        timeMoveId = setInterval(move, TIME_MOVE);

        timeFoodId = setInterval(createFood, TIME_FOOD);

        timeStoneId = setInterval(createStone, TIME_STONE);

    }

    

    //游戏结束

    function end() {

        clearInterval(timeMoveId);  

        clearInterval(timeFoodId);  

        clearInterval(timeStoneId);  

        switchStatus = 0;

        changeMove = "right";

        currentMove = "right";

        points.length = 0;

        snacks.length = 0;

        foods.length = 0;

        stones.length = 0;

        moveing = false;

        document.getElementById("switch").value = "開始";

        document.getElementById("content").value = "游戏结束";

        alert("游戏结束");

    }

    

</script>



</html>

最简单的HTML5游戏——贪吃蛇的更多相关文章

  1. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  2. Unity3D_(游戏)贪吃蛇

    Unity制作贪吃蛇小游戏 玩家通过“WASD”控制小蛇上下左右移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或身体交叉蛇头撞倒自己身体游戏结束 可通 ...

  3. Java经典小游戏——贪吃蛇简单实现(附源码)

    一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...

  4. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  5. Unity 3D游戏-贪吃蛇类游戏源码:重要方法和功能的实现

    贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...

  6. c++小游戏——贪吃蛇

    #include #include #include #include #include <conio.h> #include #include <windows.h> usi ...

  7. 手把手教学h5小游戏 - 贪吃蛇

    简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...

  8. Win32小游戏--贪吃蛇

    近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述 前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图 在正式写功能之前,先把一系列环 ...

  9. Java_GUI小游戏--贪吃蛇

    贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...

随机推荐

  1. PHP————系统常量

    PHP常量默认为大小写敏感.传统上常量标识符总是大写的. PHP常量名和其它任何 PHP 标签遵循同样的命名规则.合法的常量名以字母或下划线开始,后面跟着任何字母,数字或下划线.用正则表达式是这样表达 ...

  2. js语法之条件语句

    一.比较操作符 比较操作符包括:等于(==).大于(>).大于等于(>=).小于(<).小于等于(<=).

  3. 路飞学城Python-Day10(practise)

    作业:现要求你写一个简单的员工信息增删该查程序,需求如下:当然此表在文件存储时可以这样表示1,Alex Li,22,13651054608,IT,2013-04-012,Jack Wang,28,13 ...

  4. PyQuery使用

    PyQuery库是一个非常强大的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严格实现. ...

  5. 多任务-进程之进程池Pool

    1.什么是池? 首先从字面上看,池代表着一个容器,用来承载着某些内容的容器,了解到这里,就对进程池有了一个初步的轮廓. 2.什么是进程池Pool? (1)利用现实中的事物来理解: 对于小白初学者,接触 ...

  6. React 第一天

    第一天 从webpack到babel再到React.js Vue是如何实现组件化的: 通过.vue文件,来创建对应的组件: ·template 结构 ·script 行为 ·style 样式 Reac ...

  7. 页面加载完成触发input[type="file"]控件问题

    由于浏览器厂家的限制,不同的浏览器不开放页面加载完成就允许触发input[type="file"]控件 测试 Chrome .火狐 .IE .微信客户端QQ =>桌面端: C ...

  8. nginx index.html

    [root@web03 nginx]# ls -l|grep -v temptotal 36drwxr-xr-x 2 root root 4096 Jun 7 15:36 confdrwxr-xr-x ...

  9. otto源代码分析

    otto这个开源项目是一个event bus模式的消息框架.用于程序各个模块之间的通信.此消息框架能够使得各个 模块之间降低耦合性. 此项目是支付公司square一个开源项目,项目托管于github ...

  10. ubuntu 各种窗体操作

    通用 ctrl+alt+0~9 改变窗体大小和是否显示 alt+F4 关闭窗体菜单键+相应启动器位置的编号打开程序 ctrl+pageup/pagedown 在tab间移动 ctrle+shift+p ...