用JavaScript实现贪吃蛇游戏_艾孜尔江撰

于 2020-03-02 22:23:00 发布
阅读量4.8w 收藏 1
点赞数 1
分类专栏： 游戏开发 计算机图形学 文章标签： 游戏 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43867242/article/details/104621687
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>JavaScript实现贪吃蛇游戏_/艾孜尔江撰/</title>
    <style>
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }

        body {
            background-color: #CCC;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
        }

        canvas {
            display: block;
            margin: 0 auto;
            background-color: #666;
        }
    </style>
</head>

<body>

    <h1>贪吃蛇</h1>

    <div>
        <canvas id="maincanvas" width="320" height="240">
    </div>

    <p>使用WASD或HJKL或上下左右键控制方向</p>
    <p>随着蛇身变长，速度也会变快</p>
    <p>按空格开始游戏</p>
    <p>艾孜尔江复现</p>

    <script>
        var canvas = document.getElementById("maincanvas");
        var context = canvas.getContext("2d");
        var game, snake, food;

        game = {

            score: 0,
            fps: 8,
            over: false,
            message: null,

            start: function () {
                game.over = false;
                game.message = null;
                game.score = 0;
                game.fps = 8;
                snake.init();
                food.set();
            },

            stop: function () {
                game.over = true;
                game.message = 'GAME OVER - PRESS SPACEBAR';
            },

            drawBox: function (x, y, size, color) {
                context.fillStyle = color;
                context.beginPath();
                context.moveTo(x - (size / 2), y - (size / 2));
                context.lineTo(x + (size / 2), y - (size / 2));
                context.lineTo(x + (size / 2), y + (size / 2));
                context.lineTo(x - (size / 2), y + (size / 2));
                context.closePath();
                context.fill();
            },

            drawScore: function () {
                context.fillStyle = '#999';
                context.font = (canvas.height) + 'px Impact, sans-serif';
                context.textAlign = 'center';
                context.fillText(game.score, canvas.width / 2, canvas.height * 0.9);
            },

            drawMessage: function () {
                if (game.message !== null) {
                    context.fillStyle = '#00F';
                    context.strokeStyle = '#FFF';
                    context.font = (canvas.height / 10) + 'px Impact';
                    context.textAlign = 'center';
                    context.fillText(game.message, canvas.width / 2, canvas.height / 2);
                    context.strokeText(game.message, canvas.width / 2, canvas.height / 2);
                }
            },

            resetCanvas: function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }

        };

        snake = {

            size: canvas.width / 40,
            x: null,
            y: null,
            color: '#0F0',
            direction: 'left',
            sections: [],

            init: function () {
                snake.sections = [];
                snake.direction = 'left';
                snake.x = canvas.width / 2 + snake.size / 2;
                snake.y = canvas.height / 2 + snake.size / 2;
                for (var i = snake.x + (5 * snake.size); i >= snake.x; i -= snake.size) {
                    snake.sections.push(i + ',' + snake.y);
                }
            },

            move: function () {
                switch (snake.direction) {
                    case 'up':
                        snake.y -= snake.size;
                        break;
                    case 'down':
                        snake.y += snake.size;
                        break;
                    case 'left':
                        snake.x -= snake.size;
                        break;
                    case 'right':
                        snake.x += snake.size;
                        break;
                }
                snake.checkCollision();
                snake.checkGrowth();
                snake.sections.push(snake.x + ',' + snake.y);
            },

            draw: function () {
                for (var i = 0; i < snake.sections.length; i++) {
                    snake.drawSection(snake.sections[i].split(','));
                }
            },

            drawSection: function (section) {
                game.drawBox(parseInt(section[0]), parseInt(section[1]), snake.size, snake.color);
            },

            checkCollision: function () {
                if (snake.isCollision(snake.x, snake.y) === true) {
                    game.stop();
                }
            },

            isCollision: function (x, y) {
                if (x < snake.size / 2 ||
                    x > canvas.width ||
                    y < snake.size / 2 ||
                    y > canvas.height ||
                    snake.sections.indexOf(x + ',' + y) >= 0) {
                    return true;
                }
            },

            checkGrowth: function () {
                if (snake.x == food.x && snake.y == food.y) {
                    game.score++;
                    if (game.score % 5 == 0 && game.fps < 60) {
                        game.fps++;
                    }
                    food.set();
                } else {
                    snake.sections.shift();
                }
            }

        };

        food = {

            size: null,
            x: null,
            y: null,
            color: '#0FF',

            set: function () {
                food.size = snake.size;
                food.x = (Math.ceil(Math.random() * 10) * snake.size * 4) - snake.size / 2;
                food.y = (Math.ceil(Math.random() * 10) * snake.size * 3) - snake.size / 2;
            },

            draw: function () {
                game.drawBox(food.x, food.y, food.size, food.color);
            }

        };

        var inverseDirection = {
            'up': 'down',
            'left': 'right',
            'right': 'left',
            'down': 'up'
        };

        var keys = {
            up: [38, 75, 87],
            down: [40, 74, 83],
            left: [37, 65, 72],
            right: [39, 68, 76],
            start_game: [13, 32]
        };

        function getKey(value) {
            for (var key in keys) {
                if (keys[key] instanceof Array && keys[key].indexOf(value) >= 0) {
                    return key;
                }
            }
            return null;
        }

        addEventListener("keydown", function (e) {
            var lastKey = getKey(e.keyCode);
            if (['up', 'down', 'left', 'right'].indexOf(lastKey) >= 0
                && lastKey != inverseDirection[snake.direction]) {
                snake.direction = lastKey;
            } else if (['start_game'].indexOf(lastKey) >= 0 && game.over) {
                game.start();
            }
        }, false);

        var requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame;

        function loop() {
            if (game.over == false) {
                game.resetCanvas();
                game.drawScore();
                snake.move();
                food.draw();
                snake.draw();
                game.drawMessage();
            }
            setTimeout(function () {
                requestAnimationFrame(loop);
            }, 1000 / game.fps);
        }

        requestAnimationFrame(loop);
    </script>
</body>

</html>

欢迎广大读者交流分享代码、经验、及新观点、新主意！

艾孜尔江
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
解决conda安装虚拟Python环境联网失败问题_艾孜尔江撰
10-03 1132
conda安装失败问题追溯
博客
Python Playsound用法_艾孜尔江撰
05-02 2807
亲测发现Python Playsound库在Windows 10、Python 3环境上无法直接使用（2022年5月1日）；修改playsound.py为如下所示：import logginglogger = logging.getLogger(__name__)class PlaysoundException(Exception): passdef _canonicalizePath(path): """ Support passing in a pathlib..
博客
油歌作品欣赏——工作的人最美
01-15 4万+
博客
用bat脚本在Windows上实现微信多开_艾孜尔江撰
11-14 11万+
:: by Alexander Ezharjan:: 艾孜尔江·艾尔斯兰撰稿chcp 65001@echo off::将下方的路径更换为自己的路径即可set WeChat_Location="D:\软件安装根目录(C盘转存）\微信\WeChat\WeChat.exe"set /p count=How many Wechats do you want to open?::set /p WeChat_Location=Where is your Wechat application plac
博客
解决无法执行python setup install命令的方法
10-04 11万+
执行python setup.py install命令想要安装一个python包却出错了，这时候出错信息如下：running installerror: can't create or remove files in install directoryThe following error occurred while trying to add or remove files in theinstallation directory: [Errno 13] Permission den
博客
Git版本回退的两种方式_艾孜尔江撰
10-01 11万+
方式一找到你误提交之前的版本号；git revert -n 版本号 （版本号通过’git log’命令查看，复制你想要回滚的目标版本号）；git commit -m YOUR_COMMIT_MSG 提交代码到本地仓库；git push 提交/推送代码到远程仓库。方式二使用git reset –hard 版本号的方式也可以，两者的区别在于《方式一》会新建一个历史记录而reset不会。...
博客
计算机专业术语对照表_艾孜尔江编
09-28 11万+
Aabstraction layer，抽象层access，获取，存取acoustic coupler，声音耦合器Active Directory，活动目录Acyclic Dependencies Principle，非循环依赖原则（ADP）acyclic digraph，有向无环图Adaptive Code，自适应代码Add Parameter，添加参数ADSL，Asymmetrical Dingital Subscriber Loop，非对称数字用户环线affinity，绑定aff
博客
C#初学者的Hello World代码_艾孜尔江撰
08-14 11万+
using System;using System.Collections.Generic;public class MyClass{ struct Name{ public string FirstName; public string LastName; public string GetName(){ return FirstName + "·" + LastName; } } struct Vector3{ public float x;
博客
HTML简易的用户名密码登录页面_艾孜尔江撰
08-08 12万+
<html lang="en"><head> <meta charset="UTF-8"> <title>登录</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> &lt
博客
一次性打开多个网页的工具脚本_艾孜尔江撰
08-07 11万+
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>艾孜
博客
使用a标签无法跳转到指定网页的解决办法_艾孜尔江撰
08-07 12万+
平时HTML中的a标签是我们十分喜爱使用的，但是就是这样的简单基础的标签有时候会出现我们意想不到的问题。首先来一段测试，以复现问题，使用一堆url，动态创建多个a标签，撰写如下所示的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt..
博客
弱类型语言中双感叹号的意义_艾孜尔江撰
07-21 11万+
let o={flag:true}; let test=!!o.flag; //等效于var test=o.flag||false; console.log(test);
博客
解决微信内置浏览器打开网页未看到漏洞的修复_艾孜尔江撰
07-10 11万+
问题描述平时在前端网页的开发过程中经常会出现程序员这边更新完的网页同步到线上之后，测试环境下是可以正常看到修复之后的结果，而到了产品经理或者策划那边却会出现没有看到功能受到更新/漏洞得以修复的情况；这个问题十分严峻——如果是已经上线的项目，修复了一些漏洞，而最终的效果没有被客户端用户所感受到，很糟糕！这种情况产生的最多的情况为：(1) 前端页面所指向的URL地址没有变更，还是原来的URL地址；(2) 用户打开该URL地址时使用微信内置浏览器点击打开；(3) 用户打开该URL地址时使用其它浏览
博客
域名底下设置子域名_艾孜尔江撰
07-07 11万+
参考通过上面的方式，就可以实现一个域名下面有多个子域名的效果。比如，我的主域名是www.ezharjan.xyz，那么我可以加一个子域名，换一下前缀，换成自己喜欢的，如blog.ezharjan.xyz之类的。修改面板截图如下：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210707102238173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR
博客
简化比较的方案_艾孜尔江撰
06-28 16万+
//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) { //logic}在JS中，直接使用includes方法，在其它语言中，开发者可以撰写类似的方法来简化代码，在大型项目中这种做法非常有益。...
博客
C/C++四种方法实现加法操作_艾孜尔江撰
06-24 16万+
/************************************************************************* > File Name: add.cpp > Author: Alexander > Mail: [email protected] > Created Time: 一 8/24 20:16:39 2020 **************************************************************
博客
VS Code添加到右键菜单_艾孜尔江撰
06-24 16万+
Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\VSCode]@="Open with VSCode""Icon"="C:\\Softwares\\VSCode\\Microsoft VS Code\\Code.exe"[HKEY_CLASSES_ROOT\*\shell\VSCode\command]@="\"C:\\Softwares\\VSCode\\Microsoft VS Code\\Code.exe" \
博客
C及数据结构一瞥_艾孜尔江撰
06-22 16万+
#include<iostream>using namespace std;void run();int main() { run();}void run() { //int i2 = 555, i1 = 666; //if opened, the result will be 1, which is the space not allocated int i1= 555 , i2 = 666; //跟声明顺序有关，先声明的变量会先被分配到内存空间 int* ptr =
博客
必背命令行集合_艾孜尔江撰
06-22 16万+
Graphical user interfaces are super friendly to computer users. They were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs).However, they often require more resources, are less powerful and hard to automate vi.
博客
C++笔记一瞥_艾孜尔江撰
06-22 16万+

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值