html 贪吃蛇代码
最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。
这个贪吃蛇有一点毒。原来设定了100级；100级刚开局就挂了。后来改掉了选项菜单，修复了。
还有什么bug,欢迎点击侧边的QQ按钮联系我。
代码部分：
<!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>9</option>
</select>
<button id="start" onclick="startGame(this)">开始</button>
<button id="control" onclick="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>
贪吃蛇
注意：浏览器必须支持canvas才行。
html 贪吃蛇代码的更多相关文章
- C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: #ifndef SNAKE #define SNAKE #include<windows.h> #include< ...
- 转载——C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: 1 #ifndef SNAKE 2 #define SNAKE 3 4 #include<windows.h> 5 #i ...
- 以前写的canvas 小游戏 贪吃蛇代码
效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...
- cocos2d-x学习笔记(贪吃蛇代码)
方向键控制蛇运动:上↑:右→:下↓:左←. 百度网盘链接:https://pan.baidu.com/s/1c1FSXaw 提取密码:u1kr
- 自己用canvas写的贪吃蛇代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 贪吃蛇的java代码分析（三）
代码剖析 在上一篇文章中,我们完成了贪吃蛇部分代码的构造.回头审视我们写的代码与思路,会发现我们遗漏了一个重要的地方,那就是:贪吃蛇的自身移动.想必大家都知道,贪吃蛇自身是会自己移动的,并且会跟随你的 ...
- JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
- python贪吃蛇
代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
随机推荐
- Adam那么棒，为什么还对SGD念念不忘 (2)—— Adam的两宗罪
在上篇文章中,我们用一个框架来回顾了主流的深度学习优化算法.可以看到,一代又一代的研究者们为了我们能炼(xun)好(hao)金(mo)丹(xing)可谓是煞费苦心.从理论上看,一代更比一代完善,Ada ...
- 百度小程序富文本bdParse遇到的坑
百度开发工具能正常显示文章图文详情, web浏览也可以, app浏览就不行, 审核说兼容性问题, 都不是, 后来发现是后台传输的数据问题, 不能用json_encode()返回数据
- [转载] iptables 防火墙设置
http://hongwei.im/iptables-setting-for-ubuntu-1304/ Iptables是一个防火墙,所有的Ubuntu官方发行版(Ubuntu,Kubuntu,Xub ...
- 浅谈集合框架二 List、Set常用方法
最近刚学完集合框架,想把自己的一些学习笔记与想法整理一下,所以本篇博客或许会有一些内容写的不严谨或者不正确,还请大神指出.初学者对于本篇博客只建议作为参考,欢迎留言共同学习. 之前有介绍集合框架的体系 ...
- H3C 环路避免机制五：抑制时间
- P1088 上台阶
题目描述 楼梯有 \(n(1 \le n \le 50)\) 阶台阶,上楼时可以一步上 \(1\) 阶,也可以一步上 \(2\) 阶,也可以一步上 \(3\) 阶,编程计算共有多少种不同的走法. 输入 ...
- jQuery 工具类函数-URL操作函数
调用名为$. param的工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为: $. param (obj); 参数obj表示需要进 ...
- 螺旋矩阵O(1)根据坐标求值
传送门 洛谷2239 •题意 从矩阵的左上角(第11行第11列)出发,初始时向右移动: 如果前方是未曾经过的格子,则继续前进,否则右转: 重复上述操作直至经过矩阵中所有格子. 根据经过顺序,在格子中依 ...
- js算法（1）
数组排序 arr.sort(function compare(a,b){return b.value-a.value}); json 排序 $.getJSON('URl',function(data) ...
- onCreate不加载布局
如果Activity重写的是 onCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentS ...