代码实现ts:
1 'use strict'
module Main { const FloorType = {
space: "space",
snack: "body",
food: "food"
}
const enum Direction {
left = 37,
up = 38,
right = 39,
down = 40
}
interface Block {
pos: Pos
type: string
node: HTMLElement }
interface Pos {
x: number
y: number
}
let score: number = 0;
export class FLoor { private table: HTMLTableElement
public row: number
public col: number
public blocks: Block[]
private parent: HTMLElement
constructor(options?) {
console.log(options);
options = options || {};
this.table = document.createElement("table");
this.parent = options.parent || document.body;
this.row = options.row || 20;
this.col = options.col || 20;
this.blocks = [];
}
DrawFloor() { for (let i = 0; i < this.row; i++) {
let tr = <HTMLTableRowElement>this.table.insertRow(-1);
for (let k = 0; k < this.col; k++) {
let td = <HTMLTableCellElement>tr.insertCell(-1);
td.className = FloorType.space;
let block: Block = {
pos: { x: k, y: i },
type: FloorType.space,
node: td
}
this.blocks.push(block);
}
}
this.parent.appendChild(this.table); }
DrawGameOver() {
let div = document.createElement("div");
div.className = "gameover";
div.innerHTML = "Game Over score:" + score;
div.style.top = this.row * 20 / 2 - 50 + "px";
div.style.left = this.row * 20 / 2 - 100 + "px";
this.parent.appendChild(div); } ReDraw(blocks: Block[]) { blocks.forEach((block) => { block.node.className = block.type })
}
}
export class Snack { private len: number;
private speed: number;
private bodies: Block[];
private direction: Direction;
private floor: FLoor;
private timer?: number;
constructor(floor: FLoor, options?) {
options = options || {};
this.len = options.len || 3;
this.speed = options.speed || 60;
this.direction = options.direction || Direction.right;
this.floor = options.floor || floor;
this.bodies = [];
}
DrawSnack() { let setDirection = (e: KeyboardEvent): void => {
const keycode = e.keyCode;
switch (keycode) {
case Direction.left:
if (this.direction !== Direction.right) {
this.direction = Direction.left;
}
break; case Direction.right:
if (this.direction !== Direction.left) {
this.direction = Direction.right;
}
break;
case Direction.up:
if (this.direction !== Direction.down) {
this.direction = Direction.up;
}
break;
case Direction.down:
if (this.direction !== Direction.up) {
this.direction = Direction.down;
}
break;
}
}
document.addEventListener('keydown', setDirection, false);
for (let i = 0; i < this.len; i++) {
this.bodies.push(this.floor.blocks[i]);
}
this.RandFood();
this.bodies.forEach((block) => { block.type = FloorType.snack });
this.floor.ReDraw(this.bodies);
this.timer = setInterval(() => { this.Move() }, this.speed);
}
RandFood() { let p: Pos = {
x: Math.ceil(this.floor.col * Math.random()),
y: Math.ceil(this.floor.row * Math.random()),
}
let food = this.floor.blocks.filter((block) => {
if (block.pos.x == p.x && block.pos.y == p.y) {
return true;
}
});
food[0].type = FloorType.food;
this.floor.ReDraw(food); }
Move() { let head: Block = this.bodies[this.bodies.length - 1];
let next: Block = this.next(head);
if (!next || next.type == FloorType.snack) {
this.Die();
return;
}
if (next.type == FloorType.food) {
this.bodies.push(next);
next.type = FloorType.snack;
this.floor.ReDraw(this.bodies);
this.RandFood();
next = this.next(this.bodies[this.bodies.length - 1]);
score++;
} let tail: Block = <Block>this.bodies.shift();
tail.type = FloorType.space;
next.type = FloorType.snack;
this.bodies.push(next);
this.floor.ReDraw([tail]);
this.floor.ReDraw(this.bodies);
}
Die() {
clearInterval(this.timer);
this.floor.DrawGameOver();
} next(targert: Block): Block {
let x: number;
let y: number;
switch (this.direction) {
case Direction.left:
x = targert.pos.x - 1;
y = targert.pos.y;
break;
case Direction.right:
x = targert.pos.x + 1;
y = targert.pos.y;
break;
case Direction.up:
x = targert.pos.x;
y = targert.pos.y - 1;
break;
case Direction.down:
x = targert.pos.x;
y = targert.pos.y + 1;
break;
}
return this.floor.blocks.filter((block) => {
if (x == block.pos.x && y == block.pos.y) {
return true;
}
})[0]; } } }
let floor=new Main.FLoor({ parent:document.getElementById("box")
});
floor.DrawFloor();
let snack=new Main.Snack(floor);
snack.DrawSnack();
html页面
 <html lang="en">

 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-collapse: collapse;
} td {
border-left: 1px solid black;
border-top: 1px solid black;
padding: 10px; } .space {
background-color: white;
} .body {
background-color: black;
} .food {
background-color: red;
}
.gameover{ position: absolute;
font-size: 36px;
color: aqua;
width:200px;
text-align: center;
}
#box{
float: left;
position: relative; }
</style>
</head> <body> <div id="box"> </div>
<script src="Snack.js"></script>
<!-- <script src="Game.js"></script> -->
</body> </html>
代码下载:发送邮件to:xiaotiejiang_90@163.com

typescript 贪吃蛇[学习过程中,模仿的一个例子]的更多相关文章

  1. mysql中case的一个例子

    最近遇到一个问题: year amount num 1991 1 1.1 1991 2 1.2 1991 3 1.3 1992 1 2.1 1992 2 2.2 1992 3 3.3 把上面表格的数据 ...

  2. 使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

  3. 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能(附源代码详解和下载)

    C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...

  4. 小菜学习Winform(一)贪吃蛇2

    前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...

  5. [C入门 - 游戏编程系列] 贪吃蛇篇(四) - 食物实现

    由于食物是贪吃蛇游戏中最简单的一部分,而且和其他部分关联性不强,基本上是一个独立的部分,所以我打算先实现它. 我的想法是食物必须在世界中才能被创造出来,也就是说,先有世界再有食物,所以我得先判断世界是 ...

  6. [C入门 - 游戏编程系列] 贪吃蛇篇(二) - 食物定义

    游戏中的食物没有那么多复杂属性,特别是贪吃蛇游戏中,我把食物看待的很简单: 1. 它必须属于世界,才能出现在世界.不可能一个不属于世界的食物,出现在世界中:但是可能存在着一个食物,它属于世界,但是却没 ...

  7. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  8. AI贪吃蛇前瞻——基于Dijkstra算法的最短路径问题

    在贪吃蛇流程结构优化之后,我又不满足于亲自操刀控制这条蠢蠢的蛇,干脆就让它升级成AI,我来看程序自己玩,哈哈. 一.Dijkstra算法原理 作为一种广为人知的单源最短路径算法,Dijkstra用于求 ...

  9. JavaScript原生实现《贪吃蛇》

    概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...

随机推荐

  1. 最长公共子序列Lcs (51Nod - 1006)

    20180604   11:28   给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的).   比如两个串为:   abcicba abdkscab   ab是两个串的子序列,ab ...

  2. Linux外在设备的使用

    参考高峻峰 著 循序渐进Linux(第二版) 软盘在linux下对应的设备文件为/dev/fdx.主设备号fd是软盘驱动器(floppydisk)的缩写,次设备号x是软盘驱动器的相应编号.例如,/de ...

  3. vue 数组数据更新或者对象数据更新 但是页面没有同步问题

    1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()

  4. Apache httpd Server 配置正向代理

    背景 代理(Proxy),位于客户端与实际服务端之间,当客户端需要请求服务端内容时,先向代理发起请求,代理将请求转发到实际的服务器,再原路返回.也可以在代理服务器设置缓存,将实际服务器上不常变化的内容 ...

  5. Spring笔记2

    Bean生命周期 1 实例化 2 注入属性 3 BeanNameAware 4 BeanFactoryAware 5 ApplicationContextAware 6 BeanPostProcess ...

  6. Java源码解析——集合框架(三)——Vector

    Vector源码解析 首先说一下Vector和ArrayList的区别: (1) Vector的所有方法都是有synchronized关键字的,即每一个方法都是同步的,所以在使用起来效率会非常低,但是 ...

  7. scala成长之路(6)函数入门

    众所周知,scala作为一门极客型的函数式编程语言,支持的特性包括: 函数拥有“一等公民”身份: 支持匿名函数(函数字面量) 支持高阶函数 支持闭包 部分应用函数 柯里化 首先需要指出,在scala中 ...

  8. 爬虫之requests模块基础

    一.request模块介绍 1. 什么是request模块 - python中原生的基于网络请求的模块,模拟浏览器发起请求. 2. 为什么使用request模块 - urllib需要手动处理url编码 ...

  9. Java+Selenium3方法篇24-单选和多选按钮操作

    Java+Selenium3方法篇24-单选和多选按钮操作 本篇介绍 webdriver处理前端单选按钮的操作.单选按钮一般叫raido button,就像我们在电子版的单选答题过程一样,单选只能点击 ...

  10. Python自动化运维——系统性能信息模块

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:psutil psutil是一个跨平台库,可以很轻松的为我们实现获取系统运行的进程和资源利用率等信息. 功能 ...