一个html5贪吃蛇源码

最新推荐文章于 2023-01-11 15:00:00 发布
最新推荐文章于 2023-01-11 15:00:00 发布
阅读量147 收藏
点赞数
原文链接：http://www.cnblogs.com/mrjim/archive/2011/10/07/4475282.html
版权

这个源码我也不记得是在哪儿看到的了，今天贴出来跟大家分享一下，不过写这个源码的家伙估计卖手机的吧，源码中全是用手机型号来命名的..我对源码稍微改动了部分，下面上源码:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>贪吃蛇</title>
		<script language="javascript">
		function snake(money,card){
	this.x = money;
	this.y = card;	
  }
function n97(){
	var initX = 10;
	var initY = 10;
	var SIZE = 20;	
	this.nokia6700 = new Array();
	this.nokia5230 = new Array();
	this.k209 = 0;
	this.targetX = 0;
	this.targetY = 0;
	this.manager = null;
	this.setObserver = function(obs){
		this.manager = obs;
	}
	this.init =  function(){
		this.nokia5230.length = 0;
		this.nokia6700.length = 0;	
		for(i = 0;i <= SIZE + 1; i++ ){
			this.nokia5230[i] = new Array();
		}
		for (i = 0; i <= SIZE + 1; i++) {
			this.nokia5230[i][0] = 1;
			this.nokia5230[SIZE + 1][i] = 1;
			this.nokia5230[0][i] = 1;
			this.nokia5230[i][SIZE + 1] = 1;
		}
		for (i = 5; i <= initX; i++) {
			var point = new snake(i, initY);
			this.addsnake(point);
		}
		this.k209 = 3;
		this.productFood();	
	}
	this.move = function(){
		var head = this.getHead();
		var point = new snake(head.x,head.y);
		switch (this.k209) {
			case 1:
				point.x-- ;		
				break;
			case 2:		
				point.y--;
				break;
			case 3:
				point.x++;		
				break;
			case 4:	
				point.y++;
				break;
		}
		this.process(point);
	}
	this.turn = function(code){
		var head = this.getHead();
		var point = new snake(head.x,head.y);
		switch(code - 36){
			case 1:
			if(this.k209 == 1 || this.k209 == 3)
			return;	
			point.x--;
			break;
			case 2:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			point.y--;
			break;
			case 3:
			if(this.k209 == 1 || this.k209 == 3)
			return;
			point.x++;	
			break;
			case 4:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			point.y++;
			break;		
		}
		this.k209 = code - 36;
		this.process(point);
	}
	this.process = function(point){
		if (this.ifDie(point)) {
			alert("你挂了！");
			this.manager.stopGame();
			return;
		}
		if (this.eatable(point)) {
			this.manager.removesnake(point);
			this.addsnake(point);
			this.manager.addScore();
			this.productFood();
		}
		else {
			this.addsnake(point);
			this.delTailsnake();	
		}
	}
	this.ifDie = function(point){
		return this.nokia5230[point.x][point.y] == 1;
	}
	this.getHead = function(){
		return this.nokia6700[0];
	}
	this.getTail = function(){
		return this.nokia6700[this.nokia6700.length - 1];
	}
	this.eatable = function(head){
		return (head.x == this.targetX && head.y == this.targetY);
	}
	this.addsnake = function(point){
		this.nokia5230[point.x][point.y] = 1;
		this.nokia6700.unshift(point);
		this.manager.drawsnake(point);
	}
	this.delTailsnake = function(){
		var point = this.nokia6700.pop();
		this.nokia5230[point.x][point.y] = 0;	
		this.manager.removesnake(point);
	}
	this.productFood = function(){		
		do {
			var x = Math.round(Math.random() * 100 % SIZE);
			var y = Math.round(Math.random() * 100 % SIZE);
		}
		while (this.nokia5230[x][y] == 1)
		this.targetX = x;
		this.targetY = y;
		this.manager.drawFood(x,y);
	}
}
 function Ga1900(canvasId){
 	var WIDTH = 20;
 	var canvas = document.getElementById(canvasId);
	var RED = "#FF0000"
	var WHITE = "#FFFFFF";
	var BLACK = "#000000";
	this.cxt = canvas.getContext("2d");
 	var e398 = new n97();
	this.moveHandle = null;
	this.gamePanel = document.getElementById("gamePanel");
	this.scoreLabel =  document.getElementById("score");
	this.maxScoreLabel =  document.getElementById("highestScore");
	this.step = 0;
	this.score = 0;
	this.maxScore = 0;
	if(localStorage.maxScore)  
	this.maxScore = localStorage.maxScore;
	this.maxScoreLabel.innerHTML = this.maxScore;	
	e398.setObserver(this);
 	this.startGame = function(step){
		this.clear();
 		e398.init();
		this.score = 0;	
		this.scoreLabel.innerHTML = this.score; 
		this.gamePanel.onkeydown = onKeyDown;
		this.gamePanel.onkeydown = onKeyDown;
		this.step = parseInt(step);
 		this.moveHandle = setInterval(move, 500 - 50 * this.step);
 	}
	var move = function(){
		e398.move();
	}
	this.stopGame = function(){
		this.pause();
		document.getElementById("control").disabled = true;
		localStorage.maxScore = this.maxScore; 
	}
	this.pause = function(){
		clearInterval(this.moveHandle);
		this.gamePanel.onkeydown = null;
	}
	this.goon = function(){
		this.gamePanel.onkeydown = onKeyDown;
		this.moveHandle = setInterval(move, 500 - 50 * this.step);
	}
	this.addScore = function(){
		this.score += this.step;
		this.scoreLabel.innerHTML = this.score; 
		if(this.score > this.maxScore){
			this.maxScore = this.score;
			this.maxScoreLabel.innerHTML = this.score;
		}
	}
	var onKeyDown = function(e){
		if (e.which < 37 || e.which > 40) 
			return;
		e398.turn(e.which);
	}
		this.removeFood = function(x,y){
		this.cxt.fillStyle = WHITE;
		this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
	}
	this.drawFood = function(x,y){
		this.cxt.fillStyle = RED;
		this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
	}
	this.drawsnake = function(point){
		this.cxt.fillStyle = BLACK;
		this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);	
	}
	this.removesnake = function(point){
		this.cxt.fillStyle = WHITE;
		this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);	
	}
	this.clear = function(){
		this.cxt.fillStyle = WHITE;
		this.cxt.fillRect(0,0,20*WIDTH,20*WIDTH);
	}
 }	
 </script>
	</head>
	<body>
		<div align="center">
		<h1>贪吃蛇</h1>
		<div style="width:550px;margin:0 auto;height:400px;">
		<div id="gamePanel" tabindex="0"  style="width:400px; float:left;clear:left">
		<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;" >
			您的浏览器不支持canvas，请尝试更换浏览器，建议使用opera浏览本站，你会有更好的体验。
		</canvas>
		</div>
		<div id="scoreboard" style="float:right;">
			最高分
			<div id="highestScore" style="color:red; font-weight:bold;">
				0
			</div>
			<p></p> 
			得分
			<div id="score" style="font-weight:bold;">
				0
			</div>
		</div>
		</div>
		<p>
		等级: <select id="speed">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>100</option>
			</select>
		<button id="start" οnclick="startGame(this)">开始</button>
		<button id="control" οnclick="control(this)" disabled="true">暂停</button>
		</p>
		</div>
		<script language="JavaScript">		 
			var gameMrg = new Ga1900("myCanvas");	
			function startGame(startBtn){
				var step = document.getElementById("speed").value;
				gameMrg.startGame(step);
				document.getElementById("gamePanel").focus();
				pause = true;
				var btn = document.getElementById("control");
				btn.innerHTML = "暂停";
				btn.disabled = false;	
			}	
			var pause = true;
			function control(btn){
				if (pause) {	
					gameMrg.pause();
					btn.innerHTML = "继续";
				}
				else{
					gameMrg.goon();
					btn.innerHTML = "暂停";
					document.getElementById("gamePanel").focus();
				}
				pause = !pause;	
			}					
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/mrjim/archive/2011/10/07/4475282.html

weixin_30247159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯生Html + Css +Js实现贪吃蛇（附源码）（个人练习）
m0_53479584的博客
08-05 1093
如题，今天用原生js实现贪吃蛇小游戏，主要是记录一下以及加深学习，大佬勿喷！
贪吃蛇h5+js
08-24
用原生的html5和js写的，感觉是学好H5和js最好的入门页面。。
贪吃蛇html游戏代码
wjh091225的博客
03-23 1万+
贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
代码-贪吃蛇
冯丙见的博客
10-28 9993
贪吃蛇游戏代码 <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } html, body { background-color: #000; height: 100%; } body { background: #222; background: -webkit-radial-gradient(#333, #111); backgro
html5贪吃蛇源码
03-13
总的来说，HTML5贪吃蛇源码的学习可以让你深入理解HTML5 Canvas的图形绘制、JavaScript的游戏编程逻辑，以及如何通过代码实现一个基本的交互式应用。通过对这个游戏的分析和修改，你还可以进一步学习到模块化编程、...
HTML5贪吃蛇中文版
12-01
总的来说，HTML5贪吃蛇中文版是一个很好的实践案例，它展示了HTML5和JavaScript在创建互动网页应用方面的强大能力。通过学习这个游戏的源码，开发者可以深入理解HTML5 Canvas的绘图机制，提升JavaScript编程技能，并...
html实现贪吃蛇游戏(源码)
11-01
html+js+css实现贪吃蛇游戏，酷炫的界面效果，点击开始游戏后，通过键盘的上下左右按键，操作移动方向，代码备注详细，一看就明白。 效果说明地址：...
canvas贪吃蛇源码.html
08-10
对应我canvas贪吃蛇那篇文章
html贪吃蛇源码
03-30
贪吃蛇源码 html贪吃蛇源码
HTML5贪食蛇网页游戏代码
06-12
HTML5网页贪吃蛇贪食蛇小游戏代码是一款点击任意键开始游戏，控制方式：按Shirft加速，方向键控制移动，Alt键重新开始。
H5 贪吃蛇demo
12-08
H5贪吃蛇demo 简单易学 内有注释
微信小程序贪吃蛇源码
05-29
基于小程序基本语法知识做的贪吃蛇小游戏，涉及数据绑定等概念，代码有详细注释，新手也可以看得懂。
HTML简易版贪吃蛇
09-14
用JavaScript和 HTML写了一个简易版扫雷游戏，大神勿喷，
HTML贪吃蛇游戏源码（穿墙）
yushun的博客
01-11 515
html贪吃蛇游戏源码（穿墙）
H5网页版贪吃蛇源代码
hnliu's blog
06-15 1万+
H5网页版贪吃蛇源代码，新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。重命名文件及后缀名为index.html。将文章最下面的两个图片保存下来，蓝色背景大图重命名为back.jpg，骷髅头的命名为pirate.png。在index.html同级目录下新建一个文件夹叫做image，然后将两张背景图放入image文件夹。现在index.html就可以正常运行了，双击就可以运行。
h5贪吃蛇动画
12-15
插件描述：h5画布，贪吃蛇简单动画. 参考示例：http://www.jq22.com/jquery-info4275
js实现贪吃蛇小游戏代码（源码）
qq_34222743的博客
01-13 1万+
贪吃蛇游戏     //定义一个点对象     function Point(x,y){         this.x=x;         this.y=y;         this.getX=function(){             return x;         }         this.getY=function(){             re
写一个BCB版的贪吃蛇源码
最新发布
02-23
我可以提供一份简单的贪吃蛇源码，它可以在BCB中运行：program snake; const Max_X = 10; Max_Y = 10;type Position = record x,y : integer; end;var field : array[0..Max_X, 0..Max_Y] of boolean; snake ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值