最近比较长一段时间都在学习js,也不知道自己学的怎么样,借这个游戏练练手,第一次写,虽然非常简陋,但还算能玩,小小满足一下继续努力,hoho!
<head>
<meta content-type="text/html;charset=utf-8"/>
<script >
Game = {
BlockWidth : 20,
GameState :"pause",
Map : {
init : function(left,top,width,height,foodNum){
this.food = [];
this.foodNum = foodNum;
this.left = left;
this.top = top;
this.width = width;
this.height = height;
this.instance = document.createElement("div");
this.instance.setAttribute("id","map");
this.instance.style.offsetLeft = left;
this.instance.style.offsetTop = top;
//this.instance.style.offsetWidth = width;
//this.instance.style.offsetHeight = height;
this.instance.style.width = width;
this.instance.style.height = height;
this.instance.style.backgroundColor = "gray";
document.getElementById("adiv").appendChild(this.instance);
},
createOrRefreshFood: function(){
var foodPosLeft,foodPosTop;
for(var i=0;i<this.foodNum;i++){
if(!this.food[i]){
this.food[i] = Game.Food.create(Game.BlockWidth,Game.BlockWidth,"red");
this.instance.appendChild(this.food[i]);
}
foodPosLeft = 0.5*(0.75+Math.random())*this.width + this.left;
foodPosTop = 0.5*(0.75+Math.random())*this.height + this.top;
this.food[i].style.left = foodPosLeft;
this.food[i].style.top = foodPosTop;
}
}
},
Food : {
create : function(width,height,color){
this.width = width;
this.height = height;
this.color = color;
this.instance = document.createElement("div");
this.instance.style.position = "absolute";
this.instance.style.zIndex = "9";
this.instance.style.width = width;
this.instance.style.height = height;
this.instance.style.backgroundColor = color;
return this.instance;
}
},
Snack : {
init: function(foodNum){
this.foodNum = foodNum;
this.foodNumOfEat = 0;
this.instance = [];
this.derect = -1; // -1 = left,1=right,-2=up,2=down
this.instance[0] = document.createElement("div");
this.instance[0].style.position = "absolute";
this.instance[0].style.backgroundColor = "black";
this.instance[0].style.zIndex = "9";
this.instance[0].style.width = Game.BlockWidth;
this.instance[0].style.height = Game.BlockWidth;
this.instance[0].style.left = 200;
this.instance[0].style.top = 200;
this.tail = null;
this.instance[0].style.border = "2px solid white";
Game.Map.instance.appendChild(this.instance[0]);
for(var i=1;i<foodNum;i++){
this.instance[i] = this.instance[0].cloneNode(true);
this.instance[i].style.width = Game.BlockWidth;
this.instance[i].style.height = Game.BlockWidth;
this.instance[i].style.left = (parseInt(this.instance[i-1].style.left)+ Game.BlockWidth);
this.instance[i].style.top = 200;
this.instance[i].style.backgroundColor = "black";
this.instance[i].style.border = "2px solid white";
//this.instance[i].style.borderColor = "red";
Game.Map.instance.appendChild(this.instance[i]);
}
},
move:function(derect){
if(derect + this.derect!=0){
this.derect = derect;
}
var head = {};
head.left = parseInt(this.instance[0].style.left);
head.top = parseInt(this.instance[0].style.top);
switch (this.derect){
case -1:{
this.instance[0].style.left = parseInt(this.instance[0].style.left)-Game.BlockWidth;
break;
}
case 1:{
this.instance[0].style.left = parseInt(this.instance[0].style.left)+Game.BlockWidth;
break;
}
case -2:{
this.instance[0].style.top = parseInt(this.instance[0].style.top)-Game.BlockWidth;
break;
}
case 2:{
this.instance[0].style.top = parseInt(this.instance[0].style.top)+Game.BlockWidth;
break;
}
}
if(this.tail!=null){
this.foodNum++;
}
if(this.foodNum>1){
for(var i=this.foodNum-1;i>1;i--){
this.instance[i].style.left = this.instance[i-1].style.left;
this.instance[i].style.top = this.instance[i-1].style.top;
}
if(this.tail!=null){
Game.Map.instance.appendChild(this.tail);
this.tail = null;
}
this.instance[1].style.left = head.left;
this.instance[1].style.top = head.top;
}
if(this.isFull()){
clearInterval(Game.timing);
alert("you win!");
}else if(this.isDead()){
clearInterval(Game.timing);
window.onkeydown = null;
alert("you fail");
}else{
this.eat();
}
},
eat : function(){
var map = Game.Map;
var head = this.instance[0];
for(var i=0;i<map.food.length;i++){
if(Math.abs(parseInt(this.instance[0].style.left)-parseInt(map.food[i].style.left))<=15
&& Math.abs(parseInt(this.instance[0].style.top)-parseInt(map.food[i].style.top))<=15) {
//alert("eat!");
this.tail = this.instance[this.instance.length] = this.instance[0].cloneNode(true);
var foodEated = map.food[i];
for(var j=i+1;j<map.food.length;j++){
map.food[j-1] = map.food[j];
}
map.food.length--;
foodEated.parentNode.removeChild(foodEated);
this.foodNumOfEat++;
break;
}
}
if(map.food.length<=0){
map.createOrRefreshFood(map.foodNum);
}
},
isFull : function(){
//alert(this.foodNumOfEat);
return this.foodNumOfEat >= 15;
},
isDead : function(){
var map = Game.Map;
if(
parseInt(this.instance[0].style.left) <= map.left
|| parseInt(this.instance[0].style.left) >= (map.left+map.width)
|| parseInt(this.instance[0].style.top) <= map.top
|| parseInt(this.instance[0].style.top) >= (map.top + map.height) ) {
return true;
}
for(var i=1;i<this.foodNum;i++){
if(this.instance[0].style.left == this.instance[i].style.left
&& this.instance[0].style.top == this.instance[i].style.top){
return true;
}
}
}
},
GameStart :function(){
this.Map.init(0,0,1000,600,1);
this.Map.createOrRefreshFood();
this.Snack.init(6);
var gameItsSelf = this;
//if(!window.onkeydown){
// window.onkeydown = document.body.onkeydown;
//}
//alert(document.body.onkeydown);
window.onkeydown = document.body.onkeydown = function(event){
event = window.event||event;
var keyCode = event.keyCode;
//alert(keyCode);
if(keyCode==32){
if(Game.GameState=="pause"){
Game.GameState = "alive";
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,Game.Snack.derect),100);
}else{
Game.GameState = "pause";
window.clearInterval(Game.timing);
}
}else if(Game.GameState =="alive"){
var tempDirect = Game.rederect;
switch (keyCode) {
case 37:{
tempDirect = -1;
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),100)
break;
}
case 38:{
tempDirect = -2;
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),100)
break;
}
case 39:{
tempDirect = 1;
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),100)
break;
}
case 40: {
tempDirect = 2;
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),100)
break;
}
default :
break;
}
}
}
}
}
function bindParamsToFun(obj,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
fun.apply(obj,args);
};
}
window.onload = function(){
Game.GameStart();
}
//window.onload = function(){
// alert(document.getElementById("theBody"));
//}
</script>
</head>
<body id="theBody">
<div id="adiv" width="1000" height="1000"></div>
</body>
分享到：
相关推荐
【Win32简陋版贪吃蛇】是一个基于Windows 32位API开发的简易版经典游戏——贪吃蛇。这款游戏通常用C++语言编写，利用Windows编程接口来实现图形界面和用户交互。在Win32 API中，开发者可以调用一系列函数来创建窗口...
贪吃蛇代码，没写注释，但是程序的函数名可以很容易知道是什么意思
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 技术，结合C#编程语言，实现一个简陋版的贪吃蛇游戏。WPF是.NET Framework的一部分，为构建具有丰富用户界面的桌面应用程序提供了强大的...
自己用java写的一个贪吃蛇小程序，100来行代码，简单易懂~~~学习java的可以用来做个很好的参考~~~
在本项目中，我们讨论的是一个使用C#编程语言实现的经典小游戏——贪吃蛇。贪吃蛇游戏是一款风靡全球的简单却极具挑战性的游戏，它最初出现在早期的电子设备上，现在则被广泛移植到各种平台，包括PC、移动设备和网页...
【网络版贪吃蛇（Java）】是一款基于Java编程语言实现的在线多人游戏，它将经典的游戏模式——贪吃蛇，与现代网络技术相结合，使得玩家可以通过互联网进行实时对战。这款程序的核心特点在于它的多线程处理和Java ...
jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...
一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip 一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip 一个java版的贪吃蛇游戏.zip一个java版的...
QT版贪吃蛇是一款基于Qt框架开发的经典游戏，它的核心在于使用C++语言与Qt库进行编程，将贪吃蛇游戏的功能实现并封装为一个独立的类。在这款升级版中，开发者已经优化了代码结构，使得游戏的生成、设置和运行更加...
贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易...
Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏....
《Q版贪吃蛇源码解析与学习指南》 贪吃蛇是一款经典的电子游戏，以其简单易上手、趣味性强的特点深受玩家喜爱。本篇将深入解析基于Cocos2d-x框架开发的Q版贪吃蛇源码，帮助读者了解其背后的编程原理和技术实现。 ...
【标题】"C语言多功能高级版贪吃蛇"是一个基于C语言编程的项目，它将经典游戏贪吃蛇提升到了一个更高的层次，可能包含了更复杂的功能和优化的算法。在C语言的基础上，开发者可能利用了指针、结构体、循环、条件判断...
8. **代码组织**：一个良好的项目结构是关键，代码可能会被组织成多个类，如Snake类、Food类和Game类，每个类负责不同的功能，遵循面向对象编程的原则。 通过分析这个个人编写的贪吃蛇代码，我们可以学习到如何用...
很久以前自己用c++在vs2008下实现的一个贪吃蛇游戏， 框架用的是win32， 绘图用的是简单的windows GDI， 用到了双画面缓冲， 很适合学游戏开发的初学者， 代码风格一般般， 如果有什么地方写得不好的话， 欢迎大家...
【标题】"用C#写的贪吃蛇"是一款基于C#编程...总的来说，"用C#写的贪吃蛇"项目是一个结合了C#编程、游戏逻辑、多媒体处理和用户交互的综合实践案例，对于学习C#和游戏开发的初学者来说，这是一个很好的学习和参考资源。
vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的...
用python写一个贪吃蛇小游戏，只需要短短十几行代码，就可以写出一个贪吃蛇小游戏
标题中的“API写的贪吃蛇，VC++6.0”指的是使用Windows API（Application Programming Interface）来编写的一个经典游戏——贪吃蛇，该程序是在Microsoft Visual C++ 6.0集成开发环境中编译和运行的。Windows API是...
html写的贪吃蛇JS，通过html编写实现html小游戏的功能