zoukankan      html  css  js  c++  java
  • 原创JAVASCRIPT小游戏贪吃蛇详解

    在火车上,为了打发时间,我开始了写JS小游戏的计划。就先从贪吃蛇这种最简单的开始写起吧。

    那位用JAVASCRIPT写出超级玛丽的牛人,值得学习。我这里用li标记来模拟红白机中画面的像素点的想法,就是源于此。

    贪吃蛇的游戏规则:

    • 吃掉一个食物,蛇长自动+1;
    • 蛇头撞到边缘或蛇身则游戏结束;
    • 用方向键控制移动方向,需要有暂停游戏功能;

    主要游戏元素:

    • 蛇;
    • 食物;
    • 舞台;

    主要思路及算法:

    • 构造的舞台,很明显是一个固定大小的二维数组;
    • 蛇通过不断吃食物可以改变自身长度,所以应该是一个长度可变的二维数组;
    • 食物、蛇可以出现在整个舞台的任意地方,可以通过改变其坐标值来改变位置;

    接下来看一部分代码:

    snake.unshift([nextX,nextY])
    if(aLi[nextX][nextY].className==_options.classFood){
        _createFood();
    }else{
        aLi[snake[nSnakeLen][0]][snake[nSnakeLen][1]].className='';
        snake.pop();
    }

    这部分是整个游戏最核心的代码,snake数组在每次移动的时候,它的第一个节点都会占领这个像素点,所以这个数组就是unshift([蛇头像素点坐标])。如果这个点是食物那么,继续生成食物,蛇身则已经通过unshift自动+1;如果这个点不是食物,那么删除蛇尾的像素点,从而保持蛇身长度不变,实现了蛇的移动效果。

    另外一部分比较重要的,通过方向键改变蛇身移动方向。考虑到蛇本身是包含一系列坐标值的二维数组,只需给它的值在横向或纵向上+1或-1,即可左右移动一个像素的位置。

    //移动方向、预载移动方向
        var direction = preDirection = [0,1];
        var nextX = snake[0][0]+direction[0];
        var nextY = snake[0][1]+direction[1];

    主要函数方法,我都在源代码里写上了注释。虽然游戏用了组件封装的写法,不过其实都是原生写法,所以还是有改进之处。有BUG欢迎提出来。

    点此查看游戏演示DEMO

  • 相关阅读:
    opensuse tumbleweed中安装code
    树莓派中将caplock映射为esc键
    记录一次奇怪但是很有意义的程序编译警告
    新树莓派系统安装ROS记录
    程序的深挖
    intle官方手册下载
    slax linux的定制
    angular4 *ngFor获取index
    axios post传参后台无法接收问题
    AMD、CMD、CommonJs和 ES6对比
  • 原文地址:https://www.cnblogs.com/kaiye/p/3039056.html
Copyright © 2011-2022 走看看