花了半天多时间写了个简陋版的贪吃蛇,哈哈,

最新推荐文章于 2024-06-04 11:04:19 发布
最新推荐文章于 2024-06-04 11:04:19 发布
阅读量92 收藏
点赞数
分类专栏： javascript 文章标签： 游戏
最近比较长一段时间都在学习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>
madbluesky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用python写一个简单的贪吃蛇游戏（附代码）
python2021_的博客
04-07 6万+
今天要给大家分享的是一个 pygame 写的“贪吃蛇”小游戏
用c语言写一个贪吃蛇游戏代码
weixin_42576804的博客
02-16 2371
首先，贪吃蛇是一个经典的游戏，主要通过控制一条蛇在地图上吃食物，不断长长身体，最终实现最高分数。 以下是使用C语言编写贪吃蛇游戏的示例代码： ``` #include<stdio.h> #include<conio.h> #include<stdlib.h> #include<time.h> #define WIDTH 10 #define HEIG...
游戏编程笔记-起步（一）一个简单的游戏-贪吃蛇
游蓝海 的专栏
10-27 3万+
二 游戏编程起步 1.一个简单的游戏-贪吃蛇 1.贪吃蛇游戏剖析 1）游戏的目标。在不被撞死的前提下，吃掉奖子增加自己的长度，来完成升级。 2）游戏中的物体。蛇，墙壁，奖子。 3）动作。蛇移动，蛇吃奖子，蛇增加长度。 2.数据结构与算法分析 1）数据结构。简单起见，所有物体都用方块拼接。         则蛇可以使用一个一维数组描述，数组的每个单元描述了蛇块的状态，
C语言写个贪吃蛇游戏
嵌入式Linux
02-19 4万+
贪吃蛇是个非常经典的游戏，用C语言来实现也是一个好玩的事情。这个游戏我写完后放在知乎，竟然点赞的人数超级多。我觉得大家喜欢，一个方面是因为写得简单，大家都能看得懂，一个可扩展性还是非常强...
Java实现贪吃蛇大作战小游戏（完整版）
热门推荐
陈橘又青的博客
06-20 6万+
用swing技术实现编写一个贪吃蛇大作战小游戏，项目供大家参考学习交流。
使用python game写一个贪吃蛇游戏
嵌入式Linux
01-16 4497
前言 最近在用python 做项目，也想对python有多一些了解，之前有用C语言和C++写过python游戏，刚好可以通过这个游戏来对python多一些了解。 文章内容翻译自以下链接 https://www.edureka.co/blog/snake-game-with-pygame/ pygame 介绍 pygame是一个利用SDK库编写的游戏库，SDL全名是Simple DirectMediaLayer，SDK是用C编写的，不过也可以用C++开发，很多很多人已经加入pygame中，pygame会越
用200行C语言代码写出一个贪吃蛇——1.0(基本版)
weixin_59913110的博客
06-06 5057
总的来说，贪吃蛇这个小游戏涉及到的东西不多，但是对逻辑思维是比较吃基本功的。贪吃蛇，显示给我们看的有三部分：蛇、食物、地图边界。我们可以用一个二维数组来标记这些部分：例如这里我创建了一个 5*10 的二维数组，其中 -1 表食物， 1 表蛇头，2、3、4、5表蛇身，0表示空地。 如果我们想要蛇移动起来，只需要将 蛇尾置0 ，其余部分+1 就行了。另外需要说明的是，我们使用 a s d w 来控制方向，这四个方向对应的整数分别是：3、2、1、0。 5.源文件(函数内部)func.c 6.
用链表写一个简单的贪吃蛇游戏
weixin_53952997的博客
02-04 3275
贪吃蛇小游戏主要使用C语言图形库graphics.h头文件，利用链表结构对坐标表示即可完成。
如何用html做一个贪吃蛇,如何用HTML5制作贪吃蛇游戏
weixin_30419031的博客
07-01 3333
如何用HTML5制作贪吃蛇游戏发布时间：2020-07-09 15:09:59来源：亿速云阅读：122作者：Leah如何用HTML5制作贪吃蛇游戏？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：实现效果如下实现思路：ps：这个只是思路，详细可看代码注释一...
诺基亚3d贪吃蛇java版_3D贪吃蛇诺基亚六边形
weixin_33328904的博客
02-28 1632
3D贪吃蛇诺基亚六边形是一款十分经典的贪吃蛇游戏。3D贪吃蛇诺基亚六边形是曾经的手机巨头诺基亚在自己的产品上内置的一款贪吃蛇游戏，这款贪吃蛇从2D空间进化到了3D空间，玩家将在一个立体的六边形内操控贪吃蛇进行吞噬和成长，同时避免吃到自己的身体。挑战性更大了，您有信心吗?3D贪吃蛇诺基亚六边形介绍在智能手机还没普及的时代，大家都在用诺基亚时，上面的经典贪吃蛇游戏是许多人的童年或者青年回忆，这个永远吃...
网络版贪吃蛇（java）
03-08
java编写的，网络版，贪吃蛇。方向键控制贪吃蛇。
一个简陋的贪吃蛇
08-20
贪吃蛇代码，没写注释，但是程序的函数名可以很容易知道是什么意思
使用Python写一个贪吃蛇游戏实例代码
12-24
我在程序中加入了分数显示，三种特殊食物，将贪吃蛇的游戏逻辑写到了SnakeGame的类中，而不是在Snake类中。 特殊食物: 1.绿色：普通，吃了增加体型 2.红色：吃了减少体型 3.金色：吃了回到最初体型 4.变色食物：吃了...
WPF实现简陋版贪吃蛇
07-25
使用WPF技术，实现了一个简陋版的贪吃蛇小游戏。
Win32简陋版贪吃蛇
08-11
Win32简陋版贪吃蛇 Win32简陋版贪吃蛇Win32简陋版贪吃蛇
2024年6月2日 (周日) 叶子游戏新闻
叶子游戏的博客
06-02 961
50 Floors: The Paranormal Investigators Prologue》是一款寻找“异常”，逃出无线循环的惊悚解谜新游，北地下50层困住玩家需要从底层起步，一层层的寻找可疑之处，逐渐回到地面，由于层数大幅提升，本作贴心的提供了难易度选择，防止玩家崩溃。用户化身男主角林逸，用第一视角沉浸式与单纯善良的青梅竹马、擅长撒娇的可爱学妹、大大咧咧的师姐、内心高傲的前同事、外冷内热的上司、腹黑横蛮的富家千金等六位性格各异、长相各异的美女相识、相知、相爱，展开一段又一段沉浸式甜蜜之旅。
5.透明效果
qq_65461674的博客
06-04 164
一、为什么渲染顺序很重要 二、Unity Shader的渲染顺序 三、透明度测试 四、透明度混合 五、开启深度写入的半透明效果 六、ShaderLab的混合命令 1.混合等式和参数 2.混合操作 3.常见的混合类型 七、双面渲染的透明效果 1.透明度测试的双面渲染 2.透明度混合的双面渲染
python 五子棋游戏代码
2401_83470102的博客
05-31 606
这段代码使用了Pygame库来创建和管理游戏界面，并使用NumPy来处理棋盘状态。它提供了一个简单的五子棋游戏，用户可以通过点击棋盘来下子，棋子的颜色交替变化。下面是一个简单的五子棋游戏的Python代码示例。这个示例包括了游戏逻辑和用户界面的基本实现，但并不完整，例如没有AI对战功能。
如何选择Unity的4种批处理方式
最新发布
UWA—简单优化，优化简单！
06-04 734
UWA一下，你就知道～
帮我写一个JAVA版本贪吃蛇的游戏
03-23
好的，我可以帮您写一个JAVA版本的贪吃蛇游戏。以下是代码： ``` import java.awt.*; import java.awt.event.*; import javax.swing.*; public class SnakeGame extends JPanel implements ActionListener { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值