JavaScript简单贪吃蛇,基本面向对象

最新推荐文章于 2022-02-10 20:11:07 发布
最新推荐文章于 2022-02-10 20:11:07 发布
阅读量131 收藏
点赞数
分类专栏： Javascript 文章标签： html javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pcenshao_csto/article/details/83978923
版权
没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.

以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.

回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.

作者:pcenshao
转载请注明来自:
http://blog.csdn.net/pywepe


程序包括一个html文件:snake.html和一个js文件:snake.js

snake.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript简单贪吃蛇</title>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" >
$s(function(){
$s.SnakeContext.init();
});
</script>
</head>
<body>
<div id="headLocation"></div>
<div id="keyup"></div>
</body>
</html>

snake.js:

/*
* JavaScript简单贪吃蛇.基本面向对象.
* 规则:
* 1.没有墙,左与右连接,上与下连接.
* 2.当蛇头碰撞到自身时死亡.
* 兼容性:
* 完全支持Firefox,Chrome
* 基本支持IE(除了调试部分)
*
* 作者:pcenshao
* 转载请注明来自:
* http://blog.csdn.net/pywepe
* http://pcenshao.taobao.com
*/
(function(){

$s = function(){
if(arguments.length == 1){
if(typeof arguments[0] == "string"){
return document.getElementById(arguments[0]);
}else if(typeof arguments[0] == "function"){
window.onload = arguments[0];
}
}
};

$s.UNIT_WIDTH = 10; // 单元的宽度
$s.UNIT_HEIGHT = 10;
$s.PANEL_WIDTH = 30; // 逻辑宽度
$s.PANEL_HEIGHT = 20; // 逻辑高度
$s.STEP = 250 ; // 每一步的时间
$s.HEAD_COLOR = "red"; // 蛇头颜色
$s.BODY_COLOR = "black"; // 蛇体颜色
/*
* 食物的颜色
*/
$s.COLORS = ["blue","green","#494e8f","#905d1d","#845538","#77ac98","#8552a1"];

/*
* 调试相关
* $s.DEBUG 调试信息显示开关
* $s.KEY_UP_DIR_ID 监视方向键的结点id,若不存在,则不显示
* $s.HEAD_LOCATION_ID 监视蛇头位置的结点id,若不存在,则不显示
*/
$s.DEBUG = false;
$s.KEY_UP_DIR_ID = "keyup";
$s.HEAD_LOCATION_ID = "headLocation";

$s.Dir = { // 代表方向,强制以$s.Dir.UP方法调用,避免参数错误
UP : {},
DOWN : {},
LEFT : {},
RIGHT : {},
NONE : {}
};

$s.State = { // 代表状态
STOP : {},
RUNNGIN : {},
PAUSE : {}
};

$s.Unit = function(){ // 一个单元格,用MVC的眼光看,Unit是模型,UnitView是视图
this.x = 0;
this.y = 0;
this.view = new $s.UnitView();
this.view.unit = this;
this.color = $s.BODY_COLOR;
};
$s.Unit.prototype.repaint = function(){
if(this.view != null){
this.view.repaint(); // 通知重绘
}
};

$s.Snake = function(){
this.units = [];
};

$s.Snake.prototype.init = function(dir,count){
var x = 5;
var y = 5;
for(var i = 0 ; i < count ; i ++){
var u = new $s.Unit();
u.x = x ;
u.y = y ++;
this.units.push(u);
if(i == (count - 1 )){
u.color = $s.HEAD_COLOR;
}
u.repaint();
}
};

$s.Snake.prototype.crash = function(x,y){ // 传入头部的位置,返回true表示碰撞自身
for(var i = this.units.length - 2 ; i >= 0 ; i --){ // 不包括头自身
var u = this.units[i];
if(u.x == x && u.y == y){
return true;
}
}
return false;
};

$s.Snake.prototype.go = function(){
// 判断前方是否有食物
// 是否撞墙
var _x = 0 , _y = 0;
var head = this.units[this.units.length - 1];
_x = head.x;
_y = head.y;
var dir = $s.SnakeContext.dir;

if(this.crash(_x,_y)){ // 判断是否碰撞到自身
$s.SnakeContext.stop();
$s.SnakeContext.ondead(); // 触发dead事件
return;
}

if(dir == $s.Dir.LEFT){
_x --;
}else if(dir == $s.Dir.RIGHT){
_x ++;
}else if(dir == $s.Dir.UP){
_y --;
}else if(dir == $s.Dir.DOWN){
_y ++;
}

// 实现左右连接,上下连接
if(_x >= $s.PANEL_WIDTH){
_x = 0;
}
if(_x < 0){
_x = $s.PANEL_WIDTH - 1;
}
if(_y >= $s.PANEL_HEIGHT){
_y = 0;
}
if(_y < 0){
_y = $s.PANEL_HEIGHT - 1;
}

var h = new $s.Unit(); // 新头
if($s.SnakeContext.hasFood(_x,_y)){ // 下一步碰到食物
this.eat(_x,_y);
head = this.units[this.units.length - 1]; // 因为eat方法可以改变头部,所以重新获取
_x = head.x;
_y = head.y;

if(dir == $s.Dir.LEFT){
_x --;
}else if(dir == $s.Dir.RIGHT){
_x ++;
}else if(dir == $s.Dir.UP){
_y --;
}else if(dir == $s.Dir.DOWN){
_y ++;
}
head.color = $s.HEAD_COLOR;
head.repaint();
var oldHead = this.units[this.units.length - 2];
oldHead.color = $s.BODY_COLOR;
oldHead.repaint();
return;
}

var tail = this.units.shift();
$s.NodePool.releaseNode(tail);

h.x = _x;
h.y = _y;
this.units.push(h);

for(var i = this.units.length - 1; i >= 0; i --){
var u = this.units[i];
if(i == (this.units.length - 1)){ // 头
u.color = $s.HEAD_COLOR;
}else{
u.color = $s.BODY_COLOR;
}
u.repaint();
}

};

$s.Snake.prototype.eat = function(x,y){
var food = $s.SnakeContext.food;
if(food != null){
food.alive = false;
this.units.push(food.unit);
$s.SnakeContext.oneat();
}else{
alert("error:no food on (" + x + "," + y + ")");
}
}

/*
* 随机数产生器,提供简便的方法
*/
$s.Random = {
randomNumber : function(lower,upper){ // 返回区间[lower,upper]的整数
var choices = upper - lower + 1;
return Math.floor(Math.random() * choices + lower); // value = Math.floor(Math.random() * 可能值的个数 + 第一个可能的值)
},
randomLocation : function(maxX,maxY){
var x = $s.Random.randomNumber(0,maxX);
var y = $s.Random.randomNumber(0,maxY);
return {x:x,y:y};
}
};

$s.Food = function(x,y){ // 代表食物,由一个Unit表示
this.unit = new $s.Unit();
this.unit.x = x;
this.unit.y = y;
var color = $s.COLORS[$s.Random.randomNumber(0,$s.COLORS.length - 1)];
this.unit.color = color;
this.alive = true;

this.unit.repaint();
};
$s.Food.prototype.locateOn = function(x,y){
return this.unit.x == x && this.unit.y == y;
};

/*
* HTML结点池,主要目的是提高效率
* 因为snake的移动是通过删除尾部结点并向头部添加结点实现的,
* 在这个过程中会有大量的结点创建操作,为了操作效率,所以对结点进行池化管理.
* 尾部的结点不删除,而是隐藏,需要结点时可以重用之
*/
$s.NodePool = {
nodes : []
};
$s.NodePool._findHideNode = function(){ // 查找隐藏的div结点
for(var i = 0 ; i < this.nodes.length ; i ++){
var n = this.nodes[i];
if(n.style.display == "none"){
return n;
}
}
return null;
};
$s.NodePool.createNode = function(){
var pooledNode = this._findHideNode();
if(pooledNode != null){
return pooledNode;
}else{
var newNode = document.createElement("div");
this.nodes.push(newNode);
return newNode;
}
};
$s.NodePool.releaseNode = function(node){
if(node != undefined && node != null){
if(node instanceof $s.Unit){
var view = node.view;
if(view != null){
var div = view.node;
div.style.display = "none";
}
}
}
}

$s.UnitView = function(){ // Unit的视图
this.unit = null;
this.node = null;
};
$s.UnitView.prototype.repaint = function(){
if(this.node == null){ // 初始化
var tag = $s.NodePool.createNode();
tag.style.width = $s.UNIT_WIDTH + "px";
tag.style.height = $s.UNIT_HEIGHT + "px";
tag.style.borderStyle = "dotted";
tag.style.borderWidth = "1px";
tag.style.borderColor = "white";
tag.style.margintLeft = "1px";
tag.style.marginRight = "1px";
tag.style.marginTop = "1px";
tag.style.marginBottom = "1px";
tag.style.backgroundColor = this.unit.color; // 颜色由模型Unit指定
tag.style.position = "absolute"; //容器的position指定为relative,孩子的position指定为absolute时,表示孩子相对容器绝对定位.

tag.style.display = "block"; // 重要,因为从NodePool取现的结点是隐藏状态的

var x = this.unit.x * $s.UNIT_WIDTH;
var y = this.unit.y * $s.UNIT_HEIGHT;
tag.style.top = y + "px";
tag.style.left = x + "px";

this.node = tag;
$s.SnakeContext.panelView.append(this);
}else{
var tag = this.node;

var x = this.unit.x * $s.UNIT_WIDTH;
var y = this.unit.y * $s.UNIT_HEIGHT;
tag.style.top = y + "px";
tag.style.left = x + "px";
tag.style.backgroundColor = this.unit.color;
}
};

$s.PanelView = function(){ // 整个游戏区域,包括按钮区
var panel = document.createElement("div");
panel.style.width = ($s.PANEL_WIDTH * $s.UNIT_WIDTH ) + "px";
panel.style.height = ($s.PANEL_HEIGHT * $s.UNIT_HEIGHT ) + "px";
panel.style.borderStyle = "dotted";
panel.style.borderColor = "red";
panel.style.borderWidth = "1px";
panel.style.marginLeft = "auto";
panel.style.marginRight = "auto";
panel.style.marginTop = "50px";
panel.style.position = "relative"; // 容器的position指定为relative,孩子的position指定为absolute时,表示孩子相对容器绝对定位.
panel.style.marginBottom = "auto";
this.node = panel;
document.body.appendChild(panel);

var len = document.createElement("div");
len.style.marginLeft = "auto";
len.style.marginRight = "auto";
len.style.marginBottom = "20px";
len.style.color = "gray";
len.style.fontSize = "12px";
len.innerHTML = "长度:";
document.body.appendChild(len);
$s.SnakeContext._len = len;

var startBn = document.createElement("button");
startBn.innerHTML = "开始";
startBn.style.marginLeft = "10px";
startBn.onclick = function(){
$s.SnakeContext.run();
};
$s.SnakeContext._startBn = startBn;
document.body.appendChild(startBn);

var pauseBn = document.createElement("button");
pauseBn.innerHTML = "暂停";
pauseBn.style.marginLeft = "10px";
pauseBn.onclick = function(){
$s.SnakeContext.pause();
};
$s.SnakeContext._pauseBn = pauseBn;
document.body.appendChild(pauseBn);

/*
var stopBn = document.createElement("button");
stopBn.innerHTML = "停止";
stopBn.style.marginLeft = "10px";
stopBn.onclick = function(){
$s.SnakeContext.stop();
};
$s.SnakeContext._stopBn = stopBn;
document.body.appendChild(stopBn);
*/

var restartBn = document.createElement("button");
restartBn.innerHTML = "重新开始";
restartBn.style.marginLeft = "10px";
restartBn.onclick = function(){
window.location.href = window.location.href;
};
$s.SnakeContext._restartBn = restartBn;
document.body.appendChild(restartBn);

var line = document.createElement("div");
line.style.height = "10px";
document.body.appendChild(line);

var span = document.createElement("span");
span.style.color = "gray";
span.style.fontSize = "12px";
span.innerHTML = "调试";
document.body.appendChild(span);

var debug = document.createElement("input");
debug.type = "checkbox";
debug.checked = $s.DEBUG;
debug.onchange = function(){
$s.SnakeContext.setDebug(debug.checked);
};
document.body.appendChild(debug);

};
$s.PanelView.prototype.append = function(unitView){
try{
this.node.appendChild(unitView.node);
}catch(e){
alert(e);
}
};

/*
* 全局环境类,代表应用
* 约定以_开头的成员为私有成员
* 启动程序的方法:
* window.onload = function(){
* $s.SnakeContext.init();
* }
*/
$s.SnakeContext = {
dir : $s.Dir.NONE,
state : $s.State.STOP,
goTimer : null,
run : function(){
if(this.state != $s.State.RUNNGIN){
this.state = $s.State.RUNNGIN;
this.goTimer = window.setInterval(function(){
$s.SnakeContext.updateFood();
$s.SnakeContext.snake.go();
},$s.STEP);
}

},
stop : function(){
this._setState($s.State.STOP);
},
pause : function(){
this._setState($s.State.PAUSE);
},
_setState : function(s){
if(this.state != s && this.goTimer != null){
window.clearInterval(this.goTimer);
this.goTimer = null;
this.state = s;
}
},
getFood : function(x,y){
for(var f in this.foods){
if(f.x == x && f.y == y){
return f;
}
}
return null;
},
init : function(){
this.panelView = new $s.PanelView();
this.snake = new $s.Snake();
this.dir = $s.Dir.DOWN;
this.snake.init($s.Dir.UP,3);
this._len.innerHTML = "长度:" + 3;

document.body.onkeyup = function(e){
var code = null;
if(window.event){ // fuck的IE
code = window.event.keyCode;
}else{
code = e.keyCode;
}
var str = "";
var oldDir = $s.SnakeContext.dir;
switch(code){
case 37: // left
if($s.SnakeContext.dir != $s.Dir.RIGHT){
$s.SnakeContext.dir = $s.Dir.LEFT;
}
str = "left";
break;
case 38 : // up
if($s.SnakeContext.dir != $s.Dir.DOWN){
$s.SnakeContext.dir = $s.Dir.UP;
}
str = "up";
break;
case 39: // right
if($s.SnakeContext.dir != $s.Dir.LEFT){
$s.SnakeContext.dir = $s.Dir.RIGHT;
}
str = "right";
break;
case 40: // down
if($s.SnakeContext.dir != $s.Dir.UP){
$s.SnakeContext.dir = $s.Dir.DOWN;
}
str = "down";
break;
}
if($s.SnakeContext.dir != oldDir){
if($s.DEBUG){
var v = $s($s.KEY_UP_DIR_ID);
if(v){
v.innerHTML = "方向键:" + str;
}
}

if($s.SnakeContext.goTimer != null){
window.clearInterval($s.SnakeContext.goTimer);
$s.SnakeContext.goTimer = null;
}
$s.SnakeContext.snake.go();
$s.SnakeContext.goTimer = window.setInterval(function(){
$s.SnakeContext.updateFood();
$s.SnakeContext.snake.go();
},$s.STEP);
}
};

var loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1, $s.PANEL_HEIGHT - 1);
this.food = new $s.Food(loc.x,loc.y);

},
snake : null,
foods : [],
panelView : null,
food : null,
updateFood : function(){
if(this.food.alive){ // 当前Food还存活
return;
}
var loc = null;
do{

// 随机产生一个点,直到不Snake重叠
loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1,$s.PANEL_HEIGHT - 1);
}while(this.overlap(loc));
this.food = new $s.Food(loc.x,loc.y);

},
overlap : function(loc){ // 检查是否与Snake重叠,当重叠时返回true
var x = loc.x;
var y = loc.y;
for(var i = 0 ; i < this.snake.units.length ; i ++ ){
var u = this.snake.units[i];
if(u.x == x && u.y == y){
return true;
}
}
return false;
},
hasFood : function(x,y){
if($s.DEBUG){
var xt = $s($s.HEAD_LOCATION_ID);
if(xt){
xt.innerHTML = "头部位置:(" + x + "," + y + ")";
}
}
return this.food.locateOn(x,y);
},
setDebug : function(enable){
if(enable != $s.DEBUG){
$s.DEBUG = enable;
if($s.DEBUG){ // 显示
var i = $s($s.KEY_UP_DIR_ID);
$s.SnakeContext._show(i);
i = $s($s.HEAD_LOCATION_ID);
$s.SnakeContext._show(i);
}else{ // 隐藏
var i = $s($s.KEY_UP_DIR_ID);
$s.SnakeContext._hide(i);
i = $s($s.HEAD_LOCATION_ID);
$s.SnakeContext._hide(i);
}
}
},
_show : function(tag){
if(tag){
tag.style.display = "block";
}
},
_hide : function(tag){
if(tag){
tag.style.display = "none";
}
},
ondead : function(){ // Snake死亡时回调
if(this._startBn){
this._startBn.disabled = true;
}
if(this._pauseBn){
this._pauseBn.disabled = true;
}
if(this._stopBn){
this._stopBn.disabled = true;
}
alert("挂了");
},
oneat : function(){ // Snake长度增加时回调
this._len.innerHTML = "长度:" + this.snake.units.length;
},
_startBn : null,
_pauseBn : null,
_stopBn : null,
_restartBn : null,
_len : null
};

})();

[img]http://hi.csdn.net/attachment/201107/23/0_1311441660Zp2m.gif[/img]

计算机 二手书 经典
[url]http://pcenshao.taobao.com[/url]
pcenshao_csto
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用jquery编写贪吃蛇小游戏
weixin_42535010的博客
03-31 366
如何使用jquery编写贪吃蛇小游戏首先利用canvas创建画布给canvas设置一个小样式并链入jqueryCDN创建画布检测浏览器是否兼容canvas利用面向对象定义x,y,宽，高以及颜色创建蛇的对象循环创建身体添加蛇的公有属性画蛇的方法让蛇动起来首先检测碰到墙壁再检测蛇头与蛇身添加键盘监听随机产生食物产生随机函数判断矩形是否重合调用绘制图像 首先利用canvas创建画布 <canvas...
TypeScript实战 -- 贪吃蛇游戏(1)--项目简介与具体实现、实现食物类和计分板类
欢迎来到iceseasyh的博客
04-20 1052
TypeScript实战 – 贪吃蛇(1) 目的 使用typescript以及面向对象的方式编写简易版贪吃蛇的项目，实现：蛇自主移动，吃到食物检测并增加身体长度，食物随机生成，计分板，撞墙检测，键盘事件检测等基本功能。 界面 分析 总体来说，整个游戏中所含的对象可以分为四个：蛇(Snake)，食物(Food)，计分板(Scoreboard)，游戏控制器(GameController)。 Snake：获取与设置蛇身体部分的位置，移动身体，增加长度，处理撞墙 Food：获取与设置食物位置，随机改变位置 S
JavaScript面向对象编程小游戏—贪吃蛇代码实例
11-26
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块 1-2 维护非常方便并且成本较低。 ​2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序–贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.  该小Demo已上传GitHub,欢迎下载!  觉得好的话,随手给个star,  您的star是我最大的动力! https://github.com/XingJYGo/snakePlay#javascript-经典面
原生JavaScript利用面向对象的思想实现贪吃蛇案例
m0_46084075的博客
04-19 484
一. 原生JS面向对象思想实现贪吃蛇 1.1 功能演示 本次给大家带来的是一款网页的小游戏，贪吃蛇的写法，而且本次贪吃蛇是基于JavaScript面向对象的思想来编写的，使用的是原生JS的方式实现 下面我就来给大家讲解，怎么运用面向对象的思想来编写这款贪吃蛇小游戏 老规矩先来看看运行的gif图片 里面包含里几个功能 开始功能 结束功能 重新开始功能 模式切换功能 碰到边线游戏结束 咬到自己游戏结束 生成的食物不会出现在蛇身上 这个贪吃蛇主要就包含了这几个功能，下面就来讲解一下怎么运用面向对象的思想来编
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1585
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
javascript贪吃蛇(面向对象)
01-05
JavaScript贪吃蛇是一款基于面向对象编程的经典小游戏，它利用了HTML、CSS和JavaScript技术来实现。在这个项目中，我们将深入探讨JavaScript的面向对象特性以及如何应用于游戏开发。 首先，JavaScript是一种支持...
js 贪吃蛇（面向对象）
08-01
总结来说，"js 贪吃蛇（面向对象）"案例提供了学习和实践JavaScript面向对象编程的好机会。通过分析和实现这个案例，开发者可以深入理解面向对象的设计原则，提高代码复用和维护性，同时也能体会到面向对象编程在...
小游戏JavaScript面向对象编程贪吃蛇
08-10
在本项目"小游戏JavaScript面向对象编程贪吃蛇"中，我们将深入探讨如何使用JavaScript进行面向对象编程，来实现经典的贪吃蛇游戏。面向对象编程（Object-Oriented Programming, OOP）是编程的一种范式，它将程序设计...
贪吃蛇面向对象版.rar
04-30
《贪吃蛇面向对象版》是一款使用原生JavaScript编写的，基于面向对象编程思想实现的经典游戏。本项目旨在帮助初学者理解面向对象编程的基本概念，同时也为已经熟悉JavaScript的开发者提供了一个有趣的练习案例。 在...
javascript贪吃蛇 （附带百度网盘链接）
weixin_45851686的博客
09-11 3705
这里贪吃蛇游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js）， 蛇行为类（Snake.js），食物类(Food.js)，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行) 贪吃蛇：链接：https://pan.baidu.com/s/1_gfxQOWZ5ktZXLARzcn6fA 提取码：672a 游戏页面： 1.html&css页面搭建： index.html: <!DOCTYPE html> <ht...
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
JS实战面向对象 - 贪吃蛇
这个世界上有各种各样的人.
11-29 7381
一、贪吃蛇效果图 二、贪吃蛇分析 2.1 开始游戏功能 当用户进入游戏主界面时，可在界面中下方显眼的位置找到“start”按钮，点击后用户可进行新游戏。获取button变量，给它添加一个addEventListener('click', function() {})点击事件。 btnstart.addEventListener('click', function() { btnstart.style.display = 'none'; //调用中介类 gam.
贪吃蛇游戏(java)（全注释）
qq_59700927的博客
02-10 4905
经典小项目贪吃蛇游戏java~~，这个应该是比较详细的
js贪吃蛇，面向对象
宋三丝的专栏
03-08 2960
最近比较忙，花在js上的时间很少了，最近要多看看java和数据结构了，毕设也要开始做了，抽空写了上回未完成的js版的贪吃蛇，现在在写思路比较顺畅了，很快就写出了，程序本身并不重要，写这样的小程序可以加深对js作用域，闭包，对象，等等基本概念的理解，这个程序比较差的一点是完全不用生成一个Food对象，这样慢慢js中的对象会很多，但这样写是为了可以创建出不同种类的食物（双倍分数食物，闪烁食物），当然，
javascript实现简单的贪吃蛇游戏
42384718的博客
08-24 191
js代码： <script> var map; //地图 var snake; //蛇 var food; //食物 var timer; //定时器 var initSpeed = 200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度 var nowSpeed = initSpeed; //游戏进行时蛇移动速度 var grade = 0; //积分 v
js面向对象实现简单的贪吃蛇
qq_19126341的博客
04-16 1007
前言 自从流行前后端分离后，目前看来前后端各自在自己的道路上越走越远。笔者是一个java程序员，大部分时间在写后台。前一段由于各种原因接触了vue+elementUI实现的这种spa(不是足疗)应用。spa指的是单页面应用，我理解就是通过工具把js,css,字体等资源全部打包到一个js中。是刚开始也是一头雾水,通过不断学习，最终一一攻克。我的学习路线是先学习了javascript面向对象（这里不探...
JavaScript实现简易贪吃蛇（面向对象的方式）
老曹的博客
06-07 1352
简易贪吃蛇JavaScript实现贪吃蛇游戏游戏分析面向对象编程思想（来自百度百科）对象游戏中的对象js如何实现面向对象实现地图的显示随机数对象random食物对象food蛇对象snake游戏对象Game实例化游戏对象并初始化游戏测试后续优化 第一次写博客，记录自己的学习，也为了方便日后可以复习，不积跬步无以至千里，加油！ 贪吃蛇游戏 这是一个简单版的贪吃蛇游戏，主要练习面向对象编程思想，方便...
js实现简单的贪吃蛇游戏
菜鸟要努力鸭的博客
02-25 573
  主要就是运用面向对象的思想来解决贪吃蛇的游戏。思路也不是很难，创建三个对象，食物，蛇还有游戏(用于游戏的初始化控制等)。采用改进的工厂模式创建对象，再利用原型创建公共方法。 1.食物有坐标(x,y),宽,高还有颜色五个属性。有初始化的方法(随机出现在地图上)。用自调用函数封装，然后把构造函数赋给windows,使得可以全局调用创建对象 //自调用函数food (function () {...
贪吃蛇C++面向对象游戏设计思路
最新发布
06-11
好的，关于贪吃蛇C++面向对象游戏设计思路，我可以提供以下几个方面的思路： 1. 游戏规则设计 在设计贪吃蛇游戏时，需要先确定游戏规则。比如，蛇的移动方式、食物的生成和吃掉后的效果、碰到障碍物的反应等。这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值