下面是一个使用canvas API加JS面向对象的方式编写的一个贪吃蛇的简单实现，实现了穿墙、吃食物后智能加速，还缺少障碍物，地图切换，还有就是太丑了，有兴趣的朋友可以修改一下，我觉得这个还算好扩展，特地贴出来大家讨论研究，算法我写得差劲，权当抛砖引玉之用。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Asphyre</title>
<script>
var AsphyreNode = function(x, y, w, h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.equals = function(node) {
if(this.x === node.x && this.y === node.y)
return true;
return false;
}
};
function Asphyre(farm, x, y, speed, initNodes){ //对贪吃蛇的描述，相当于实现一个蛇类
var self = this;
this.perform = null; //定时器引用
this.speed = speed;
this.speedParam = speed * initNodes; //蛇移动的速度
this.nodeSize = 10; //蛇每一节的大小
this.nodes = []; //节点数
this.initNodes = initNodes;
this.farm = farm;
this.x = x;
this.y = y;
this.direction = 10; //表示向右,初始方向
this.left = -10,this.right = 10;
this.down = 1, this.up = -1;
document.onkeypress = function(event) {
event = event || window.event;
var code = event.keyCode || event.charCode();
var isException = false;
switch(code) {
case 37: //向左
if(self.direction + self.left){
self.direction = self.left;
} else isException = true;
break;
case 38: //向上
if(self.direction + self.up){
self.direction = self.up;
} else isException = true;
break;
case 39: //向右
if(self.direction + self.right){
self.direction = self.right;
} else isException = true;
break;
case 40: //向下
if(self.direction + self.down){
self.direction = self.down;
} else isException = true;
break;
}
if(isException){
alert("方向异常，不能沿反方向后退!");
}
}
};
Asphyre.prototype = {
init: function(){
var self = this, farm = this.farm, x = this.x, y = this.y;
this.nodes = [];
for(var i = 0; i < this.initNodes; i ++) {
this.nodes[i] = new AsphyreNode(this.x - i * 10, this.y, this.nodeSize, this.nodeSize);
}
this.farm.food = this.farm.newFood(this);
this.farm.repaint(this);
},
drawNodes: function(context){ //绘制设身体
var self = this;
context.fillStyle = "#000000";
context.strokeStyle = "#ffffff";
for(var i = 0; i < this.nodes.length; i ++) {
context.fillRect(this.nodes[i].x, this.nodes[i].y, this.nodeSize, this.nodeSize);
context.strokeRect(this.nodes[i].x, this.nodes[i].y, this.nodeSize, this.nodeSize);
}
},
eatFood: function() {//吃食物
var self = this;
self.nodes.unshift(self.farm.food);
self.farm.food = self.farm.newFood(self);
self.refreshSpeed();
},
start: function(){//开始
var self = this;
self.init();
if(!self.perform)
self.perform = setInterval(self.go, self.speed, this);
},
continueRun: function(){ //继续
var self = this;
if(!self.perform)
self.perform = setInterval(self.go, self.speed, this);
},
stop: function(){//结束
var self = this;
if(!!self.perform)
clearInterval(self.perform);
self.perform = null;
self.farm.clear();
},
pause: function() { //暂停
var self = this;
if(!!self.perform)
clearInterval(self.perform);
self.perform = null;
},
go: function(param){//沿着当前方向前进
var self = param;
switch(self.direction) {
case -1: //上
if(self.nodes[0].equals(self.farm.food)) {//吃到食物，少走一步
self.farm.food.y -= self.nodeSize
self.eatFood();
self.farm.repaint(self);
return;
}
var varluable = self.nodes[0].y - self.nodeSize;
if(varluable < 0)
varluable = self.farm.farmElem.height - self.nodeSize
self.nodes.unshift(new AsphyreNode(self.nodes[0].x, varluable, self.nodeSize, self.nodeSize));
self.nodes.pop();
break;
case 1: //下
if(self.nodes[0].equals(self.farm.food)) {//吃到食物，少走一步
self.farm.food.y += self.nodeSize
self.eatFood();
self.farm.repaint(self);
return;
}
var varluable = self.nodes[0].y + self.nodeSize;
if(varluable > self.farm.farmElem.height - self.nodeSize)
varluable = 0;
self.nodes.unshift(new AsphyreNode(self.nodes[0].x, varluable, self.nodeSize, self.nodeSize));
self.nodes.pop();
break;
case -10: //左
if(self.nodes[0].equals(self.farm.food)) {//吃到食物，少走一步
self.farm.food.x -= self.nodeSize
self.eatFood();
self.farm.repaint(self);
return;
}
var varluable = self.nodes[0].x - self.nodeSize;
if(varluable < 0)
varluable = self.farm.farmElem.width - self.nodeSize;
self.nodes.unshift(new AsphyreNode(varluable, self.nodes[0].y, self.nodeSize, self.nodeSize));
self.nodes.pop();
break;
case 10: //右
if(self.nodes[0].equals(self.farm.food)) {//吃到食物，少走一步
self.farm.food.x += self.nodeSize
self.eatFood();
self.farm.repaint(self);
return;
}
var varluable = self.nodes[0].x + self.nodeSize;
if(varluable > self.farm.farmElem.width - self.nodeSize)
varluable = 0;
self.nodes.unshift(new AsphyreNode(varluable, self.nodes[0].y, self.nodeSize, self.nodeSize));
self.nodes.pop();
break;
}
self.farm.repaint(self);
for(var i = 1; i < self.nodes.length; i ++) {
if(self.nodes[0].equals(self.nodes[i])) {//吃到身体，死亡
self.die();
break;
}
}
},
refreshSpeed: function() { //吃到食物后调整速度的算法
var self = this;
this.speed = Math.round(this.speedParam / this.nodes.length);
self.stop();
self.continueRun();
},
die: function() { //蛇咬到自己死了
var self = this, context = this.farm.context;
self.pause();
document.getElementById("pause").disabled = true;
document.getElementById("continue").disabled = true;
document.getElementById("stop").disabled = true;
self.drawOver(context);
},
drawOver: function(context) {
context.save();
context.font="60px impact";
context.fillStyle="#000000";
context.textAlign="center";
context.fillText("GAME OVER!",250,250);
}
};
var Farm = function(farmId){ //对农场的描述，相当于实现农场类
this.farmElem = document.getElementById(farmId);
this.context = this.farmElem.getContext("2d");
this.food = null;
this.init();
};
Farm.prototype = {
init: function(){ //初始化农场
var self = this, farm = this.farmElem, context = this.context;
var w = farm.width,h = farm.height;
context.fillStyle = "#E8FFFF";
context.strokeStyle = "#000000";
context.fillRect(0, 0, w, h);
context.strokeRect(0, 0, w, h)
},
clear: function() { //清理农场
var self = this, farm = this.farmElem, context = this.context;
var w = farm.width,h = farm.height;
context.fillStyle = "#E8FFFF";
context.strokeStyle = "#000000";
context.fillRect(0, 0, w, h);
context.strokeRect(0, 0, w, h)
},
repaint: function(snake) { //重绘农场
var self = this;
self.clear();
self.drowFood(snake);
snake.drawNodes(snake.farm.context);
},
newFood: function(snake) { //农场为蛇生成食物
var x,y;
var flag = true;
k:
while(flag) {
x = Math.round(Math.random() * (this.farmElem.width-10) / 10) * 10;
y = Math.round(Math.random() * (this.farmElem.height-10) / 10) * 10;
for(var i = 0; i < snake.nodes.length; i ++) {
if(snake.nodes[i].x === x && snake.nodes[i].y === y){//食物在蛇的身体上
break k;
}
}
flag = false;
}
return new AsphyreNode(x, y, snake.nodeSize, snake.nodeSize);
},
drowFood: function() { //为毒蛇画饼
this.context.fillStyle = "#FEF045";
this.context.strokeStyle = "#ffffff";
this.context.fillRect(this.food.x, this.food.y, this.food.w, this.food.h);
this.context.strokeRect(this.food.x, this.food.y, this.food.w, this.food.h);
}
}
var Game = function(){ //主程序，用于启动游戏
this.snake = new Asphyre(new Farm("canvas"), 200, 200, 500, 5);
};
Game.prototype = {
start: function(){
this.snake.start();
},
stop: function() {
this.snake.stop();
},
pause: function() {
this.snake.pause();
},
continueRun: function() {
this.snake.continueRun();
}
}
</script>
</head>
<body>
<div id="wrapper" style="text-align: center;">
<canvas id="canvas" width="500"height="500"></canvas><br/>
<input type="button" value="新游戏" id="start"/>
<input type="button" value="继续" id="continue" disabled="true"/>
<input type="button" value="结束" id="stop" disabled="true"/>
<input type="button" value="暂停" id="pause" disabled="true"/>
</div>
<script>
var game = new Game();
document.getElementById("start").onclick = function(){
game.start();
document.getElementById("continue").disabled = true;
document.getElementById("pause").disabled = false;
document.getElementById("stop").disabled = false;
};
document.getElementById("stop").onclick = function(){
game.stop();
document.getElementById("start").disabled = false;
document.getElementById("pause").disabled = true;
document.getElementById("continue").disabled = true;
this.disabled = true;
};
document.getElementById("pause").onclick = function(){
game.pause();
document.getElementById("stop").disabled = true;
document.getElementById("continue").disabled = false;
document.getElementById("start").disabled = false;
this.disabled = true;
};
document.getElementById("continue").onclick = function(){
game.continueRun();
this.disabled = true;
document.getElementById("stop").disabled = false;
document.getElementById("start").disabled = false;
document.getElementById("pause").disabled = false;
};
</script>
</body>
</html>
分享到：
相关推荐
总的来说，这个项目是一个很好的实践JavaScript面向对象编程和游戏开发的实例，通过它你可以提升对JavaScript的理解，同时掌握面向对象设计模式，这对于任何前端开发者来说都是非常宝贵的经验。
《贪吃蛇面向对象版》是一款使用原生JavaScript编写的，基于面向对象编程思想实现的经典游戏。本项目旨在帮助初学者理解面向对象编程的基本概念，同时也为已经熟悉JavaScript的开发者提供了一个有趣的练习案例。 在...
总的来说，HTML5贪吃蛇项目是一个很好的学习资源，它涵盖了HTML5 Canvas的图形绘制、JavaScript的事件处理和动画制作、面向对象编程的设计原则，以及jQuery的便利功能。无论是初学者还是经验丰富的开发者，都能从中...
HTML5 Canvas 是一个基于矢量图形的画布元素，允许开发者通过JavaScript绘制图形。在贪吃蛇游戏中，Canvas用于渲染游戏场景，包括蛇的身体、食物和边界。开发者可以通过 `context.fillRect()` 和 `context.clearRect...
在本项目中，我们讨论的是一个使用纯JavaScript（JS）编写的贪吃蛇小游戏。JavaScript是一种广泛用于网页和网络应用的编程语言，尤其在前端开发领域有着不可或缺的地位。这个小游戏的实现完全依赖于JS，无需其他框架...
JavaScript贪吃蛇游戏是一款经典的基于Web的休闲游戏，它的源码是学习JavaScript编程、游戏开发以及HTML5 Canvas应用的好教材。下面将详细讲解这个项目中的关键知识点。 首先，JavaScript（JS）是网页交互的核心...
【标题】"JS编写的贪吃蛇，无需环境，直接浏览器i打开"揭示了这个项目是使用JavaScript（JS）语言实现的一个经典游戏——贪吃蛇。JavaScript是一种广泛应用于Web开发的编程语言，它允许开发者在浏览器端运行代码，...
原生JS网页贪吃蛇小游戏是一个使用纯JavaScript编写的经典娱乐项目，它展示了JavaScript在创建交互式网页应用方面的强大能力。这款小游戏的核心是利用面向对象编程（OOP）的思想，通过封装、继承和多态等概念来实现...
JavaScript贪吃蛇案例是一个经典的编程练习，用于学习和掌握JavaScript基础以及对象导向编程的概念。在这个案例中，我们可以通过分析和实现这个小游戏来深入理解JavaScript的关键技术。 首先，`案例贪吃蛇.html` 是...
【JS游戏--贪吃蛇】是一款经典的基于JavaScript实现的在线小游戏。JS，即JavaScript，是一种广泛应用于网页和网络应用开发的脚本语言，它在浏览器环境中执行，为用户提供动态交互体验。这款游戏是JavaScript编程能力...
通过学习和实践这个JavaScript贪吃蛇游戏，开发者不仅可以深入理解JavaScript的基础语法和面向对象编程，还能掌握事件处理、DOM操作、动画渲染等关键技能。此外，这个游戏还涉及到基本的算法设计，如队列数据结构...
总结起来，JavaScript贪吃蛇游戏涉及到HTML结构设计、CSS样式布局、JavaScript事件处理、面向对象编程、Canvas绘图以及游戏逻辑实现等多个核心知识点。通过这个项目，开发者不仅可以巩固前端基础，还能提升对游戏...
总结，这个项目展示了如何使用TypeScript和可能的现代游戏开发工具（如LayaAir）来实现一个经典的贪吃蛇小游戏，涵盖了类型系统、面向对象编程、图形绘制、事件处理、状态管理等多个核心编程概念。通过这个项目，...
在Java编程语言中，"java版简单贪吃蛇"是一个基础级别的项目，旨在教授初学者如何用面向对象编程思想来实现经典游戏——贪吃蛇。这个项目由三个核心文件组成，通常包括主类、蛇类（Snake）以及食物类（Food）。下面...
4. **JavaScript**：JavaScript通常用于网页开发，可以结合HTML5的Canvas API来创建贪吃蛇游戏。JavaScript源码可以帮助你学习如何在浏览器环境中实现动态图形和用户交互。 5. **C#**：C#与Unity引擎配合良好，常...
在本项目中，“原生js练习：”贪吃蛇“小项目”是一个旨在帮助初学者提升JavaScript技能的实践练习。这个项目包含HTML、CSS和JavaScript三个主要部分，它们共同构建了一个经典的“贪吃蛇”游戏。以下是这个项目涉及...
利用JavaScript中的对象或者类（在面向对象编程语言中）可以有效地管理这些游戏元素。 4. **事件处理（Event Handling）**：游戏需要响应用户的键盘输入，这就涉及到事件监听和处理。例如，在JavaScript中，我们...
使用面向对象编程，创建相关的类，如`Snake`、`Food`、`GameBoard`等。 7. **优化和扩展**： 进一步，可以添加难度等级、多蛇对战模式、自定义皮肤等功能，提高游戏的趣味性和挑战性。 总结，贪吃蛇小游戏的开发...
总结起来，这个原生JavaScript实现的贪吃蛇案例是一个很好的学习平台，它涵盖了JavaScript的基础语法、面向对象编程、事件处理、DOM操作和Canvas绘图等多个核心知识点。通过这个案例，初学者不仅可以掌握JavaScript...