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

一、前言和面向对象分析

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

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

贪吃蛇界面效果.png

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

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

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

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

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

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

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

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

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中的基本数据类型