JavaScript实现贪吃蛇小游戏中游戏引擎和食物的构建

一、前言和面向对象分析

诺基亚黑白屏手机时代精品小游戏贪吃蛇一度成为人们情感的怀念,编程类型和思想也在不断向前发展。现如今JavaScript作为前端中发挥着至关作用的一门程序语言,好多游戏的动画效果的实现离不开它。

js中面向对象、原型对象和继承的思想分析下下面的这张效果图:

贪吃蛇界面效果.png

找出上图中的对象,分析每个对象具有的属性及它能产生的行为。

游戏引擎:属性——呈现效果背景,边界,方格;页面加载启动,背景呈现;
食物:属性——方格高宽、背景颜色;行为——在游戏引擎中随机出现,被吃掉后当前位置消失再随机出现更新位置;
蛇身:属性——蛇身长度、背景颜色;行为——在游戏引擎中定时移动,随键盘方向键控制改变移动方向,吃掉食物后身体变长;(此处暂不构建蛇身的行为,后期会补充蛇身移动的控制代码

继续阅读JavaScript实现贪吃蛇小游戏中游戏引擎和食物的构建

JavaScript面向对象的原型和继承思想的拖拽案例

在JavaScript中我们接触过面向过程的编程思想,比如丛林中三只萤火虫在随意飞翔,对于这种动画效果,我们知道了它具有的元素和飞翔过程,依序去创建元素,然后给元素加动画效果。然而在编程中,还有一种非常重要的思想,在今后的编程中会经常用到,那就是面向对象的编程思想。

接下来就用拖拽案例来说明一下,要达到如下效果:

1.第一个box能够在页面上随意拖拽
2.第二个box能够在页面上随意拖拽的同时内部显示位置坐标
3.第三个box能够在页面上随意拖拽但不能够越出页面边界

继续阅读JavaScript面向对象的原型和继承思想的拖拽案例

呼吸轮播图中注意的几个“点”

一、封装运动函数animate

对于呼吸轮播图,我们要考虑运动函数中包含的必要参数,为实现效果和作用铺好基石。①需要改变的对象;②要改变的对象某属性及终止状态;③轮播图都有运动或变化过程的时间,可谓运动时间或对象属性变化的时间;还有两个,比如考虑到变化的快慢状态是匀速还是先快后慢等的缓冲状态,④可选择增加缓冲状态描述词,以供缓冲状态函数的调用;有时候考虑运动的重复性,⑤可选择增加回调函数。那么封装的运动函数形式如下:

function animate(elem , targetJSON , time , tweenString , callback){
  //每个参数的意义与上面的序号对应
  //函数内部分析运动可能改变的那些常用属性及如何获取
  //给要改变的对象添加需要改变的属性
  //控制缓冲状态
  //...
}

其实,封装运动函数是个庞大的工作量,考虑的方面很多,所以呢,大神封装好的运动函数我们拿来用就好,明白上面的前三个必要参数,会给轮播图带来的效果呈现。

继续阅读呼吸轮播图中注意的几个“点”

JavaScript中的运算和循环结构

运算

算术运算符

运算符 说明 例子
+ y = 2+1
y = 2 – 1
* y = 2 * 4
/ y= 6 / 2
% 求余 y = 7 % 2
++ 加加,分为前加和后加 ++1 1++
– – 减减,分为前减和后减 – -1 1- –
** y = 3**2

对于前加和后加,执行后的结果都是变量加1,其区别在于执行时返回结果不一样,参考下面两个例子:

var x = 2;
 alert(++x); //输出:3
 alert(x); //输出:3

var y = 2;
 alert(y++); //输出:2
 alert(y); //输出:3

继续阅读JavaScript中的运算和循环结构

JavaScript中的基本数据类型

如果你是一名IT前端人员,怎么会不懂JavaScript的美?如果你是一名前端在学人员,接触JavaScript后,怎么会不明白JavaScript中基本数据类型?大家都知道计算机能够存储和处理数据。

JavaScript中有5种基本数据类型:number、string、boolean、undefined和null。
在介绍js的基本数据类型前,有必要提到两个关键字var和typeof。那什么是关键字

继续阅读JavaScript中的基本数据类型